Formulaires HTML5 : prenez la clé des champs

Par Inayaili de León

Les formulaires sont souvent considérés comme ces trucs pénibles qu’il faut baliser et styler. Désolée, mais je suis d’un tout autre avis : les formulaires, c’est ce que je préfère (tout comme les tableaux !).

Nous allons voir ici comment styler un beau formulaire HTML5, grâce aux CSS avancées et aux techniques CSS3 les plus récentes. Je vous promets qu’après avoir lu cet article, vous voudrez absolument fabriquer vos propres formulaires.

Voici ce que nous allons créer :

Le projet de formulaire

Le projet initial. Les icônes proviennent de Chalkwork Payments.

On donne du sens aux balises

Nous allons appliquer du style à un simple formulaire de paiement. Il y a trois grandes sections dans ce formulaire :

Nous allons aussi utiliser quelques-uns des nouveaux attributs et types d’entrée du HTML5 pour créer des champs qui aient du sens, et éviter d’utiliser trop de class et de id inutiles :

Il y a des milliers d’autres nouveaux attributs et types d’entrée en HTML5, et vous auriez tout intérêt à aller voir les nouveautés sur le site du W3C. J’espère que cela vous convaincra que le balisage des formulaires peut devenir beaucoup plus sympa qu’avant.

On pose des fondations solides

Chaque section du formulaire sera insérée dans son propre fieldset. En ce qui concerne les boutons radio qui permettent de choisir le type de carte de crédit, nous placerons ces options dans un autre fieldset imbriqué.

Nous allons également utiliser une liste ordonnée pour regrouper chaque couple label / input (étiquette du champ / données à y entrer). Cela nous fournira une sorte de point d’accroche pour appliquer un style de façon sémantique, tout en rendant le formulaire plus lisible s’il est affiché alors que les feuilles de styles ne sont pas appliquées :

Le formulaire sans style

Voici donc le balisage avec lequel nous allons travailler :

<form id=paiement>
  <fieldset>
    <legend>Votre identité</legend>

    <ol>
      <li>
        <label for=nom>Nom</label>
        <input id=nom name=nom type=text placeholder="Prénom et nom" required autofocus>
      </li>
      <li>
        <label for=email>Email</label>
        <input id=email name=email type=email placeholder="exemple@domaine.com" required>
      </li>
      <li>
        <label for=telephone>Téléphone</label>
        <input id=telephone name=telephone type=tel placeholder="par ex&nbsp;: +3375500000000" required>
      </li>
    </ol>
  </fieldset>

  <fieldset>
    <legend>Adresse de livraison</legend>
      <ol>
        <li>
          <label for=adresse>Adresse</label>
          <textarea id=adresse name=adresse rows=5 required></textarea>
        </li>
        <li>
          <label for=codepostal>Code postal</label>
          <input id=codepostal name=codepostal type=text required>
        </li>
          <li>
          <label for=pays>Pays</label>
          <input id=pays name=pays type=text required>
        </li>
      </ol>
    </fieldset>
  <fieldset>
    <legend>Informations CB</legend>
    <ol>
      <li>
        <fieldset>
          <legend>Type de carte bancaire</legend>
          <ol>
            <li>
              <input id=visa name=type_de_carte type=radio>
              <label for=visa>VISA</label>
            </li>
            <li>
              <input id=amex name=type_de_carte type=radio>
              <label for=amex>AmEx</label>
            </li>
            <li>
              <input id=mastercard name=type_de_carte type=radio>
              <label for=mastercard>Mastercard</label>
            </li>
          </ol>
        </fieldset>
      </li>
      <li>
        <label for=numero_de_carte>N° de carte</label>
        <input id=numero_de_carte name=numero_de_carte type=number required>
      </li>
      <li>
        <label for=securite>Code sécurité</label>
        <input id=securite name=securite type=number required>
      </li>
      <li>
        <label for=nom_porteur>Nom du porteur</label>
        <input id=nom_porteur name=nom_porteur type=text placeholder="Même nom que sur la carte" required>
      </li>
    </ol>
  </fieldset>

  <fieldset>
    <button type=submit>J'achète !</button>
  </fieldset>
</form>

Code source de cet exemple

On améliore l’aspect

Commençons par le commencement : il faut d’abord donner un cadre par défaut, en remettant à zéro les marges et les espacements des éléments, et en indiquant une police par défaut pour la page :

html, body, h1, form, fieldset, legend, ol, li {
  margin: 0;
  padding: 0;
}
body {
  background: #ffffff;
  color: #111111;
  font-family: Georgia, "Times New Roman", Times, serif;
  padding: 20px;
}

Puis on va appliquer un style à l’élément form qui entoure nos champs de saisie :

form#paiement {
  background: #9cbc2c;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 20px;
  width: 400px;
}

Nous allons aussi enlever la bordure de l’élément fieldset, puis ajouter de la marge en bas. Grâce à la pseudo-classe :last-of-type, nous enlevons la marge en bas du dernier fieldset, car nous n’en avons pas besoin.

form#paiement fieldset {
  border: none;
  margin-bottom: 10px;
}
form#paiement fieldset:last-of-type {
  margin-bottom: 0;
}

Puis nous allons passer les legend en grand et en gras, et nous allons également appliquer un text-shadow vert clair pour obtenir un petit effet sympa supplémentaire :

form#paiement legend {
  color: #384313;
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 10px;
  text-shadow: 0 1px 1px #c0d576;
}

Nos legend ont maintenant très bel aspect, mais ce serait encore mieux si elles indiquaient très clairement le nombre d’étapes à suivre dans notre formulaire. Au lieu de l’ajouter manuellement à chaque legend, nous pouvons utiliser des compteurs générés automatiquement.

