Sémantique HTML
Les formulaires HTML permettent d'envoyer des données qui seront ensuite traitées côté serveur. Les formulaires peuvent être visuellement et cognitivement complexes et difficiles à utiliser ; créer des formulaires accessibles rend leur utilisation plus facile.
Ce qu’il faut retenir
Un formulaire HTML peut être composé de plusieurs éléments :
- zones de texte (sur une seule ligne ou plusieurs lignes),
- liste de sélection déroulante,
- cases à cocher,
- boutons radio
- et boutons d’action (soumission du formulaire ou effacement des champs).
Une bonne pratique d’ergonomie logicielle et d’accessibilité consiste notamment à bien nommer les boutons d’actions du formulaire. Ainsi on priviligiera à un intitulé de bouton de soumission du type « Valider », un intitulé de bouton du type :
- « Confirmer votre inscription » ;
- « Valider la commande » ;
- « S’identifier »…
Code HTML
Élément HTM | Utilisation |
---|---|
<form>...</form> |
Déclaration du formulaire |
<fieldset>...</fieldset> |
Regroupement de champs de même nature. |
<legend>...</legend> |
Intitulé du groupe de champs. Attention <legend> est toujours implémenté après <fieldset> . |
<label>...</label> |
Libellé de champ |
<textarea>...</textarea> |
Zone de texte multi-lignes |
<select>...</select> |
Déclaration de liste déroulante |
<option>...</option> |
Item de la liste déroulante |
<optgroup label="...">...</optgroup> |
Regroupement d'options de la liste déroulante. |
<input>
Attention Il s'agit d'une balise orpheline. |
Champ de formulaire (texte, mot de passe, case à cocher, bouton, etc.)
|
<button>...</button> |
Bouton de soumission ou de réinitialisation du formulaire.
|