Cours HTML / Organiser un formulaire avec fieldset, legend et autocomplete

Utilisez fieldset pour regrouper les contrôles de formulaire associés et legend pour indiquer la question du groupe. Pour des champs tels que le nom ou l'adresse e-mail d'une personne, un jeton autocomplete approprié peut indiquer au navigateur quelles informations le champ demande.

Groupez une question avec fieldset et legend

Les étiquettes radio individuelles décrivent les réponses, mais les utilisateurs ont également besoin de la question à laquelle ces réponses appartiennent. legend fournit ce nom de groupe. Comparez les entrées radio et case à cocher, y compris les contrôles non sélectionnés, dans Choisir les types de saisie pour les e-mails, les nombres, les dates et les choix.

<fieldset>
  <legend>Comment vous contacter ?</legend>
  <label><input type="radio" name="contact" value="email"> E-mail</label>
  <label><input type="radio" name="contact" value="phone"> Téléphone</label>
</fieldset>

Ouvrez l'exemple dans un navigateur : une bordure et une légende peuvent apparaître par défaut. Le CSS peut modifier cet affichage sans supprimer la relation. Les deux entrées radio partagent name="contact", donc choisir l'une efface l'autre. Utilisez un fieldset séparé pour une question distincte, et un nom de groupe radio différent ; sinon, sélectionner une réponse dans une question pourrait effacer une réponse dans une autre.

Décrivez l'objectif d'une entrée avec l'autocomplétion

<form action="/contact" method="post">
  <fieldset>
    <legend>Coordonnées</legend>
    <label for="full-name">Nom complet</label>
    <input id="full-name" name="full_name" autocomplete="name">
    <label for="email">Adresse e-mail</label>
    <input id="email" name="email" type="email" autocomplete="email">
  </fieldset>
  <button type="submit">Envoyer</button>
</form>

autocomplete="name" et autocomplete="email" décrivent les objectifs des champs. Ils ne définissent pas de valeur fixe ni ne soumettent d'informations au nom de l'utilisateur. La présence d'une suggestion dépend des paramètres du navigateur et des informations stockées. L'attribut name est la clé côté serveur ; le jeton autocomplete est un indice de l'utilisation prévue de l'entrée. /contact est un chemin illustratif et nécessite un gestionnaire côté serveur. Un objectif de remplissage automatique ne remplace pas l'association étiquette et ID décrite dans Associer correctement label et input.

Tester des groupes indépendants et des objectifs d'entrée

Enregistrez sous groups.html et sélectionnez E-mail et Matin. Les deux sélections devraient coexister car les groupes utilisent des valeurs de nom différentes.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Exercice sur les groupes</title>
</head>
<body>
  <h1>Répondre à deux questions indépendantes</h1>
  <form id="groups-form" method="get">
    <fieldset>
      <legend>Moyen de contact</legend>
      <label><input type="radio" name="contact" value="email" required> E-mail</label>
      <label><input type="radio" name="contact" value="phone"> Téléphone</label>
    </fieldset>
    <fieldset>
      <legend>Moment de la visite</legend>
      <label><input type="radio" name="visit" value="morning" required> Matin</label>
      <label><input type="radio" name="visit" value="afternoon"> Après-midi</label>
    </fieldset>
    <button type="submit">Examiner les deux réponses</button>
  </form>
</body>
</html>

Remplacez temporairement name="visit" par name="contact" sur les deux boutons radio du groupe de visite. Choisir une réponse efface alors celle de l’autre question : c’est le même name qui définit le groupe radio. Rétablissez name="visit" après la comparaison.

Choisissez un jeton correspondant aux informations demandées. autocomplete="postal-code" ne valide pas le format du code postal, et un navigateur sans informations enregistrées peut ne montrer aucune suggestion.

Vérifier le regroupement et le remplissage automatique

Ne mettez pas de questions sans rapport dans un même fieldset, et ne dispersez pas une question à choix unique sans nom de groupe. Utilisez les jetons autocomplete définis plutôt que des mots arbitraires. Testez deux groupes de boutons radio indépendants : si le choix d'une réponse dans le deuxième efface le premier, leurs valeurs name correspondent probablement par erreur. L'autoremplissage ne valide pas les informations de l'utilisateur, et les formulaires collectant des données personnelles nécessitent toujours des pratiques appropriées de sécurité et de confidentialité. Consultez la référence MDN autocomplete et la référence fieldset.