3.8 Formulaires HTML

• champs saisie de texte – text inputs (pour une ou plusieurs lignes)
• boutons radio – radio buttons
• cases à cocher – checkboxes
• des listes déroulantes – dropdowns
• widgets de téléchargement – upload widgets
• boutons de soumission – submit buttons

Ces contrôles utilisent des balises HTML différentes, mais la plupart d’entre eux utilisent la balise <input>. Comme il s’agit d’un élément auto-englobant, le type d’entrée est défini par son attribut type:

<!-- Champ texte - Text input -->
<input type="text">
<!-- Case à cocher - Checkbox -->
<input type="checkbox">
<!-- Bouton radio - Radio button -->
<input type="radio">

L’élément de formulaire – Form

<form> est un élément de niveau bloc qui définit une partie interactive d’une page Web. En conséquence, tous les contrôles de formulaire (tels que <input>, <textarea> ou <button>) est un élément de niveau bloc qui définit une partie interactive d’une page Web. En conséquence, tous les contrôles de formulaire (tels que <input>, <textarea> ou <button>) doivent apparaître dans un élément <form>.

Deux attributs HTML sont requis :

• action contient une adresse qui définit où les informations du formulaire seront envoyées
• method peut être GET ou POST et définit le mode d’envoi des informations de formulaire

Généralement, les informations du formulaire sont envoyées à un serveur. La manière dont ces données seront ensuite traitées dépasse le cadre de ce tutoriel.

Imaginez un formulaire comme une collection de contrôles de saisie qui fonctionnent ensemble pour effectuer une seule opération. Si vous avez écrit un formulaire de connexion, vous pouvez avoir 3 contrôles :

• un champ email <input type="email">
• un champ de mot de passe <input type="password">
• un bouton d’envoi <input type="submit">

Ces 3 éléments HTML seraient enfermés dans une seule <form action="/login" method="POST">.

Vous pouvez également ajouter un formulaire d’inscription dans la même page HTML, dans un élément <form> distinct.

Champ texte – Text inputs

Presque tous les formulaires requièrent une saisie textuelle de la part des utilisateurs pour leur permettre de saisir leur nom, leur adresse électronique, leur mot de passe, leur adresse, …
Les contrôles de formulaire texte se déclinent en différentes variantes :

Bien que ces champs soient très similaires et permettent aux utilisateurs de saisir tout type de texte (même une entrée erronée), leur type fournit une sémantique spécifique à l’entrée, en définissant le type d’information qu’il est supposé contenir.

Les navigateurs peuvent ensuite modifier légèrement l’interface d’un contrôle pour augmenter son interactivité ou indiquer le type de contenu attendu.

Par exemple, les entrées de mot de passe affichent des points au lieu de caractères.

Et les entrées numériques permettent d’augmenter / diminuer leur valeur à l’aide des touches haut et bas.

Placeholders

Les entrées de texte peuvent afficher un texte de substitution, qui disparaîtra dès qu’un texte est renseigné.

<input type="text" placeholder="votre Nom">

Si vous commencez à taper quelque chose, le texte «votre Nom» disparaîtra.

Étiquettes – Labels

Comme les éléments de formulaire ne sont pas très descriptifs, ils sont généralement précédés d’une étiquette.

<label>Email</label>
<input type="email">

Bien que les espaces réservés – placeholders – fournissent déjà des indications sur le contenu attendu, les étiquettes ont l’avantage de rester visibles à tout moment et peuvent être utilisées avec d’autres types de contrôles de formulaire, tels que les cases à cocher ou les boutons radio.

Bien que vous puissiez utiliser des paragraphes courts pour décrire les éléments de formulaire, l’utilisation de <label> Bien que vous puissiez utiliser des paragraphes courts pour décrire les éléments de formulaire, l’utilisation de <label> est sémantiquement plus valide car ils n’existent que dans les formulaires et peuvent être associés à un contrôle de formulaire spécifique en utilisant l’attribut for et en faisant correspondre sa valeur à l’identifiant id de l’entrée.

<label for="first_name">Prénom</label>
<input id="first_name" type="text">

En cliquant sur l’étiquette, la saisie de texte est focalisée et le curseur de texte est placé à l’intérieur. Bien que ce couplage semble inutile, il vous sera utile avec des cases à cocher et des boutons radio.

Cases à cocher – Checkboxes

Les cases à cocher – Checkboxes sont des contrôles de formulaire qui n’ont que 2 états: cochée ou décochée. Ils permettent fondamentalement à l’utilisateur de dire «oui» ou «non» à quelque chose.

<input type="checkbox"> Se souvenir de mon choix

Comme il peut être difficile de cliquer sur une petite case à cocher, il est recommandé de l’insérer dans un <label> – comprenant la case à cocher et de sa description.

<label>
  <input type="checkbox"> J'accepte les conditions<br>
</label>

Vous pouvez cliquer sur «J’accepte les conditions» pour activer la case à cocher.

Par défaut, une case à cocher n’est pas cochée. Vous pouvez le marquer comme vérifié en utilisant l’attribut simplement appelé vérifié.

Par défaut, une case à cocher n’est pas cochée. Vous pouvez le marquer comme vérifié en utilisant l’attribut checked – vérifié.

<label>
  <input type="checkbox" checked> Utiliser comme adresse de facturation
</label>

Boutons radio – Radio buttons

Vous pouvez présenter à l’utilisateur une liste d’options parmi lesquelles choisir à l’aide des boutons radio.

Pour que ce contrôle de formulaire fonctionne, votre code HTML doit regrouper une liste de boutons radio. Ceci est réalisé en utilisant la même valeur pour l’attribut name :

<label>Statut marital</label>
<label>
  <input type="radio" name="status">
  Célibataire
</label>
<label>
  <input type="radio" name="status">
  Marié(e)
</label>
<label>
  <input type="radio" name="status">
  Divorcé(e)
</label>
<label>
  <input type="radio" name="status">
  veuf(ve)
</label>

Étant donné que tous les boutons radio utilisent la même valeur pour leur attribut name (dans ce cas, la valeur "status"), la sélection d’une option désélectionne toutes les autres. Les boutons radio s’excluent mutuellement.

Différence entre les boutons radio et les cases à cocher – Radio buttons vs Checkboxes

Lorsqu’une case à cocher existe seule, les boutons radio ne peuvent apparaître que sous forme de liste (ce qui signifie que vous avez au moins 2 options).

De plus, il est facultatif de cocher une case, mais le choix d’un des boutons radio est obligatoire. C’est pourquoi il est impossible de décocher un bouton radio à moins de choisir une option de frère ou de sœur. Mais au final, l’un des boutons radio est toujours sélectionné.

Menus déroulants – Dropdown menus

Si le nombre d’options à utiliser prend trop de place, vous pouvez utiliser les menus déroulants <select>.

Ils fonctionnent comme des boutons radio. Seule leur mise en page est différente.

<select>
  <option>Janvier</option>
  <option>Février</option>
  <option>Mars</option>
  <option>Avril</option>
  <option>Mai</option>
  <option>Juin</option>
  <option>Juillet</option>
  <option>Août</option>
  <option>Septembre</option>
  <option>Octobre</option>
  <option>Novembre</option>
  <option>Décembre</option>
</select>

Menus déroulants à choix multiples – Multiple choice dropdown menus