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

Sémantique HTML des formulaires
É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.)
  • <input type="checkbox" value="valeur1" id="choix1" name="groupeDeCaseACocher"> : case à cocher
  • <input type="radio" value="valeur1" id="choix1" name="groupeDeBoutonRadio"> : bouton radio
  • <input type="date" id="laDate" name="laDate" > : champ date (html5)
  • <input type="email" id="leMail" name="leMail" > : champ mail (html5)
  • <input type="password" id="mdp" name="mdp" > : champ mot de passe (html5)
  • <input type="search" id="recherche" name="recherche" > : champ de recherche (html5)
  • <input type="file" id="fichier" name="fichier" > : sélection de fichier pour envoi
<button>...</button> Bouton de soumission ou de réinitialisation du formulaire.
  • <button type="submit">...</button> : soumission du formulaire
  • <button type="reset">...</button> : réinitialisation du formulaire