Pour ajouter un compteur à un élément, il faut utiliser l’un des pseudo-éléments :before ou :after pour ajouter du contenu via les feuilles de style. Voici comment faire :

form#paiement > fieldset > legend:before {
  content: "Étape " counter(fieldsets) " : ";
  counter-increment: fieldsets;
}

Enfin, il faudra changer le style de la balise legend qui appartient au groupe de boutons radio, pour lui donner l’aspect d’un label :

form#paiement fieldset fieldset legend {
  color: #111111;
  font-size: 13px;
  font-weight: normal;
  padding-bottom: 0;
}

On donne du style aux listes

Pour nos éléments de liste, nous allons nous contenter d’ajouter de jolis coins arrondis, avec bordure et fond semi-transparents. Puisque nous utilisons des couleurs RGBa, il faut fournir une solution pour les navigateurs qui ne les gèrent pas (à placer avant la couleur RGBa). Pour les listes imbriquées, mieux vaut retirer ces propriétés pour éviter qu’elles se recoupent :

form#paiement ol li {
  background: #b9cf6a;
  background: rgba(255,255,255,.3);
  border-color: #e3ebc3;
  border-color: rgba(255,255,255,.6);
  border-style: solid;
  border-width: 2px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  line-height: 30px;
  list-style: none;
  padding: 5px 10px;
  margin-bottom: 2px;
}
form#paiement ol ol li {
  background: none;
  border: none;
  float: left;
}

On contrôle les formulaires

Il ne nous reste plus qu’à styler nos label (étiquettes de champ de saisie), nos input (les entrées à saisir) et l’élément button. Tous nos label auront le même aspect, à l’exception de celui utilisé pour les éléments radio. Nous les laisserons flotter à gauche, et nous leur attribuerons une largeur.

Pour les label de la partie carte de crédit, nous allons ajouter une icône en image de fond, et éliminer certaines propriétés inutiles. Nous utiliserons le sélecteur d’attribut pour définir l’image de fond de chaque label ; dans le cas présent, c’est l’attribut for qui sera employé pour chaque label.

Encore un détail pour améliorer l’ergonomie : nous allons ajouter un curseur de type pointeur (cursor: pointer) aux label de type bouton radio lorsqu’ils sont survolés (état hover), afin que l’utilisateur sache qu’il n’a qu’à cliquer pour sélectionner cette option.

form#paiement label {
  float: left;
  font-size: 13px;
  width: 110px;
}
form#paiement fieldset fieldset label {
  background:none no-repeat left 50%;
  line-height: 20px;
  padding: 0 0 0 30px;
  width: auto;
}
form#paiement label[for=visa] {
  background-image: url(visa.gif);
}
form#paiement label[for=amex] {
  background-image: url(amex.gif);
}
form#paiement label[for=mastercard] {
  background-image: url(mastercard.gif);
}
form#paiement fieldset fieldset label:hover {
  cursor: pointer;
}

On touche à la fin ! Passons maintenant aux éléments input. Nous voulons que tous les champs input soient identiques, sauf pour les boutons radio et la zone de texte textarea. À cet effet, nous utiliserons la pseudo-classe de négation :not(). Grâce à elle, nous allons cibler tous les éléments input à l’exception de ceux qui possèdent le type radio.

Il ne faudra pas non plus oublier d’ajouter des styles de focus, ainsi que de styler correctement les input de type radio.

form#paiement input:not([type=radio]),
form#paiement textarea {
  background: #ffffff;
  border: none;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;
  font: italic 13px Georgia, "Times New Roman", Times, serif;
  outline: none;
  padding: 5px;
  width: 200px;
}
form#paiement input:not([type=submit]):focus,
form#paiement textarea:focus {
  background: #eaeaea;
}
form#paiement input[type=radio] {
  float: left;
  margin-right: 5px;
}

Pour finir, nous voici arrivés au button, le bouton permettant de soumettre le formulaire. Nous allons juste y ajouter une jolie police et un effet de text-shadow, puis l’aligner au centre du formulaire et lui donner différentes couleurs de fond pour chaque état possible :

form#paiement button {
  background: #384313;
  border: none;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
  color: #ffffff;
  display: block;
  font: 18px Georgia, "Times New Roman", Times, serif;
  letter-spacing: 1px;
  margin: auto;
  padding: 7px 25px;
  text-shadow: 0 1px 1px #000000;
  text-transform: uppercase;
}
form#paiement button:hover {
  background: #1e2506;
  cursor: pointer;
}

Voilà, c’est fini ! Regardez le formulaire terminé.
Ce formulaire n’aura pas le même aspect dans tous les navigateurs, bien évidemment. Internet Explorer et Opera n’interpètent pas border-radius (du moins pas aujourd’hui). Les nouveaux types d’input sont simplement rendus comme des input ordinaires dans certains navigateurs ; et une partie des CSS les plus avancées comme le compteur ou bien :last-of-type ou encore text-shadow ne sont pas interprétées par certains navigateurs. Mais cela ne vous empêche pas de les utiliser dès maintenant afin de simplifier votre processus de développement. Voilà, j’espère que mon cadeau vous a plu !

Fiche technique

À propos de l'auteur

Inayaili de León (ou juste Yaili) est une designer web et blogueuse. Elle a grandi au Portugal mais vit et travaille maintenant à Londres, à passer le plus clair de son temps sur du code valide, à écrire ou faire en sorte d’ignorer l’existence d’Internet Explorer (et à échouer).
Ses articles peuvent être lus sur son propre blog, «  Web Designer Notebook  », mais elle écrit fréquemment sur des sujets avancés à propos de CSS pour Smashing Magazine.
Vous pouvez suivre ses divagations sur le design, les standards web, les pizzas, le chocolat et les chats.

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

CSS

Ergonomie

HTML

Web design

© 2001-2016 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site