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 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 :
- les informations sur la personne ;
- les informations sur l’adresse ;
- les informations sur la carte de crédit.
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 :
-
email, pour le champ email ; -
tel, pour le champ téléphone ; -
number, pour le numéro de carte et le code de sécurité ; -
required, pour les champs à saisie obligatoire ; -
placeholder, pour donner des indications à l’intérieur de certains champs ; -
autofocus, pour permettre une focalisation sur le premier champ de saisie lorsque la page est chargée.
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 :
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 : +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>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 :
- créer un compteur en utilisant la propriété
counter-resetsur l’élémentform; - appeler le compteur avec la propriété
content(en gardant le nom que nous avons créé auparavant) ; - avec la propriété
counter-increment, indiquer qu’à chaque élément qui correspond à notre sélecteur, ce compteur sera augmenté de 1.
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 Les nouveaux types d’border-radius (du moins pas aujourd’hui).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 !
http://24ways.org/2009/have-a-field-day-with-html5-forms