Exemple

Ceci est un exemple de formulaire de paiement basique extrait de l'article Comment structurer un formulaire HTML.

Un formulaire de paiement

Contenu HTML

<form action="https://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" method="post">
  <h1>Formulaire de paiement</h1>
  <p>Les champs obligatoires sont suivis par <strong><abbr title="obligatoire">*</abbr></strong>.</p>
 
  <section>
  <h2>Information de contact</h2>
 
  <fieldset>
    <legend>Titre</legend>
    <ul>
    <li>
      <label for="titre_1">
      <input type="radio" id="titre_1" name="titre" value="M." />
      Monsieur
      </label>
    </li>
    <li>
      <label for="titre_2">
      <input type="radio" id="titre_2" name="titre" value="Mme" />
      Madame
      </label>
    </li>
    </ul>
  </fieldset>
 
  <p>
    <label for="nom">
    <span>Nom&nbsp;:</span>
    <input type="text" id="nom" name="nomdutilisateur" required />
    <strong><abbr title="obligatoire">*</abbr></strong>
    </label>
  </p>
 
   <p>
    <label for="courriel">
    <span>Courriel&nbsp;:</span>
    <input type="email" id="courriel" name="courrielutilisateur" required />
    <strong><abbr title="required">*</abbr></strong>
    </label>
  </p>
  </section>
 
  <section>
  <h2>Information de paiement</h2>
 
  <p>
    <label for="carte">
    <span>Type de carte&nbsp;:</span>
    <select id="card" name="carteutilisateur">
      <option value="visa">Visa</option>
      <option value="mc">Mastercard</option>
      <option value="amex">American Express</option>
    </select>
    </label>
  </p>
  <p>
    <label for="numero">
    <span>Numéro de la carte&nbsp;:</span>
    <input type="text" id="numero" name="numerocarte" required />
    <strong><abbr title="obligatoire">*</abbr></strong>
    </label>
  </p>
  <p>
    <label for="date">
    <span>Date d'expiration&nbsp;:</span>
    <input type="text" id="date" name="expiration" required />
    <strong><abbr title="obligatoire">*</abbr></strong>
    <em>au format mm/aa</em>
    </label>
  </p>
  </section>
 
  <section>
  <p>
    <button>Confirmer le paiement</button>
  </p>
  </section>
</form>

Contenu CSS

h1 {
  margin-top: 0;
}

ul {
  margin : 0;
  padding: 0;
  list-style: none;
}

form {
  margin: 0 auto;
  width : 400px;

  padding: 1em;
  border : 1px solid #CCC;
  border-radius: 1em;
}

div + div {
  margin-top: 1em;
}

label span{
  display: inline-block;
  width  : 120px;
  text-align: right;
}

input, textarea {
  font: 1em sans-serif;

  width: 250px;
  -moz-box-sizing: border-box;
       box-sizing: border-box;

  border: 1px solid #999;
}

input[type=checkbox], input[type=radio] {
  width : auto;
  border: none;
}

input:focus, textarea:focus {
  border-color: #000;
}

textarea {
  vertical-align: top;

  height: 5em;

  resize: vertical;
}

fieldset {
  width: 250px;
  -moz-box-sizing: border-box;
       box-sizing: border-box;

  margin-left: 124px;
 
  border: 1px solid #999;
}

button {
  margin-left: 124px;
}

Résultat