Les formulaires

Les formulaires sont un des éléments qui permettent d’apporter un côté dynamique à une page. Chaque formulaire peut être composé d’une série d’éléments spécifiques à des cas d’utilisation précis.

`form`

source ↗

La balise <form> est la racine de n’importe quel formulaire HTML. Elle est absolument obligatoire, avant tout pour des raisons de sémantique et d’accessibilité. C’est à l’intérieur de celle-ci que vont être intégrés l’ensemble des champs désirés.

index.html

  <form></form>

Attributs essentiels

`autocomplete`

L’attribut autocomplete spécifie au navigateur s’il doit pré-remplir l’ensemble des champs du formulaire avec vos informations (adresse, CB…). Cet attribut s’applique également sur chacun des champs, et prendra l’avantage sur la configuration racine.

index.html

  <form autocomplete></form>

`name`

L’attribut name permet de donner un nom unique au formulaire. Préférez utiliser un name plutôt qu’une classe ou un ID, car vous pouvez aussi accéder à ce formulaire en JS via document.forms, et lecteurs d’écran seront plus pertinents.

index.html

  <form name="contact-form"></form>

`action`

L’attribut action indique au navigateur quelle URL appeler à la soumission du formulaire. C’est cette URL qui se chargera de la validation des données (parce qu’il faut toujours valider les données côté serveur).

index.html

  <form action="https://example.com/submit"></form>

`method`

L’attribut method indique au navigateur quelle méthode HTTP ↗ utiliser à la soumission du formulaire.

index.html

  <form action="https://example.com/submit" method="POST"></form>

`enctype`

L’attribut enctype indique au navigateur quelle typologie de données sera envoyée au serveur. Elle fonctionne uniquement dans le cas où la méthode HTTP est POST.

Les choix possibles sont :

enctype="application/x-www-form-urlencoded": le choix par défaut, suffisant dans la plupart des cas
enctype="multipart/form-data" : le choix obligatoire si vous envoyez des fichiers

index.html

  <form action="https://example.com/submit" method="POST" enctype="multipart/form-data"></form>

`novalidate`

L’attribut novalidate indique au navigateur de ne pas valider les données côté HTML, avant l’envoi au serveur.

index.html

  <form novalidate></form>

`label`

source ↗

L’élément label permet d’associer un texte à un chammp de formulaire. Celui-ci n’est pas obligatoire, néanmoins il est fortement recommandé d’en ajouter un à chaque champ pour que les utilisateurs soient correctement informés, et favoriser la compréhension des lecteurs d’écran.

Dans ce cas, il convient d’ajouter l’attribut for au <label>, qui contient la même valeur que l’attribut id du champ associé, comme dans l’exemple ci-dessous :

index.html

<form>
  <label for="test">Mon label</label>
  <input type="text" name="test" id="test">
</form>

`fieldset`

source ↗

La balise fieldset permet de grouper un ensemble de champ au sein d’une même section. Sémantiquement, cette balise permet de regrouper les champs qui sont destinés à la même finalité (informations personnelles, livraison…).

La balise legend permet d’ajouter un titre à un élément fieldset, pour indiquer visuellement à quoi sert ce regroupement.

index.html

<form>
  <fieldset>
    <legend>Titre de ma section</legend>
  </fieldset>
</form>

`button[type="submit"]`

source ↗

La balise button associée à l’attribut type="submit" permet de spécifier au navigateur que le bouton a comme unique but de soumettre le formulaire auquel il est relié, soit car il en est enfant, soit car il y fait référence via son attribut form.

index.html

<!-- MÉTHODE 1 -->
<form>
  <button type="submit">Soumettre le formulaire de l'intérieur</button>
</form>
<!-- MÉTHODE 2 -->
<form name="submit-form"></form>
<button type="submit" form="submit-form">Soumettre le formulaire de l'extérieur</button>