Comment structurer un formulaire HTML

  • Raccourci de la révision : HTML/Formulaires/Comment_structurer_un_formulaire_HTML
  • Titre de la révision : Comment structurer un formulaire HTML
  • ID de la révision : 387279
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire Update the title of another article (links)

Contenu de la révision

Lorsque vous concevez un formulaire HTML, les structurer de manière convenable est une étape importante pour deux raisons. Premièrement, cela garantit que votre formulaire sera utilisable et deuxièmement cela le rendra accessible (c'est-à-dire utilisable par des personnes ayant des capacités différentes). L'accessibilité des formulaires HTML est un point cléet nous allons voir ensemble comment rendre un formulaire accessible. Ce n'est pas difficile mais il y a un certain nombre d'astuces qu'il faut connaître.

Les formulaires HTML comptent parmis les structures les plus complexes en HTML à cause de leur flexibilité. En mélangeant les éléments et attributs dédiés aux formulaires vous pouvez construire n'importe quelle sorte de formulaire basique. Toutefois, il est bon de noter que certaines personnes considèrent les formulaires HTML simplistes et incohérents. Il est vrai qu'il existent des technologies permettant de créer des formulaires plus évolués comme XForms mais malheureusement certains navigateurs ne sont pas compatibles avec ce type de formulaires. À cause de cela, nous nous appuyons sur JavaScript pour améliorer les formulaires HTML. Dans cet article, nous allons vous présenter comment utiliser les éléments de formulaires HTML en détail. Si vous souhaitez en savoir plus à propos de la réalisation de blocs personnalisés, veuillez lire l'article Comment créer des blocs de formulaires personnalisés.

Structure globale

L'élément <form>

L'élément {{HTMLElement("form")}} est l'élément qui définit formellement un formulaire, et ces attributs définissent la manière dont il se comporte. Lorsque vous souhaitez créer un nouveau formulaire, vous devez commencer par utiliser cet élément. De nombreuses technologies d'assistance ou des plugins de navigateurs permettent de localiser les éléments {{HTMLElement("form")}} et peuvent ajouter des points d'attache (hooks) afin de les rendre plus facile à utiliser.

Note : il est strictement interdit d'insérer un formulaire dans un autre formulaire. Faire cela créé un comportement inconsistant dont le rendu final dépendra du navigateur utilisé.

L'élément {{HTMLElement("form")}} accepte les attributs suivants, qui sont tous optionnels :

Attributs de l'élément {{HTMLElement("form")}}
Nom de l'attribut Valeur par défaut Description
{{htmlattrxref("accept-charset","form")}} UNKNOWN Une liste d'encodages de caractères séparés par des espaces que le serveur accepte. La valeur par défaut est la chaîne spécifique UNKNOWN, et dans ce cas l'encodage correspond à l'encodage du document contenant l'élément form.
{{htmlattrxref("action","form")}}   L'URI d'une page web qui traite l'information soumise via le formulaire.
{{htmlattrxref("autocomplete","form")}} on Indique quels blocs dans ce formulaire peuvent avoir leur valeur par défaut complétée automatiquement par le navigateur. Cet attribut peut prendre deux valeurs : on ou off.
{{htmlattrxref("enctype","form")}} application/x-www-form-urlencoded Lorsque la valeur de l'attribut method est post, cet attribut est le type MIME du contenu qui est untilisé pour soumettre le formulaire au serveur. Les valeurs possibles sont :
  • application/x-www-form-urlencoded
  • multipart/form-data : utilisez cette valeur si vous utilisez un élément {{HTMLElement("input")}} avec l'attribut type ayant pour valeur file.
  • text/plain
{{htmlattrxref("method","form")}} get La méthode HTTP que le navigateur utilise pour soumettre le formulaire. Cet attribut peut prendre deux valeurs : get ou post.
{{htmlattrxref("name","form")}}   Le nom du formulaire. Il doit être unique parmis tous les formulaires dans un document et ne doit pas être une chaîne vide. Vous devriez habituellement utiliser l'attribut id.
{{htmlattrxref("novalidate","form")}} (false) Cet attribut booléen indique que le formulaire ne doit pas être validé lorsqu'il est soumis.
{{htmlattrxref("target","form")}} _self Un nom ou un mot-clé indiquant où la réponse reçue après avoir soumis le formulaire doit être affichée. Ceci peut être un {{HTMLElement("iframe")}}, un onglet ou une fenêtre par exemple. Les mots-clés disponibles comme valeurs possibles de cet attribut sont :
  • _self : charge la réponse dans le même contexte de navigation ({{HTMLElement("iframe")}}, onglet, fenêtre, etc.) que le contexte actuel.
  • _blank : charge la réponse dans un nouveau contexte de navigation.
  • _parent : charge la réponse dans le contexte de navigation HTML5 parent du contexte actuel. S'il n'y a pas de parent, cette option se comporte de manière identique à _self.
  • _top : charge la réponse dans le contexte de navigation ayant le plus haut niveau (c'est-à-dire, le contexte de navigation qui est un ancêtre du contexte actuel et qui n'a pas de parent). S'il aucun parent existe, cette option se comporte de manière identique à _self.

Veuillez noter qu'il est toujours possible d'utiliser un bloc de formulaire en-dehors d'un élément {{HTMLElement("form")}} mais si vous faites cela, ce bloc n'aura aucun lien avec un quelconque formulaire. Il peut être pratique d'utiliser de tels blocs en-dehors d'un formulaire mais cela signifie que vous devez avoir un plan spécifique pour ces blocs, puisqu'ils ne seront d'aucune utilité utilisés indépendamment. Vous devrez personnaliser leur comportement à l'aide de JavaScript.

D'un point de vue technique, HTML5 introduit l'attribut form pour les éléments HTML form. Ceci vous permet de lier explicitement un élément avec un formulaire même s'il n'est pas contenu dans un élément {{ HTMLElement("form") }}. Malheureusement, à l'heure actuelle l'implémentation de cette fonctionnalité n'est pas assez constante entre les différents navigateurs pour pouvoir l'utiliser.

Les éléments <fieldset> et <legend>

L'élément {{HTMLElement("fieldset")}} est pratique pour créer des groupes de blocs qui partagent un objectif commun. Un élément {{HTMLElement("fieldset")}} peut être étiquetté avec un élément {{HTMLElement("legend")}}. L'élément {{HTMLElement("legend")}} décrit formellement le but de l'élément {{HTMLElement("fieldset")}}. De nombreuses technologies d'assistance utiliseront l'élément {{HTMLElement("legend")}} comme s'il était une partie intégrante de chacun des blocs à l'intérieur de l'élément {{HTMLElement("fieldset")}} correspondant. Par exemple, certains lecteurs d'écrans tels que Jaws ou NVDA prononceront le contenu de l'élément legend avant de prononcer le contenu de l'élément labelde chaque bloc.

Voici un court exemple :

<form>
  <fieldset>
    <legend>Taille de la boisson</legend>
    <p>
      <input type="radio" name="taille" id="taille_1" value="petite" />
      <label for="taille_1">Petite</label>
    </p>
    <p>
      <input type="radio" name="taille" id="taile_2" value="moyenne" />
      <label for="taille_2">Moyenne</label>
    </p>
    <p>
      <input type="radio" name="taille" id="taille_3" value="grande" />
      <label for="taille_3">Grande</label>
    </p>
  </fieldset>
</form>

Dans cet exemple, le lecteur d'écran prononcera « Taille de la boisson petite » pour le premier bloc, « Taille de la boisson moyenne » pour le second et « Taille de la boisson grande » pour le troisième.

La cas d'usage de cet exemple est l'un des plus important. À chaque fois que vous avez un ensemble de boutons radio, vous devez vous assurez qu'ils sont emboîtés dans un élément {{HTMLElement("fieldset")}}. D'autres cas d'usage existent, et de manière générale l'élément {{HTMLElement("fieldset")}} peut aussi être utilisé pour créer des sections un formulaire. À cause de son influence sur les technologies d'assistance, l'élément {{HTMLElement("fieldset")}} est l'un des éléments clés pour créer des formulaires accessibles. Toutefois, il est de votre responsabilité de ne pas en abuser. Si possible, à chaque fois que vous souhaitez créer un formulaire, essayez d'écouter comment un lecteur d'écran l'interprète. Si cela sonne faux, c'est un bon indice pour vous dire que la structure de votre formulaire à besoin d'être améliorée.

L'élément {{HTMLElement("fieldset")}} accepte les attributs spécifiques suivants :

Attributs de l'élément {{HTMLElement("fieldset")}}
Nom de l'attribut Valeur par défaut Description
{{htmlattrxref("disabled","fieldset")}} (false) Si cet attribut booléen est défini, les contrôles de ce formulaires qui sont des descendants (autres que les descendants que son premier élément optionnel {{ HTMLElement("legend") }}) sont désactivés et ne peuvent pas être édités. Ils ne recevront aucun évènement de navigation, comme les clics de souris ou ceux liés au focus. Bien souvent, de tels contrôles apparaissent grisés par les navigateurs.

L'élément <label>

L'élément {{HTMLElement("label")}} est une manière formelle de définir une étiquette pour un bloc de formulaire HTML. C'est l'élément le plus important pour créer des formulaires accessibles.

L'élément {{HTMLElement("label")}} accepte les attributs suivants :

Attributs de l'élément {{HTMLElement("label")}}
Nom de l'attribut Valeur par défaut Description
{{htmlattrxref("for","label")}}   L'ID d'un bloc pouvant recevoir une étiquette dans le même document que l'élément {{HTMLElement("label")}}. Le premier élément de la sorte dans le document avec un ID qui correspond à la valeur de l'attribut for est le bloc recevant l'étiquette définie par cet élément label.

Un élément {{HTMLElement("label")}} est lié à son bloc par l'attribut for. L'attribut for fait en fait référence à l'attribut id de l'élément correspondant. Un bloc peut être emboîté dans son élément {{HTMLElement("label")}} mais même dans ce cas, donner une valeur à l'attribut for est une bonne pratique car certaines technologies d'assistance ne comprennent pas implicitement la relation entre les étiquettes et les blocs.

Veuillez noter que sans prendre en considération les technologies d'assistance, définir formellement une étiquette pour un bloc donné permet à l'utilisateur de cliquer sur l'étiquette pour activer le bloc correspondant dans leur navigateur. Ceci est particulièrement pratique pour les cases à cocher et les boutons radio.

<form>
  <p>
    <input type="checkbox" id="goût_1" name="goût_cerise" value="1">
    <label for="goût_1">J'aime la cerise</label>
  </p>
  <p>
    <label for="goût_2">
      <input type="checkbox" id="goût_2" name="goût_banane" value="1">
      J'aime la banane
    </label>
  </p>
</form>

Certaines technologies d'assistance peuvent rencontrer des problèmes pour manipuler les étiquttes multiples pour un bloc unique. À cause de celà, il est conseiller d'emboîter un bloc dans l'élément correspondant pour créer un formulaire accessible.

Considérons cet exemple :

<form>
  <p>Les champs obligatoires sont suivis par <strong><abbr title="obligatoire">*</abbr></strong>.</p>
 
  <p>
    <label for="nom">
      <span>Nom : </span>
      <input type="text" id="nom" name="nomdutilisateur" required />
      <strong><abbr title="obligatoire">*</abbr></strong>
    </label>
  </p>
 
  <p>
    <label for="naissance">
      <span>Date de naissance :</span>
      <input type="text" id="naissance" name="datedenaissance" maxlength="10" /> <em>formatté selon jj/mm/aaaa</em>
    </label>
  </p>
</form>

Dans cet exemple, le premier paragraphe définit la règle pour les éléments obligatoires. Elle doit être mentionnée au début pour que les technologies d'assistance telles que les lecteurs d'écrans l'affichent ou l'énoncent avant que l'utilisateur ne rencontre un élément obligatoire. De cette manière, il sait ce qu'il doit faire.

le premier champ est obligatoire donc son élément label précise à la fois l'attribut name et le fait qu'il soit nécéssaire à l'aide de l'attribut required. De cette manière, un lecteur d'écran énoncera l'étiquette de la manière suivante : « Nom astérisque » ou « Nom obligatoire » (ceci dépend du réglage du lecteur d'écran mais cela est toujours cohérent avec ce qui est énoncé à la lecture de la première ligne). Si vous utilisez deux étiquettes, il n'y a aucune garantie que l'utilisateur soit informé du fait que cet élément est obligatoire.

Le second élément du formulaire fonctionne de manière similaire. En utilisant cette technique, vous vous assurez qu'il sera dit à l'utilisateur comment formatter la date.

L'élément <output>

Cet élément est utilisé pour stocker le résultat d'un calcul. Il définit formellement une relation entre les champs utilisés pour obtenir les données nécessaires au calcul et un élément qui doit être utilisé pour afficher le résultat. Il est aussi considéré comme une région interactive par certaine technologies d'assistance (ce qui signifie que lorsque le contenu de l'élément {{HTMLElement("output")}} est modifié, la technologie d'assistance est consciente de cette modification et y réagit).

L'élément {{HTMLElement("output")}} accpete les attributs suivants :

Attributs pour l'élément {{HTMLElement("output")}}
Nom de l'attribut Valeur par défaut Description
{{htmlattrxref("for","output")}}   Une liste d'ID d'autres éléments séparés par des espaces, indiquant que ces élément contribuent aux valeurs d'entrée du calcul (ou affecte d'une quelconque manière)

Structures HTML usuelles pour les formulaires

Au-delà des structures spécifiques aux formulaires HTML, il est bon de garder à l'esprit que ces formulaires ne sont que du HTML. Ceci signifie que vous pouvez utiliser toute la puissance de HTML pour structurer un formulaire HTML.

Comme vous pouvez le voir dans les exemples, il est habituel d'englober le label et son bloc dans un élément {{HTMLElement("p")}} ou {{HTMLElement("div")}}.

En plus de l'élément {{HTMLElement("fieldset")}}, c'est une bonne pratique d'utiliser également les titres et sections HTML afin de structurer un formulaire complexe.

Les listes HTML sont souvent utilisées lorsque des cases à cocher et des boutons radio sont utilisés.

Voici un exemple d'un formulaire de paiement simple :

<form>
  <h1>Formulaire de paiement</h1>
  <p>Les champs obligatoires sont suivis d'un <strong><abbr title="obligatoire">*</abbr></strong>.</p>
 
  <section>
    <h2>Information de contact</h2>
    
    <fieldset>
      <legend>Titre</legend>
      <ul>
        <li>
          <label for="titre_1">
            <input type="radio" id="titre_1" name="title" value="M." />
            Monsieur
          </label>
        </li>
        <li>
          <label for="titre_2">
            <input type="radio" id="titre_2" name="title" value="Mme" />
            Madame
          </label>
        </li>
      </ul>
    </fieldset>
    
    <p>
      <label for="nom">
        <span>Nom : </span>
        <input type="text" id="nom" name="nomdutilisateur" required />
        <strong><abbr title="obligatoire">*</abbr></strong>
      </label>
    </p>
    
     <p>
      <label for="courriel">
        <span>Courriel : </span>
        <input type="email" id="courriel" name="courrielutilisateur" required />
        <strong><abbr title="obligatoire">*</abbr></strong>
      </label>
    </p>
  </section>
 
  <section>
    <h2>Information de paiement</h2>
    
    <p>
      <label for="carte">
        <span>Type de carte :</span>
        <select id="carte" name="carteutilisateur">
          <option value="visa">Visa</option>
          <option value="mc">Mastercard</option>
          <option value="amex">American Express</option>
        </select>
      </label>
    </p>
    <p>
      <label for="numero">
        <span>Numéro de la carte :</span>
        <input type="text" id="numero" name="numerocarte" required />
        <strong><abbr title="obligatoire">*</abbr></strong>
      </label>
    </p>
    <p>
      <label for="date">
        <span>Date d'expiration :</span>
        <input type="text" id="date" name="expiration" required />
        <strong><abbr title="obligatoire">*</abbr></strong>
        <em>formatté comme mm/aa</em>
      </label>
    </p>
  </section>
 
  <section>
    <p>
      <button>Valider le paiement</button>
    </p>
  </section>
</form>

Voyez ce formulaire en action (avec une touche de CSS) :

Exemple interactif
{{EmbedDistLiveSample("/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/Exemple","Un_formulaire_de_paiement",460,600)}}
Regardez le code source

Blocs HTML

Lorsque vous créez un formulaire, vous avez besoin d'utiliser certains blocs pour collecter les données auprès des utilisateurs. Dans cet article nous allons voir comment afficher ces blocs. Si vous souhaitez en apprendre plus sur la manière dont ces blocs fonctionnent, cela est détaillé dans l'article : Les blocs de formulaires natifs.

L'élément <input>

Cet élément est un peu particulier car il peut presque tout faire. En modifiant son attribut type, il peut changer radicalement. Pour simplifier les choses, la valeur de l'attribut type peut être triés dans quatre catégories : les champs textuels monoligne, les contrôles sans texte, les contrôles de date de d'horaire et les boutons. À cause de ce polymorphisme, l'élément {{HTMLElement("input")}} accepte de nombreux attributs mais il peut être difficile de savoir lesquels sont pertinents et lesquels sont obligatoires car ils dépendent de la valeur de l'attribut type.

Tout ceci est résumé dans le tableau suivant (pour une liste exhaustive de tous les attributs, visitez la page de l'élément {{HTMLElement("input")}}) :

Valeur de l'attribut type Description Attributs obligatoires Attributs pertinents
Champs textuels monolignes
text Ceci est le champ textuel le plus simple. La valeur text de l'attribut type est la valeur par défaut de cet attribut. Aucune validation automatique n'est réalisée.   {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}, {{htmlattrxref("spellcheck","input")}}
email Un champ pour éditer une ou plusieurs adresses électroniques.   {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("multiple","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
password La valeur de ce champ textuel est brouillée.   {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
search Un champ pour entrer les éléments d'une recherche.   {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("autosave","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}, {{htmlattrxref("spellcheck","input")}}
tel Un champ pour éditer un numéro de téléphone.   {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
url Un champ pour éditer une URL absolue.   {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
Contrôles sans champs textuels
checkbox Une case à cocher.   {{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}
color Un contrôle pour définir une couleur.   {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("required","input")}}
file Un contrôle permettant à l'utilisateur de sélectionner un fichier.   {{htmlattrxref("accept","input")}}, {{htmlattrxref("multiple","input")}}, {{htmlattrxref("required","input")}}
hidden Un contrôle qui n'est pas affiché, mais dont les valeurs sont envoyées au serveur.    
number Un contrôele permettant de saisir un chiffre en virgule flottante.   {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}
radio Un bouton radio. Seul un seul de ces boutons peut être sélectionné dans chaque groupe.   {{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}
range Un contrôle permettant de saisir un nombre dont la valeur exacte n'est pas importante.   {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}
Contrôles de date de d'horaire
date Un contrôle pour saisir une date (année, mois et jour, sans heure).   {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
datetime Un contrôle pour saisir une date et une heure (heure, minute, seconde et fraction de seconde) basée sur le fuseau horaire UTC.   {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
datetime-local Un contrôle pour saisir une date et une heure, sans fuseau horaire.   {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
month Un contrôle pour saisir un mois et une années, sans fuseau horaire.   {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
time Un contrôle pour saisir un horaire, sans fuseau horaire.   {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
week Un contrôle pour choisir une date consistant en une semaine de l'année et l'année correspondante, sans fuseau horaire.   {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
Boutons
button Un bouton à presser sans comportement par défaut.   {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
image Un bouton graphique. {{htmlattrxref("src","input")}}, {{htmlattrxref("alt","input")}} {{htmlattrxref("width","input")}}, {{htmlattrxref("height","input")}}, {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
reset Un bouton qui réinitialise le contenu du formulaire à ses valeurs par défaut.   {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
submit Un bouton qui soumet le formulaire.   {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}

Si pour une quelconque raison, la valeur de l'attribut type n'est pas supportée par le navigateur, l'élément {{HTMLElement("input")}} est affiché comme si la valeur text était définie. Ceci permet au formulaire de fonctionner, mais cela n'est peut être pas la méthode la plus attractive.

Bien que l'élement {{HTMLElement("input")}} soit un outil puissant, il ne peut pas tout réaliser et d'autres éléments existent pour couvrir ces cas.

L'élément <textarea>

Cet élément est dédié aux champs textuels multilignes. Il fonctionne exatctement de la même manière que les champs monolignes sauf qu'il accepte les retours chariots saisis par l'utilisateur. Il accepte également quelques attributs supplémentaires pour la gestion de l'affichage sur plusieurs lignes :

Attributs de l'élément {{HTMLElement("textarea")}}
Nom de l'attribut Valeur par défaut Description
{{htmlattrxref("cols","textarea")}} 20 La largeur visible du champ, exprimé en largeur moyenne de caractères.
{{htmlattrxref("rows","textarea")}}   Le nombre de lignes visibles dans le champ.
{{htmlattrxref("wrap","textarea")}} soft Indique comment le débordement du texte est géré. Les valeurs possibles sont : hard ou soft

Veuillez noter que l'élément {{HTMLElement("textarea")}} fonctionne d'une manière légèrement différente de l'élément {{HTMLElement("input")}}. L'élément {{HTMLElement("input")}} est auto-fermant, ce qui signifie qu'il ne peut contenir aucun élément enfant. Au contraire, l'élément {{HTMLElement("textarea")}} est un élément régulier et peut contenir des éléments textuels enfants.

Ceci a deux effets :

  • Si vous souhaitez définir une valeur par défaut pour un élément {{HTMLElement("input")}}, vous devez utiliser l'attribut value, mais pour un élément {{HTMLElement("textarea")}}, vous devez définir la valeur par défaut entre la balise ouvrante et la balise fermante de l'élément {{HTMLElement("textarea")}}.
  • À cause de sa nature, l'élément {{HTMLElement("textarea")}} n'accepte que du contenu textuel. Ceci signifie que tout contenu HTML entré dans un élément {{HTMLElement("textarea")}} est considéré comme du texte simple.

Dans l'exemple suivant, les éléments {{HTMLElement("textarea")}} s'afficheront de la même manière :

<form>
  <p>
    <label for="texte_1">Avec du HTML normal</label><br>
    <textarea id="texte_1" name="normal"><p>Je suis un paragraphe</p></textarea>
  </p>
  <p>
    <label for="texte_2">Avec du HTML échappé</label><br>
    <textarea id="texte_2" name="echape">&lt;p&gt;Je suis un paragraphe&lt;/p&gt;</textarea>
  </p>
  <p>
    <button>Envoyez-moi</button>
  </p>
</form>

Les éléments <select>, <option> et <optgroup>

L'élément {{HTMLElement("select")}} vous permet de construire des boîtes de sélection (parfois appelées combo boxes). Une boîte de sélection est un bloc qui permet à l'utilisateur de choisir une ou plusieurs valeurs prédéfinies. La différence entre une boîte de sélection unique et une boîte de sélection multiple sera présenté en détails dans l'article : Les blocs de formulaires natifs.

Chaque valeur dans une boîte de sélection est définie grâce à un élément {{HTMLElement("option")}} et ces éléments peuvent être regroupés dans des éléments {{HTMLElement("option")}}.

Prenons cet exemple :

<form>
  <p>
    <label for="monFruit">Choisissez un fruit</label>
    <select id="monFruit" name="fruit">
      <!-- Ici il y a une astuce, vous pensez choisir une banane
         mais en réalité vous sélectionnez une orange >:-) -->
      <option value="orange">Banane</option>
      <option>Cerise</option>
      <optgroup label="baies">
        <option>Bleuet</option>
        <option>Framboise</option>
        <option>Fraise</option>
      </optgroup>
    </select>
  </p>
</form>

Si l'attribut value est définit pour l'élément {{HTMLElement("option")}}, cet attribut est la valeur qui sera envoyé au serveur. Si l'attribut value n'est pas définit, le contenu de l'élément {{HTMLElement("option")}} est utilisé comme valeur de la boîte de sélection.

Pour l'élément {{HTMLElement("optgroup")}}, l'attribut label est affiché avant les valeurs, mais bien qu'il ressemble à une option, ce n'est pas possible de le sélectionner.

Attributs pour l'élément {{HTMLElement("option")}}
Nom de l'attribut Valeur par défaut Description
{{htmlattrxref("label","option")}}   Cet attribut est l'étiquette qui décrit l'option. Si l'attribut label n'est pas définit, sa valeur est le contenu textuel de l'élément.
{{htmlattrxref("selected","option")}} (false) S'il est présent, cet attribut booléen indique que l'option est sélectionnée par défaut.
Attributs pour l'élément {{HTMLElement("optgroup")}}
Nom de l'attribut Valeur par défaut Description
{{htmlattrxref("label","optgroup")}}   Le nom du groupe d'options. Cet attribut est obligatoire.

L'élément <datalist>

Cet élément élargit les capacités des blocs existants en permettant de prédéfinir des valeurs pour des blocs données. Le cas d'utilisation le plus commun pour cet élément est une liste d'autocomplétion pour des champs textuels. Les valeurs possibles sont définies par des éléments {{HTMLElement("option")}} dans l'élément {{HTMLElement("datalist")}}.

Pour lier un bloc avec un élément {{HTMLElement("datalist")}}, vous devez utiliser l'attribut list sur le bloc ciblé. Ceci défini l'attribut id de l'élément {{HTMLElement("datalist")}} à utiliser pour ce bloc.

L'élément {{HTMLElement("datalist")}} est un ajout récent aux formulaires HTML, il existe donc encore des navigateurs qui ne sont pas compatibles avec celui-ci. Pour parer à cela, voici une astuce pour une solution de repli pour ces navigateurs :

<form>
  <p>
    <label for="MonFruit">Quel est votre fruit préféré ?</label>
    <input type="text" id="monFruit" name="fruit" list="listeDeFruits" />
    
    <datalist id="listeDeFruits">
      <label for="suggestion">ou choisissez un fruit</label>
      <select id="suggestion" name="altFruit">
        <option value="banane">Banane</option>
        <option value="cerise">Cerise</option>
        <option value="fraise">Fraise</option>
      </select>
    </datalist>
  </p>
</form>

D'un côté, les navigateurs qui sont compatibles avec l'élément {{HTMLElement("datalist")}} ignoreront tous les éléments qui ne sont pas des éléments {{HTMLElement("option")}} et cela fonctionnera comme prévu. De l'autre côté, les navigateurs qui ne sont pas compatibles avec l'élément {{HTMLElement("datalist")}} afficheront l'étiquette et la boîte de sélection. Bien sûr, il existe d'autres méthodes pour parer au manque de compatibilité de l'élément {{HTMLElement("datalist")}}, mais elles nécessitent d'avoir recours à JavaScript ce qui n'est pas toujours une bonne option.

Safari 6 Screenshot of the datalist element fallback with Safari on Mac OS
Firefox 18 Screenshot of the datalist element with Firefox on Mac OS

Les éléments <meter> et <progress>

Ces deux éléments permettent de représenter graphiquement une donnée numérique donnée. La différence entre les deux est principalement sémantique :

  • L'élément {{HTMLElement("meter")}} représente une valeur statique et sa position relative entre une valeur minimum et une valeur maximum.
  • L'élément {{HTMLElement("progress")}} représente une valeur dynamique dans le temps et variant entre une valeur minimum et une valeur maximum. Il est à noter qu'une valeur dynamique (et donc par-là même l'indicateur de progression) doivent être réalisés à l'aide de JavaScript. L'élément lui-même n'a pas de mécanisme pour le faire de manière autonome.

À cause de leur nature, ces éléments acceptent un ensemble particulier d'attributs :

Attributs de l'élément {{HTMLElement("meter")}}
Nom de l'attribut Valeur par défaut Description
{{htmlattrxref("min","meter")}} 0 La limite numérique inférieure de la gamme mesurée.
{{htmlattrxref("max","meter")}} 1 La valeur numérique supérieur de la gamme mesurée.
{{htmlattrxref("low","meter")}} the min value La valeur numérique supérieure du bas de la gamme mesurée.
{{htmlattrxref("high","meter")}} the max value La valeur numérique basse du haut de la gamme mesurée.
{{htmlattrxref("optimum","meter")}}   La valeur numérique optimale.
Attributs de l'élément {{HTMLElement("progress")}}
Nom de l'attribut Valeur par défaut Description
{{htmlattrxref("max","progress")}}   Cet attribut décrit la quantité de travail que l'élément {{HTMLElement("progress")}} avant qu'il soit terminé.

L'élément <button>

Un élément {{HTMLElement("button")}} est la manière la plus simple de créer un bouton pour un formulaire. Un bouton peut être de l'un des trois types, selon la valeur de l'attribut type :

  • Un bouton d'envoi permet d'envoyer les données d'un formulaire à la page web définie par l'attribut action de l'élément {{HTMLElement("form")}}.
  • Un bouton de remise à zéro permet de redéfinir instantanément les valeurs des blocs d'un formulaire à leurs valeurs par défaut. D'un point de vue de l'expérience utilisateur, l'utilisation de ces boutons est considéré comme une mauvaise pratique et doit être évitée. Ce bouton facilite dangereusement la perte de données involontaire.
  • Un bouton anonyme n'a pas de sens inhérent, ils faut utiliser JavaScript pour lui donner une fonction.
Attributs de l'élément {{HTMLElement("button")}}
Nom de l'attribut Valeurs par défaut Description
{{htmlattrxref("type","button")}} submit Le type du bouton. Les valeurs possibles sont : button, reset ou submit
{{htmlattrxref("formaction","button")}}   Si le bouton est un bouton d'envoi, la valeur de cet attribut remplace la valeur de l'attribut action de l'élément {{HTMLElement("form")}}.
{{htmlattrxref("formenctype","button")}}   Si le bouton est un bouton d'envoi, la valeur de cet attribut remplace ma valeur de l'attribut enctype de l'élément {{HTMLElement("form")}}.
{{htmlattrxref("formmethod","button")}}   Si le bouton est un bouton d'envoi, la valeur de cet attribut remplace la valeur de l'attribut method de l'élément {{HTMLElement("form")}}.
{{htmlattrxref("formnovalidate","button")}}   Si le bouton est un bouton d'envoi, la valeur de cet attribut remplace la valeur de l'attribut novalidate de l'élément {{HTMLElement("form")}}.
{{htmlattrxref("formtarget","button")}}   Si le bouton est un bouton d'envoi, la valeur de cet attribut remplace la valeur de l'attribut target de l'élément {{HTMLElement("form")}}.

D'un point de vue technique, il n'y a presque aucune différence entre un bouton défini grâce à l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. La seule différence notable est l'étiquette du bouton lui-même. Dans un élément {{HTMLElement("input")}}, l'étiquette peut seulement contenir des caractères, alors que dans un élément {{HTMLElement("button")}}, l'étiquette peut contenur du HTML, et sont apparence peut donc être modifiée comme du HTML.

Note : pour des raisons historiques, l'élément {{HTMLElement("button")}} n'a jamais été très utilisé et dans de nombreux formulaires, les développeurs préfèrent créer des boutons avec l'élément {{HTMLElement("input")}}. Ceci est dû à un bogue dans d'anciennes version de Internet Explorer (IE). Dans IE6 et IE7, si vous ajouter un attribut name et un attribut value à un élément {{HTMLElement("button")}}, ils n'enverront pas le contenu de l'attribut value mais la valeur brute du bouton à la place. Ceci à été corrigé depuis IE8, il n'y a donc plus de raison d'éviter l'utilisation de l'élément {{HTMLElement("button")}}.

Attributs communs

La plupart des éléments utilisés pour définir des blocs de formulaires ont leurs propres attributs. Toutefois, un certain nombre d'attributs est commun à tous ces éléments vous donnant un certain degré de contrôle sur ces blocs. Voici une liste de ces atributs communs :

Nom de l'attribut Valeur par défaut Description
autofocus (false) Cet attribut booléen vous permet de définir si un élément doit avoir le focus lorsque la page est chargée. Un seul des élément associés à un formulaire peut avoir cet attribut défini par document.
disabled (false) Cet attribut booléen indique qu'un utilisateur ne peut pas intéragir avec cet élément. Si l'attribut n'est pas défini, l'élément hérite de la valeur de son conteneur, {{HTMLElement("fieldset")}} par exemple. Si aucun conteneur n'a l'attribut disabled définit, alors l'élément est actif.
form   L'élément form associé au bloc en question. La valeur de cet attribut doit être la valeur de l'attribut id de l'élément {{HTMLElement("form")}} dans le même document. En théorie, cela permet de définir un bloc de formulaire à l'extérieur d'un élément {{HTMLElement("form")}}. En pratique, aucun navigateur n'est compatible avec cette fonction à l'heure actuelle.
name   Le nom de l'élément. Ceci est soumit avec les données du formulaire.
value   La valeur initiale de l'élément.

Utiliser ARIA pour structurer les formulaires HTML

ARIA est une Candidate Recommendation du W3C qui améliore l'accessibilité du HTML pour les applications Internet riches, incluant les formulaires. Nous allons utiliser son utilisation en détails dans l'article « Comment créer des blocs de formulaires personnalisés », mais il y a quelques connaissances de base à acquérir auparavant.

Avant d'aller plus loin, il faut remarquer que la compatibilité des différents navigateurs avec ARIA et les technologies d'assistance est loin d'être parfait, mais elle s'améliore. Pour mieux comprendre, lorsqu'un navigateur rencontre un attribut ARIA, il doit envoyer des informations aux couches d'accessiblité du système d'opération. Tous les navigateurs ne font pas cela convenablement sur différentes plateformes. Les technologies d'assistance, de leur côté, doivent se connecter aux couches d'accessibilité du système d'exploitation pour gérer les informations qui proviennent des navigateurs. Étonnament, toutes les technologies d'assistance ne le font pas très bien. Donc utiliser ARIA ne signifie pas que votre application web sera accessible, mais cela signifie que vous avez fait de votre mieux dans cette direction. Malheureusement, à l'heure actuelle, ARIA reste une technologie d'amélioration supplémentaire, mais c'est toujours mieux que de ne rien faire.

Si vous souhaitez vous intéresser à l'utilisation de ARIA pour les formulaires HTML, vous pouvez lire la section dédiée dans la documentaiton ARIA.

L'attribut aria-labelledby

Cet attribut est une manière pratique de définir une étiquette sans utiliser l'élément {{HTMLElement("label")}}. Cet attribut est définit sur le bloc concerné et fait référence à l'attribut id de l'élément et l'utiliser comment étiquette.

<form>
  <p id="etiquetteFruit">Quel est votre fruit préféré</p>
  <p>
    <input type="text" name="fruit" aria-labelledby="etiquetteFruit">
  </p>
</form>

D'un point de vue conceptuel, c'est l'opposé de l'attribut for pour l'élément {{HTMLElement("label")}}. Avec l'attribut for, vous faites référence à l'id du bloc mais avec l'attribut aria-labbeldby, vous faites référence à l'id de l'étiquette.

L'attribut aria-describedby

Cet attribut fonctionne comme l'attribut aria-labelledby. La différence est princiapelement sémantique. Une étiquette définie l'essence d'un objet, alors que la description donne plus d'informations dont l'utilisateur pourait avoir besoin. Cet attribut n'est pas conseillé pour les éléments de formulaires, vous devriez utiliser l'attribut aria-labelledby, sauf si vous souhaitez donner une information complète sur l'élément concerné. Il doit être utilisé pour donner une description plus longue.

L'attribut aria-label

Cet attribut est utilisé lorsqu'aucune étiquette spécifique n'existe dans le DOM par rapport à un certain bloc. Cela vous permet d'envoyer un bloc aux technologies d'assistance sans créer de nœud dans le DOM pour celui-ci.

<form>
  <p>
    <input type="search" name="q" aria-label="Recherche" />
    <input type="submit" value="Envoyer" />
  </p>
</form>

L'attribut role

Ceci est l'attribut ARIA le plus important. Il vous permet de définir de l'information sémantique, compréhensible par les technologies d'assistance, pour un élément HTML donné. De nombreux rôles existent et certains sont dédiés aux blocs de formulaires.

ARIA essaye de mettre à disposition une sémantique qui n'existe actuellement pas dans HTML pour les blocs ainsi que pour les éléments qui existent déjà. Nous allons voir en détail comment utiliser ces rôles dans l'article : Comment créer des blocs de formulaires personnalisés.

Les rôles pour les formulaires sont :

Il faut noter l'existence de quelque chose appelé les rôles composites (composite roles) :

Si ces rôles sont extrêment utiles, sachez qu'il en existe plus. ARIA est une specification très vaste. Vous plonger dedans peut vous aider à améliorer l'accessibilité bien au-delà du domaine des formulaires HTML.

Conclusion

Vous avez désormais toutes les connaissances pour structurer vos formulaires HTML de manière convenable. L'article suivant s'intéresse aux détails d'implémentation et aux attentes fonctionnelles : Les blocs de formulaires natifs.

Voir également

Source de la révision

<p>Lorsque vous concevez un <a href="/fr/docs/HTML/Formulaires" title="/en-US/docs/HTML/Forms">formulaire HTML</a>, les structurer de manière convenable est une étape importante pour deux raisons. Premièrement, cela garantit que votre formulaire sera utilisable et deuxièmement cela le rendra accessible (c'est-à-dire utilisable par des personnes ayant des capacités différentes). L'<a href="/fr/docs/Accessibilité" title="/fr/docs/Accessibilité">accessibilité</a> des formulaires HTML est un point cléet nous allons voir ensemble comment rendre un formulaire accessible. Ce n'est pas difficile mais il y a un certain nombre d'astuces qu'il faut connaître.</p>
<p>Les formulaires HTML comptent parmis les structures les plus complexes en <a href="/fr/docs/HTML" title="/en-US/docs/HTML">HTML</a> à cause de leur flexibilité. En mélangeant les éléments et attributs dédiés aux formulaires vous pouvez construire n'importe quelle sorte de formulaire basique. Toutefois, il est bon de noter que certaines personnes considèrent les formulaires HTML simplistes et incohérents. Il est vrai qu'il existent des technologies permettant de créer des formulaires plus évolués comme <a href="/fr/docs/XForms" title="/en-US/docs/XForms">XForms</a> mais malheureusement certains navigateurs ne sont pas compatibles avec ce type de formulaires. À cause de cela, nous nous appuyons sur JavaScript pour améliorer les formulaires HTML. Dans cet article, nous allons vous présenter comment utiliser les éléments de formulaires HTML en détail. Si vous souhaitez en savoir plus à propos de la réalisation de blocs personnalisés, veuillez lire l'article <a href="/fr/docs/HTML/Formulaires/Comment_créer_des_blocs_de_formulaires_personnalisés" title="/fr/docs/HTML/Formulaires/Comment_créer_des_blocs_de_formulaires_personnalisés">Comment créer des blocs de formulaires personnalisés</a>.</p>
<h2 id="Structure_globale">Structure globale</h2>
<h3 id="L'.C3.A9l.C3.A9ment_&lt;form&gt;">L'élément &lt;form&gt;</h3>
<p>L'élément {{HTMLElement("form")}} est l'élément qui définit formellement un formulaire, et ces attributs définissent la manière dont il se comporte. Lorsque vous souhaitez créer un nouveau formulaire, vous devez commencer par utiliser cet élément. De nombreuses technologies d'assistance ou des plugins de navigateurs permettent de localiser les éléments {{HTMLElement("form")}} et peuvent ajouter des points d'attache (hooks) afin de les rendre plus facile à utiliser.</p>
<div class="note">
  <strong>Note :</strong> il est strictement interdit d'insérer un formulaire dans un autre formulaire. Faire cela créé un comportement inconsistant dont le rendu final dépendra du navigateur utilisé.</div>
<p>L'élément {{HTMLElement("form")}} accepte les attributs suivants, qui sont tous optionnels :</p>
<table>
  <caption>
    Attributs de l'élément {{HTMLElement("form")}}</caption>
  <thead>
    <tr>
      <th scope="col">Nom de l'attribut</th>
      <th scope="col">Valeur par défaut</th>
      <th scope="col">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="white-space: nowrap;">{{htmlattrxref("accept-charset","form")}}</td>
      <td><code>UNKNOWN</code></td>
      <td>Une liste d'encodages de caractères séparés par des espaces que le serveur accepte. La valeur par défaut est la chaîne spécifique <code>UNKNOWN</code>, et dans ce cas l'encodage correspond à l'encodage du document contenant l'élément <code>form</code>.</td>
    </tr>
    <tr>
      <td>{{htmlattrxref("action","form")}}</td>
      <td>&nbsp;</td>
      <td>L'URI d'une page web qui traite l'information soumise via le formulaire.</td>
    </tr>
    <tr>
      <td>{{htmlattrxref("autocomplete","form")}}</td>
      <td><code>on</code></td>
      <td>Indique quels blocs dans ce formulaire peuvent avoir leur valeur par défaut complétée automatiquement par le navigateur. Cet attribut peut prendre deux valeurs : <code>on</code> ou <code>off</code>.</td>
    </tr>
    <tr>
      <td>{{htmlattrxref("enctype","form")}}</td>
      <td><code>application/x-www-form-urlencoded</code></td>
      <td>Lorsque la valeur de l'attribut <code>method</code> est <code>post</code>, cet attribut est le <a class="external" href="http://fr.wikipedia.org/wiki/Type_MIME" title="http://fr.wikipedia.org/wiki/Type_MIME">type&nbsp;MIME</a> du contenu qui est untilisé pour soumettre le formulaire au serveur. Les valeurs possibles sont :
        <ul>
          <li><code>application/x-www-form-urlencoded</code></li>
          <li><code>multipart/form-data</code> : utilisez cette valeur si vous utilisez un élément {{HTMLElement("input")}} avec l'attribut <code>type</code> ayant pour valeur <em>file</em>.</li>
          <li><code>text/plain</code></li>
        </ul>
      </td>
    </tr>
    <tr>
      <td>{{htmlattrxref("method","form")}}</td>
      <td><code>get</code></td>
      <td>La méthode <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616.html" title="http://www.w3.org/Protocols/rfc2616/rfc2616.html">HTTP</a> que le navigateur utilise pour soumettre le formulaire. Cet attribut peut prendre deux valeurs : <code>get</code> ou <code>post</code>.</td>
    </tr>
    <tr>
      <td>{{htmlattrxref("name","form")}}</td>
      <td>&nbsp;</td>
      <td>Le nom du formulaire. Il doit être unique parmis tous les formulaires dans un document et ne doit pas être une chaîne vide. Vous devriez habituellement utiliser l'attribut <code>id</code>.</td>
    </tr>
    <tr>
      <td>{{htmlattrxref("novalidate","form")}}</td>
      <td>(<em>false</em>)</td>
      <td>Cet attribut booléen indique que le formulaire ne doit pas être validé lorsqu'il est soumis.</td>
    </tr>
    <tr>
      <td>{{htmlattrxref("target","form")}}</td>
      <td><code>_self</code></td>
      <td>Un nom ou un mot-clé indiquant où la réponse reçue après avoir soumis le formulaire doit être affichée. Ceci peut être un {{HTMLElement("iframe")}}, un onglet ou une fenêtre par exemple. Les mots-clés disponibles comme valeurs possibles de cet attribut sont :<br />
        <ul>
          <li><code>_self</code>&nbsp;: charge la réponse dans le même contexte de navigation ({{HTMLElement("iframe")}}, onglet, fenêtre, etc.) que le contexte actuel.</li>
          <li><code>_blank</code>&nbsp;: charge la réponse dans un nouveau contexte de navigation.</li>
          <li><code>_parent</code>&nbsp;: charge la réponse dans le contexte de navigation HTML5 parent du contexte actuel. S'il n'y a pas de parent, cette option se comporte de manière identique à <code>_self</code>.</li>
          <li><code>_top</code>&nbsp;: charge la réponse dans le contexte de navigation ayant le plus haut niveau (c'est-à-dire, le contexte de navigation qui est un ancêtre du contexte actuel et qui n'a pas de parent). S'il aucun parent existe, cette option se comporte de manière identique à <code>_self</code>.</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>
<p>Veuillez noter qu'il est toujours possible d'utiliser un bloc de formulaire en-dehors d'un élément {{HTMLElement("form")}} mais si vous faites cela, ce bloc n'aura aucun lien avec un quelconque formulaire. Il peut être pratique d'utiliser de tels blocs en-dehors d'un formulaire mais cela signifie que vous devez avoir un plan spécifique pour ces blocs, puisqu'ils ne seront d'aucune utilité utilisés indépendamment. Vous devrez personnaliser leur comportement à l'aide de JavaScript.</p>
<p>D'un point de vue technique, HTML5 introduit l'attribut <code>form</code> pour les éléments HTML <code>form</code>. Ceci vous permet de lier explicitement un élément avec un formulaire même s'il n'est pas contenu dans un élément {{ HTMLElement("form") }}. Malheureusement, à l'heure actuelle l'implémentation de cette fonctionnalité n'est pas assez constante entre les différents navigateurs pour pouvoir l'utiliser.</p>
<h3 id="Les_.C3.A9l.C3.A9ments_&lt;fieldset&gt;_et_&lt;legend&gt;">Les éléments &lt;fieldset&gt; et &lt;legend&gt;</h3>
<p>L'élément {{HTMLElement("fieldset")}} est pratique pour créer des groupes de blocs qui partagent un objectif commun. Un élément {{HTMLElement("fieldset")}} peut être étiquetté avec un élément {{HTMLElement("legend")}}. L'élément {{HTMLElement("legend")}} décrit formellement le but de l'élément {{HTMLElement("fieldset")}}. De nombreuses technologies d'assistance utiliseront l'élément {{HTMLElement("legend")}} comme s'il était une partie intégrante de chacun des blocs à l'intérieur de l'élément {{HTMLElement("fieldset")}} correspondant. Par exemple, certains lecteurs d'écrans tels que <a href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp" rel="external" title="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Jaws</a> ou <a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a> prononceront le contenu de l'élément <code>legend</code> avant de prononcer le contenu de l'élément <code>label</code>de chaque bloc.</p>
<p>Voici un court exemple&nbsp;:</p>
<pre class="brush:html;">
&lt;form&gt;
&nbsp; &lt;fieldset&gt;
&nbsp;&nbsp;&nbsp; &lt;legend&gt;Taille de la boisson&lt;/legend&gt;
&nbsp;&nbsp;&nbsp; &lt;p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="radio" name="taille" id="taille_1" value="petite" /&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label for="taille_1"&gt;Petite&lt;/label&gt;
&nbsp;&nbsp;&nbsp; &lt;/p&gt;
&nbsp;&nbsp;&nbsp; &lt;p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="radio" name="taille" id="taile_2" value="moyenne" /&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label for="taille_2"&gt;Moyenne&lt;/label&gt;
&nbsp;&nbsp;&nbsp; &lt;/p&gt;
&nbsp;&nbsp;&nbsp; &lt;p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="radio" name="taille" id="taille_3" value="grande" /&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label for="taille_3"&gt;Grande&lt;/label&gt;
&nbsp;&nbsp;&nbsp; &lt;/p&gt;
&nbsp; &lt;/fieldset&gt;
&lt;/form&gt;</pre>
<p>Dans cet exemple, le lecteur d'écran prononcera «&nbsp;Taille de la boisson petite&nbsp;» pour le premier bloc, «&nbsp;Taille de la boisson moyenne&nbsp;» pour le second et «&nbsp;Taille de la boisson grande&nbsp;» pour le troisième.</p>
<p>La cas d'usage de cet exemple est l'un des plus important. À chaque fois que vous avez un ensemble de boutons radio, vous devez vous assurez qu'ils sont emboîtés dans un élément {{HTMLElement("fieldset")}}. D'autres cas d'usage existent, et de manière générale l'élément {{HTMLElement("fieldset")}} peut aussi être utilisé pour créer des sections un formulaire. À cause de son influence sur les technologies d'assistance, l'élément {{HTMLElement("fieldset")}} est l'un des éléments clés pour créer des formulaires accessibles. Toutefois, il est de votre responsabilité de ne pas en abuser. Si possible, à chaque fois que vous souhaitez créer un formulaire, essayez d'écouter comment un lecteur d'écran l'interprète. Si cela sonne faux, c'est un bon indice pour vous dire que la structure de votre formulaire à besoin d'être améliorée.</p>
<p>L'élément {{HTMLElement("fieldset")}} accepte les attributs spécifiques suivants&nbsp;:</p>
<table>
  <caption>
    Attributs de l'élément {{HTMLElement("fieldset")}}</caption>
  <thead>
    <tr>
      <th scope="col">Nom de l'attribut</th>
      <th scope="col">Valeur par défaut</th>
      <th scope="col">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{htmlattrxref("disabled","fieldset")}}</td>
      <td>(<em>false</em>)</td>
      <td>Si cet attribut booléen est défini, les contrôles de ce formulaires qui sont des descendants (autres que les descendants que son premier élément optionnel {{ HTMLElement("legend") }}) sont désactivés et ne peuvent pas être édités. Ils ne recevront aucun évènement de navigation, comme les clics de souris ou ceux liés au focus. Bien souvent, de tels contrôles apparaissent grisés par les navigateurs.</td>
    </tr>
  </tbody>
</table>
<h3 id="L'.C3.A9l.C3.A9ment_&lt;label&gt;">L'élément &lt;label&gt;</h3>
<p>L'élément {{HTMLElement("label")}} est une manière formelle de définir une étiquette pour un bloc de formulaire HTML. C'est l'élément le plus important pour créer des formulaires accessibles.</p>
<p>L'élément {{HTMLElement("label")}} accepte les attributs suivants&nbsp;:</p>
<table>
  <caption>
    Attributs de l'élément {{HTMLElement("label")}}</caption>
  <thead>
    <tr>
      <th scope="col">Nom de l'attribut</th>
      <th scope="col">Valeur par défaut</th>
      <th scope="col">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{htmlattrxref("for","label")}}</td>
      <td>&nbsp;</td>
      <td>L'ID d'un bloc pouvant recevoir une étiquette dans le même document que l'élément {{HTMLElement("label")}}. Le premier élément de la sorte dans le document avec un ID qui correspond à la valeur de l'attribut <code>for</code> est le bloc recevant l'étiquette définie par cet élément <code>label</code>.</td>
    </tr>
  </tbody>
</table>
<p>Un élément {{HTMLElement("label")}} est lié à son bloc par l'attribut <code>for</code>. L'attribut <code>for</code> fait en fait référence à l'attribut <code>id</code> de l'élément correspondant. Un bloc peut être emboîté dans son élément {{HTMLElement("label")}} mais même dans ce cas, donner une valeur à l'attribut <code>for</code> est une bonne pratique car certaines technologies d'assistance ne comprennent pas implicitement la relation entre les étiquettes et les blocs.</p>
<p>Veuillez noter que sans prendre en considération les technologies d'assistance, définir formellement une étiquette pour un bloc donné permet à l'utilisateur de cliquer sur l'étiquette pour activer le bloc correspondant dans leur navigateur. Ceci est particulièrement pratique pour les cases à cocher et les boutons radio.</p>
<pre class="brush:html;">
&lt;form&gt;
&nbsp; &lt;p&gt;
&nbsp;&nbsp;&nbsp; &lt;input type="checkbox" id="goût_1" name="goût_cerise" value="1"&gt;
&nbsp;&nbsp;&nbsp; &lt;label for="goût_1"&gt;J'aime la cerise&lt;/label&gt;
&nbsp; &lt;/p&gt;
&nbsp; &lt;p&gt;
&nbsp;&nbsp;&nbsp; &lt;label for="goût_2"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="checkbox" id="goût_2" name="goût_banane" value="1"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; J'aime la banane
&nbsp;&nbsp;&nbsp; &lt;/label&gt;
&nbsp; &lt;/p&gt;
&lt;/form&gt;</pre>
<p>Certaines technologies d'assistance peuvent rencontrer des problèmes pour manipuler les étiquttes multiples pour un bloc unique. À cause de celà, il est conseiller d'emboîter un bloc dans l'élément correspondant pour créer un formulaire accessible.</p>
<p>Considérons cet exemple&nbsp;:</p>
<pre class="brush:html;">
&lt;form&gt;
&nbsp; &lt;p&gt;Les champs obligatoires sont suivis par &lt;strong&gt;&lt;abbr title="obligatoire"&gt;*&lt;/abbr&gt;&lt;/strong&gt;.&lt;/p&gt;
&nbsp;
&nbsp; &lt;p&gt;
&nbsp;&nbsp;&nbsp; &lt;label for="nom"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span&gt;Nom&nbsp;: &lt;/span&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" id="nom" name="nomdutilisateur" required /&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;strong&gt;&lt;abbr title="obligatoire"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
&nbsp;&nbsp;&nbsp; &lt;/label&gt;
&nbsp; &lt;/p&gt;
&nbsp;
&nbsp; &lt;p&gt;
&nbsp;&nbsp;&nbsp; &lt;label for="naissance"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span&gt;Date de naissance&nbsp;:&lt;/span&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" id="naissance" name="datedenaissance" maxlength="10" /&gt; &lt;em&gt;formatté selon jj/mm/aaaa&lt;/em&gt;
&nbsp;&nbsp;&nbsp; &lt;/label&gt;
&nbsp; &lt;/p&gt;
&lt;/form&gt;</pre>
<p>Dans cet exemple, le premier paragraphe définit la règle pour les éléments obligatoires. Elle doit être mentionnée au début pour que les technologies d'assistance telles que les lecteurs d'écrans l'affichent ou l'énoncent avant que l'utilisateur ne rencontre un élément obligatoire. De cette manière, il sait ce qu'il doit faire.</p>
<p>le premier champ est obligatoire donc son élément <code>label</code> précise à la fois l'attribut <code>name</code> et le fait qu'il soit nécéssaire à l'aide de l'attribut <code>required</code>. De cette manière, un lecteur d'écran énoncera l'étiquette de la manière suivante : «&nbsp;<em>Nom astérisque</em>&nbsp;» ou «&nbsp;<em>Nom obligatoire</em>&nbsp;» (ceci dépend du réglage du lecteur d'écran mais cela est toujours cohérent avec ce qui est énoncé à la lecture de la première ligne). Si vous utilisez deux étiquettes, il n'y a aucune garantie que l'utilisateur soit informé du fait que cet élément est obligatoire.</p>
<p>Le second élément du formulaire fonctionne de manière similaire. En utilisant cette technique, vous vous assurez qu'il sera dit à l'utilisateur comment formatter la date.</p>
<h3 id="L'.C3.A9l.C3.A9ment_&lt;output&gt;">L'élément &lt;output&gt;</h3>
<p>Cet élément est utilisé pour stocker le résultat d'un calcul. Il définit formellement une relation entre les champs utilisés pour obtenir les données nécessaires au calcul et un élément qui doit être utilisé pour afficher le résultat. Il est aussi considéré comme une région interactive par certaine technologies d'assistance (ce qui signifie que lorsque le contenu de l'élément {{HTMLElement("output")}} est modifié, la technologie d'assistance est consciente de cette modification et y réagit).</p>
<p>L'élément {{HTMLElement("output")}} accpete les attributs suivants&nbsp;:</p>
<table>
  <caption>
    Attributs pour l'élément {{HTMLElement("output")}}</caption>
  <thead>
    <tr>
      <th scope="col">Nom de l'attribut</th>
      <th scope="col">Valeur par défaut</th>
      <th scope="col">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{htmlattrxref("for","output")}}</td>
      <td>&nbsp;</td>
      <td>Une liste d'ID d'autres éléments séparés par des espaces, indiquant que ces élément contribuent aux valeurs d'entrée du calcul (ou affecte d'une quelconque manière)</td>
    </tr>
  </tbody>
</table>
<h3 id="Structures_HTML_usuelles_pour_les_formulaires">Structures HTML usuelles pour les formulaires</h3>
<p>Au-delà des structures spécifiques aux formulaires HTML, il est bon de garder à l'esprit que ces formulaires ne sont que du HTML. Ceci signifie que vous pouvez utiliser toute la puissance de HTML pour structurer un formulaire HTML.</p>
<p>Comme vous pouvez le voir dans les exemples, il est habituel d'englober le label et son bloc dans un élément {{HTMLElement("p")}} ou {{HTMLElement("div")}}.</p>
<p>En plus de l'élément {{HTMLElement("fieldset")}}, c'est une bonne pratique d'utiliser également les titres et sections HTML afin de structurer un formulaire complexe.</p>
<p>Les listes HTML sont souvent utilisées lorsque des cases à cocher et des boutons radio sont utilisés.</p>
<p>Voici un exemple d'un formulaire de paiement simple&nbsp;:</p>
<pre class="brush:html;">
&lt;form&gt;
&nbsp; &lt;h1&gt;Formulaire de paiement&lt;/h1&gt;
&nbsp; &lt;p&gt;Les champs obligatoires sont suivis d'un &lt;strong&gt;&lt;abbr title="obligatoire"&gt;*&lt;/abbr&gt;&lt;/strong&gt;.&lt;/p&gt;
&nbsp;
&nbsp; &lt;section&gt;
&nbsp;&nbsp;&nbsp; &lt;h2&gt;Information de contact&lt;/h2&gt;
&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp;&nbsp; &lt;fieldset&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;legend&gt;Titre&lt;/legend&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ul&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label for="titre_1"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="radio" id="titre_1" name="title" value="M." /&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Monsieur
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/label&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label for="titre_2"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="radio" id="titre_2" name="title" value="Mme" /&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Madame
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/label&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;
&nbsp;&nbsp;&nbsp; &lt;/fieldset&gt;
&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp;&nbsp; &lt;p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label for="nom"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span&gt;Nom&nbsp;: &lt;/span&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" id="nom" name="nomdutilisateur" required /&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;strong&gt;&lt;abbr title="obligatoire"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/label&gt;
&nbsp;&nbsp;&nbsp; &lt;/p&gt;
&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label for="courriel"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span&gt;Courriel&nbsp;: &lt;/span&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="email" id="courriel" name="courrielutilisateur" required /&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;strong&gt;&lt;abbr title="obligatoire"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/label&gt;
&nbsp;&nbsp;&nbsp; &lt;/p&gt;
&nbsp; &lt;/section&gt;
&nbsp;
&nbsp; &lt;section&gt;
&nbsp;&nbsp;&nbsp; &lt;h2&gt;Information de paiement&lt;/h2&gt;
&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp;&nbsp; &lt;p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label for="carte"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span&gt;Type de carte&nbsp;:&lt;/span&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;select id="carte" name="carteutilisateur"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;option value="visa"&gt;Visa&lt;/option&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;option value="mc"&gt;Mastercard&lt;/option&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;option value="amex"&gt;American Express&lt;/option&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/select&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/label&gt;
&nbsp;&nbsp;&nbsp; &lt;/p&gt;
&nbsp;&nbsp;&nbsp; &lt;p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label for="numero"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span&gt;Numéro de la carte&nbsp;:&lt;/span&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" id="numero" name="numerocarte" required /&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;strong&gt;&lt;abbr title="obligatoire"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/label&gt;
&nbsp;&nbsp;&nbsp; &lt;/p&gt;
&nbsp;&nbsp;&nbsp; &lt;p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label for="date"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span&gt;Date d'expiration&nbsp;:&lt;/span&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" id="date" name="expiration" required /&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;strong&gt;&lt;abbr title="obligatoire"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;em&gt;formatté comme mm/aa&lt;/em&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/label&gt;
&nbsp;&nbsp;&nbsp; &lt;/p&gt;
&nbsp; &lt;/section&gt;
&nbsp;
&nbsp; &lt;section&gt;
&nbsp;&nbsp;&nbsp; &lt;p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;button&gt;Valider le paiement&lt;/button&gt;
&nbsp;&nbsp;&nbsp; &lt;/p&gt;
&nbsp; &lt;/section&gt;
&lt;/form&gt;</pre>
<p>Voyez ce formulaire en action (avec une touche de CSS)&nbsp;:</p>
<table>
  <thead>
    <tr>
      <th scope="col" style="text-align: center;">Exemple interactif</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{EmbedDistLiveSample("/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/Exemple","Un_formulaire_de_paiement",460,600)}}</td>
    </tr>
    <tr>
      <td style="text-align: center;"><a href="/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/Exemple" title="/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/Exemple">Regardez le code source</a></td>
    </tr>
  </tbody>
</table>
<h2 id="Blocs_HTML">Blocs HTML</h2>
<p>Lorsque vous créez un formulaire, vous avez besoin d'utiliser certains blocs pour collecter les données auprès des utilisateurs. Dans cet article nous allons voir comment afficher ces blocs. Si vous souhaitez en apprendre plus sur la manière dont ces blocs fonctionnent, cela est détaillé dans l'article : <a href="/fr/docs/HTML/Formulaires/Les_blocs_de_formulaires_natifs" title="/fr/docs/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les blocs de formulaires natifs</a>.</p>
<h3 id="L'.C3.A9l.C3.A9ment_&lt;input&gt;">L'élément &lt;input&gt;</h3>
<p>Cet élément est un peu particulier car il peut presque tout faire. En modifiant son attribut <code>type</code>, il peut changer radicalement. Pour simplifier les choses, la valeur de l'attribut <code>type</code> peut être triés dans quatre catégories&nbsp;: les champs textuels monoligne, les contrôles sans texte, les contrôles de date de d'horaire et les boutons. À cause de ce polymorphisme, l'élément {{HTMLElement("input")}} accepte de nombreux attributs mais il peut être difficile de savoir lesquels sont pertinents et lesquels sont obligatoires car ils dépendent de la valeur de l'attribut <code>type</code>.</p>
<p>Tout ceci est résumé dans le tableau suivant (pour une liste exhaustive de tous les attributs, visitez la page de l'élément {{HTMLElement("input")}})&nbsp;:</p>
<table>
  <thead>
    <tr>
      <th scope="col">Valeur de l'attribut type</th>
      <th scope="col">Description</th>
      <th scope="col">Attributs obligatoires</th>
      <th scope="col">Attributs pertinents</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="4" style="text-align: center;">Champs textuels monolignes</th>
    </tr>
    <tr>
      <td><code>text</code></td>
      <td>Ceci est le champ textuel le plus simple. La valeur <em>text</em> de l'attribut <code>type</code> est la valeur par défaut de cet attribut. Aucune validation automatique n'est réalisée.</td>
      <td>&nbsp;</td>
      <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}, {{htmlattrxref("spellcheck","input")}}</td>
    </tr>
    <tr>
      <td><code>email</code></td>
      <td>Un champ pour éditer une ou plusieurs adresses électroniques.</td>
      <td>&nbsp;</td>
      <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("multiple","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}</td>
    </tr>
    <tr>
      <td><code>password</code></td>
      <td>La valeur de ce champ textuel est brouillée.</td>
      <td>&nbsp;</td>
      <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}</td>
    </tr>
    <tr>
      <td><code>search</code></td>
      <td>Un champ pour entrer les éléments d'une recherche.</td>
      <td>&nbsp;</td>
      <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("autosave","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}, {{htmlattrxref("spellcheck","input")}}</td>
    </tr>
    <tr>
      <td><code>tel</code></td>
      <td>Un champ pour éditer un numéro de téléphone.</td>
      <td>&nbsp;</td>
      <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}</td>
    </tr>
    <tr>
      <td><code>url</code></td>
      <td>Un champ pour éditer une URL absolue.</td>
      <td>&nbsp;</td>
      <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}</td>
    </tr>
    <tr>
      <th colspan="4" style="text-align: center;">Contrôles sans champs textuels</th>
    </tr>
    <tr>
      <td><code>checkbox</code></td>
      <td>Une case à cocher.</td>
      <td>&nbsp;</td>
      <td>{{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}</td>
    </tr>
    <tr>
      <td><code>color</code></td>
      <td>Un contrôle pour définir une couleur.</td>
      <td>&nbsp;</td>
      <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("required","input")}}</td>
    </tr>
    <tr>
      <td><code>file</code></td>
      <td>Un contrôle permettant à l'utilisateur de sélectionner un fichier.</td>
      <td>&nbsp;</td>
      <td>{{htmlattrxref("accept","input")}}, {{htmlattrxref("multiple","input")}}, {{htmlattrxref("required","input")}}</td>
    </tr>
    <tr>
      <td><code>hidden</code></td>
      <td>Un contrôle qui n'est pas affiché, mais dont les valeurs sont envoyées au serveur.</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><code>number</code></td>
      <td>Un contrôele permettant de saisir un chiffre en virgule flottante.</td>
      <td>&nbsp;</td>
      <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}</td>
    </tr>
    <tr>
      <td><code>radio</code></td>
      <td>Un bouton radio. Seul un seul de ces boutons peut être sélectionné dans chaque groupe.</td>
      <td>&nbsp;</td>
      <td>{{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}</td>
    </tr>
    <tr>
      <td><code>range</code></td>
      <td>Un contrôle permettant de saisir un nombre dont la valeur exacte n'est pas importante.</td>
      <td>&nbsp;</td>
      <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}</td>
    </tr>
    <tr>
      <th colspan="4" style="text-align: center;">Contrôles de date de d'horaire</th>
    </tr>
    <tr>
      <td><code>date</code></td>
      <td>Un contrôle pour saisir une date (année, mois et jour, sans heure).</td>
      <td>&nbsp;</td>
      <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td>
    </tr>
    <tr>
      <td><code>datetime</code></td>
      <td>Un contrôle pour saisir une date et une heure (heure, minute, seconde et fraction de seconde) basée sur le fuseau horaire UTC.</td>
      <td>&nbsp;</td>
      <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td>
    </tr>
    <tr>
      <td><code>datetime-local</code></td>
      <td>Un contrôle pour saisir une date et une heure, sans fuseau horaire.</td>
      <td>&nbsp;</td>
      <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td>
    </tr>
    <tr>
      <td><code>month</code></td>
      <td>Un contrôle pour saisir un mois et une années, sans fuseau horaire.</td>
      <td>&nbsp;</td>
      <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td>
    </tr>
    <tr>
      <td><code>time</code></td>
      <td>Un contrôle pour saisir un horaire, sans fuseau horaire.</td>
      <td>&nbsp;</td>
      <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td>
    </tr>
    <tr>
      <td><code>week</code></td>
      <td>Un contrôle pour choisir une date consistant en une semaine de l'année et l'année correspondante, sans fuseau horaire.</td>
      <td>&nbsp;</td>
      <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td>
    </tr>
    <tr>
      <th colspan="4" style="text-align: center;">Boutons</th>
    </tr>
    <tr>
      <td><code>button</code></td>
      <td>Un bouton à presser sans comportement par défaut.</td>
      <td>&nbsp;</td>
      <td>{{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}</td>
    </tr>
    <tr>
      <td><code>image</code></td>
      <td>Un bouton graphique.</td>
      <td>{{htmlattrxref("src","input")}}, {{htmlattrxref("alt","input")}}</td>
      <td>{{htmlattrxref("width","input")}}, {{htmlattrxref("height","input")}}, {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}</td>
    </tr>
    <tr>
      <td><code>reset</code></td>
      <td>Un bouton qui réinitialise le contenu du formulaire à ses valeurs par défaut.</td>
      <td>&nbsp;</td>
      <td>{{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}</td>
    </tr>
    <tr>
      <td><code>submit</code></td>
      <td>Un bouton qui soumet le formulaire.</td>
      <td>&nbsp;</td>
      <td>{{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}</td>
    </tr>
  </tbody>
</table>
<p>Si pour une quelconque raison, la valeur de l'attribut <code>type</code> n'est pas supportée par le navigateur, l'élément {{HTMLElement("input")}} est affiché comme si la valeur <em>text</em> était définie. Ceci permet au formulaire de fonctionner, mais cela n'est peut être pas la méthode la plus attractive.</p>
<p>Bien que l'élement {{HTMLElement("input")}} soit un outil puissant, il ne peut pas tout réaliser et d'autres éléments existent pour couvrir ces cas.</p>
<h3 id="L'.C3.A9l.C3.A9ment_&lt;textarea&gt;">L'élément &lt;textarea&gt;</h3>
<p>Cet élément est dédié aux champs textuels multilignes. Il fonctionne exatctement de la même manière que les champs monolignes sauf qu'il accepte les retours chariots saisis par l'utilisateur. Il accepte également quelques attributs supplémentaires pour la gestion de l'affichage sur plusieurs lignes :</p>
<table>
  <caption>
    Attributs de l'élément {{HTMLElement("textarea")}}</caption>
  <thead>
    <tr>
      <th scope="col">Nom de l'attribut</th>
      <th scope="col">Valeur par défaut</th>
      <th scope="col">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{htmlattrxref("cols","textarea")}}</td>
      <td><code>20</code></td>
      <td>La largeur visible du champ, exprimé en largeur moyenne de caractères.</td>
    </tr>
    <tr>
      <td>{{htmlattrxref("rows","textarea")}}</td>
      <td>&nbsp;</td>
      <td>Le nombre de lignes visibles dans le champ.</td>
    </tr>
    <tr>
      <td>{{htmlattrxref("wrap","textarea")}}</td>
      <td><code>soft</code></td>
      <td>Indique comment le débordement du texte est géré. Les valeurs possibles sont : <code>hard</code> ou <code>soft</code></td>
    </tr>
  </tbody>
</table>
<p>Veuillez noter que l'élément {{HTMLElement("textarea")}} fonctionne d'une manière légèrement différente de l'élément {{HTMLElement("input")}}. L'élément {{HTMLElement("input")}} est auto-fermant, ce qui signifie qu'il ne peut contenir aucun élément enfant. Au contraire, l'élément {{HTMLElement("textarea")}} est un élément régulier et peut contenir des éléments textuels enfants.</p>
<p>Ceci a deux effets&nbsp;:</p>
<ul>
  <li>Si vous souhaitez définir une valeur par défaut pour un élément {{HTMLElement("input")}}, vous devez utiliser l'attribut <code>value</code>, mais pour un élément {{HTMLElement("textarea")}}, vous devez définir la valeur par défaut entre la balise ouvrante et la balise fermante de l'élément {{HTMLElement("textarea")}}.</li>
  <li>À cause de sa nature, l'élément {{HTMLElement("textarea")}} n'accepte que du contenu textuel. Ceci signifie que tout contenu HTML entré dans un élément {{HTMLElement("textarea")}} est considéré comme du texte simple.</li>
</ul>
<p>Dans l'exemple suivant, les éléments {{HTMLElement("textarea")}} s'afficheront de la même manière&nbsp;:</p>
<pre class="brush:html;">
&lt;form&gt;
&nbsp; &lt;p&gt;
&nbsp;&nbsp;&nbsp; &lt;label for="texte_1"&gt;Avec du HTML normal&lt;/label&gt;&lt;br&gt;
&nbsp;&nbsp;&nbsp; &lt;textarea id="texte_1" name="normal"&gt;&lt;p&gt;Je suis un paragraphe&lt;/p&gt;&lt;/textarea&gt;
&nbsp; &lt;/p&gt;
&nbsp; &lt;p&gt;
&nbsp;&nbsp;&nbsp; &lt;label for="texte_2"&gt;Avec du HTML échappé&lt;/label&gt;&lt;br&gt;
&nbsp;&nbsp;&nbsp; &lt;textarea id="texte_2" name="echape"&gt;&amp;lt;p&amp;gt;Je suis un paragraphe&amp;lt;/p&amp;gt;&lt;/textarea&gt;
&nbsp; &lt;/p&gt;
&nbsp; &lt;p&gt;
&nbsp;&nbsp;&nbsp; &lt;button&gt;Envoyez-moi&lt;/button&gt;
&nbsp; &lt;/p&gt;
&lt;/form&gt;</pre>
<h3 id="Les_.C3.A9l.C3.A9ments_&lt;select&gt;.2C_&lt;option&gt;_et_&lt;optgroup&gt;">Les éléments &lt;select&gt;, &lt;option&gt; et &lt;optgroup&gt;</h3>
<p>L'élément {{HTMLElement("select")}} vous permet de construire des boîtes de sélection (parfois appelées combo boxes). Une boîte de sélection est un bloc qui permet à l'utilisateur de choisir une ou plusieurs valeurs prédéfinies. La différence entre une boîte de sélection unique et une boîte de sélection multiple sera présenté en détails dans l'article&nbsp;: <a href="/fr/docs/HTML/Formulaires/Les_blocs_de_formulaires_natifs" title="/fr/docs/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les blocs de formulaires natifs</a>.</p>
<p>Chaque valeur dans une boîte de sélection est définie grâce à un élément {{HTMLElement("option")}} et ces éléments peuvent être regroupés dans des éléments {{HTMLElement("option")}}.</p>
<p>Prenons cet exemple&nbsp;:</p>
<pre class="brush:html;">
&lt;form&gt;
&nbsp; &lt;p&gt;
&nbsp;&nbsp;&nbsp; &lt;label for="monFruit"&gt;Choisissez un fruit&lt;/label&gt;
&nbsp;&nbsp;&nbsp; &lt;select id="monFruit" name="fruit"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- Ici il y a une astuce, vous pensez choisir une banane
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mais en réalité vous sélectionnez une orange &gt;:-) --&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;option value="orange"&gt;Banane&lt;/option&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;option&gt;Cerise&lt;/option&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;optgroup label="baies"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;option&gt;Bleuet&lt;/option&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;option&gt;Framboise&lt;/option&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;option&gt;Fraise&lt;/option&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/optgroup&gt;
&nbsp;&nbsp;&nbsp; &lt;/select&gt;
&nbsp; &lt;/p&gt;
&lt;/form&gt;</pre>
<p>Si l'attribut <code>value</code> est définit pour l'élément {{HTMLElement("option")}}, cet attribut est la valeur qui sera envoyé au serveur. Si l'attribut <code>value</code> n'est pas définit, le contenu de l'élément {{HTMLElement("option")}} est utilisé comme valeur de la boîte de sélection.</p>
<p>Pour l'élément {{HTMLElement("optgroup")}}, l'attribut <code>label</code> est affiché avant les valeurs, mais bien qu'il ressemble à une option, ce n'est pas possible de le sélectionner.</p>
<table>
  <caption>
    Attributs pour l'élément {{HTMLElement("option")}}</caption>
  <thead>
    <tr>
      <th scope="col">Nom de l'attribut</th>
      <th scope="col">Valeur par défaut</th>
      <th scope="col">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{htmlattrxref("label","option")}}</td>
      <td>&nbsp;</td>
      <td>Cet attribut est l'étiquette qui décrit l'option. Si l'attribut <code>label</code> n'est pas définit, sa valeur est le contenu textuel de l'élément.</td>
    </tr>
    <tr>
      <td>{{htmlattrxref("selected","option")}}</td>
      <td>(<em>false</em>)</td>
      <td>S'il est présent, cet attribut booléen indique que l'option est sélectionnée par défaut.</td>
    </tr>
  </tbody>
</table>
<table>
  <caption>
    Attributs pour l'élément {{HTMLElement("optgroup")}}</caption>
  <thead>
    <tr>
      <th scope="col">Nom de l'attribut</th>
      <th scope="col">Valeur par défaut</th>
      <th scope="col">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{htmlattrxref("label","optgroup")}}</td>
      <td>&nbsp;</td>
      <td>Le nom du groupe d'options. <strong>Cet attribut est obligatoire.</strong></td>
    </tr>
  </tbody>
</table>
<h3 id="L'.C3.A9l.C3.A9ment_&lt;datalist&gt;">L'élément &lt;datalist&gt;</h3>
<p>Cet élément élargit les capacités des blocs existants en permettant de prédéfinir des valeurs pour des blocs données. Le cas d'utilisation le plus commun pour cet élément est une liste d'autocomplétion pour des champs textuels. Les valeurs possibles sont définies par des éléments {{HTMLElement("option")}} dans l'élément {{HTMLElement("datalist")}}.</p>
<p>Pour lier un bloc avec un élément {{HTMLElement("datalist")}}, vous devez utiliser l'attribut <code>list</code> sur le bloc ciblé. Ceci défini l'attribut <code>id</code> de l'élément {{HTMLElement("datalist")}} à utiliser pour ce bloc.</p>
<p>L'élément {{HTMLElement("datalist")}} est un ajout récent aux formulaires HTML, il existe donc encore des navigateurs qui ne sont pas compatibles avec celui-ci. Pour parer à cela, voici une astuce pour une solution de repli pour ces navigateurs&nbsp;:</p>
<pre class="brush:html;">
&lt;form&gt;
&nbsp; &lt;p&gt;
&nbsp;&nbsp;&nbsp; &lt;label for="MonFruit"&gt;Quel est votre fruit préféré ?&lt;/label&gt;
&nbsp;&nbsp;&nbsp; &lt;input type="text" id="monFruit" name="fruit" list="listeDeFruits" /&gt;
&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp;&nbsp; &lt;datalist id="listeDeFruits"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label for="suggestion"&gt;ou choisissez un fruit&lt;/label&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;select id="suggestion" name="altFruit"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;option value="banane"&gt;Banane&lt;/option&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;option value="cerise"&gt;Cerise&lt;/option&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;option value="fraise"&gt;Fraise&lt;/option&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/select&gt;
&nbsp;&nbsp;&nbsp; &lt;/datalist&gt;
&nbsp; &lt;/p&gt;
&lt;/form&gt;</pre>
<p>D'un côté, les navigateurs qui sont compatibles avec l'élément {{HTMLElement("datalist")}} ignoreront tous les éléments qui ne sont pas des éléments {{HTMLElement("option")}} et cela fonctionnera comme prévu. De l'autre côté, les navigateurs qui ne sont pas compatibles avec l'élément {{HTMLElement("datalist")}} afficheront l'étiquette et la boîte de sélection. Bien sûr, il existe d'autres méthodes pour parer au manque de compatibilité de l'élément {{HTMLElement("datalist")}}, mais elles nécessitent d'avoir recours à JavaScript ce qui n'est pas toujours une bonne option.</p>
<table>
  <tbody>
    <tr>
      <th scope="row">Safari 6</th>
      <td><img alt="Screenshot of the datalist element fallback with Safari on Mac OS" src="/files/4583/datalist-safari.png" style="width: 495px; height: 32px;" /></td>
    </tr>
    <tr>
      <th scope="row">Firefox 18</th>
      <td><img alt="Screenshot of the datalist element with Firefox on Mac OS" src="/files/4581/datalist-firefox-macos.png" style="width: 353px; height: 102px;" /></td>
    </tr>
  </tbody>
</table>
<h3 id="Les_.C3.A9l.C3.A9ments_&lt;meter&gt;_et_&lt;progress&gt;">Les éléments &lt;meter&gt; et &lt;progress&gt;</h3>
<p>Ces deux éléments permettent de représenter graphiquement une donnée numérique donnée. La différence entre les deux est principalement sémantique&nbsp;:</p>
<ul>
  <li>L'élément {{HTMLElement("meter")}} représente une valeur statique et sa position relative entre une valeur minimum et une valeur maximum.</li>
  <li>L'élément {{HTMLElement("progress")}} représente une valeur dynamique dans le temps et variant entre une valeur minimum et une valeur maximum. Il est à noter qu'une valeur dynamique (et donc par-là même l'indicateur de progression) doivent être réalisés à l'aide de JavaScript. L'élément lui-même n'a pas de mécanisme pour le faire de manière autonome.</li>
</ul>
<p>À cause de leur nature, ces éléments acceptent un ensemble particulier d'attributs&nbsp;:</p>
<table>
  <caption>
    Attributs de l'élément {{HTMLElement("meter")}}</caption>
  <thead>
    <tr>
      <th scope="col">Nom de l'attribut</th>
      <th scope="col">Valeur par défaut</th>
      <th scope="col">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{htmlattrxref("min","meter")}}</td>
      <td>0</td>
      <td>La limite numérique inférieure de la gamme mesurée.</td>
    </tr>
    <tr>
      <td>{{htmlattrxref("max","meter")}}</td>
      <td>1</td>
      <td>La valeur numérique supérieur de la gamme mesurée.</td>
    </tr>
    <tr>
      <td>{{htmlattrxref("low","meter")}}</td>
      <td>the <code>min</code> value</td>
      <td>La valeur numérique supérieure du bas de la gamme mesurée.</td>
    </tr>
    <tr>
      <td>{{htmlattrxref("high","meter")}}</td>
      <td>the <code>max</code> value</td>
      <td>La valeur numérique basse du haut de la gamme mesurée.</td>
    </tr>
    <tr>
      <td>{{htmlattrxref("optimum","meter")}}</td>
      <td>&nbsp;</td>
      <td>La valeur numérique optimale.</td>
    </tr>
  </tbody>
</table>
<table>
  <caption>
    Attributs de l'élément {{HTMLElement("progress")}}</caption>
  <thead>
    <tr>
      <th scope="col">Nom de l'attribut</th>
      <th scope="col">Valeur par défaut</th>
      <th scope="col">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{htmlattrxref("max","progress")}}</td>
      <td>&nbsp;</td>
      <td>Cet attribut décrit la quantité de travail que l'élément {{HTMLElement("progress")}} avant qu'il soit terminé.</td>
    </tr>
  </tbody>
</table>
<h3 id="L'.C3.A9l.C3.A9ment_&lt;button&gt;">L'élément &lt;button&gt;</h3>
<p>Un élément {{HTMLElement("button")}} est la manière la plus simple de créer un bouton pour un formulaire. Un bouton peut être de l'un des trois types, selon la valeur de l'attribut <code>type</code>&nbsp;:</p>
<ul>
  <li>Un bouton d'envoi permet d'envoyer les données d'un formulaire à la page web définie par l'attribut <code>action</code> de l'élément {{HTMLElement("form")}}.</li>
  <li>Un bouton de remise à zéro permet de redéfinir instantanément les valeurs des blocs d'un formulaire à leurs valeurs par défaut. D'un point de vue de l'expérience utilisateur, l'utilisation de ces boutons est considéré comme une mauvaise pratique et doit être évitée. Ce bouton facilite dangereusement la perte de données involontaire.</li>
  <li>Un bouton anonyme n'a pas de sens inhérent, ils faut utiliser JavaScript pour lui donner une fonction.</li>
</ul>
<table>
  <caption>
    Attributs de l'élément {{HTMLElement("button")}}</caption>
  <thead>
    <tr>
      <th scope="col">Nom de l'attribut</th>
      <th scope="col">Valeurs par défaut</th>
      <th scope="col">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{htmlattrxref("type","button")}}</td>
      <td><code>submit</code></td>
      <td>Le type du bouton. Les valeurs possibles sont&nbsp;: <code>button</code>, <code>reset</code> ou <code>submit</code></td>
    </tr>
    <tr>
      <td>{{htmlattrxref("formaction","button")}}</td>
      <td>&nbsp;</td>
      <td>Si le bouton est un bouton d'envoi, la valeur de cet attribut remplace la valeur de l'attribut <code>action</code> de l'élément {{HTMLElement("form")}}.</td>
    </tr>
    <tr>
      <td>{{htmlattrxref("formenctype","button")}}</td>
      <td>&nbsp;</td>
      <td>Si le bouton est un bouton d'envoi, la valeur de cet attribut remplace ma valeur de l'attribut <code>enctype</code> de l'élément {{HTMLElement("form")}}.</td>
    </tr>
    <tr>
      <td>{{htmlattrxref("formmethod","button")}}</td>
      <td>&nbsp;</td>
      <td>Si le bouton est un bouton d'envoi, la valeur de cet attribut remplace la valeur de l'attribut <code>method</code> de l'élément {{HTMLElement("form")}}.</td>
    </tr>
    <tr>
      <td>{{htmlattrxref("formnovalidate","button")}}</td>
      <td>&nbsp;</td>
      <td>Si le bouton est un bouton d'envoi, la valeur de cet attribut remplace la valeur de l'attribut <code>novalidate</code> de l'élément {{HTMLElement("form")}}.</td>
    </tr>
    <tr>
      <td>{{htmlattrxref("formtarget","button")}}</td>
      <td>&nbsp;</td>
      <td>Si le bouton est un bouton d'envoi, la valeur de cet attribut remplace la valeur de l'attribut <code>target</code> de l'élément {{HTMLElement("form")}}.</td>
    </tr>
  </tbody>
</table>
<p>D'un point de vue technique, il n'y a presque aucune différence entre un bouton défini grâce à l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. La seule différence notable est l'étiquette du bouton lui-même. Dans un élément {{HTMLElement("input")}}, l'étiquette peut seulement contenir des caractères, alors que dans un élément {{HTMLElement("button")}}, l'étiquette peut contenur du HTML, et sont apparence peut donc être modifiée comme du HTML.</p>
<div class="note">
  <strong>Note&nbsp;:</strong> pour des raisons historiques, l'élément {{HTMLElement("button")}} n'a jamais été très utilisé et dans de nombreux formulaires, les développeurs préfèrent créer des boutons avec l'élément {{HTMLElement("input")}}. Ceci est dû à un bogue dans d'anciennes version de Internet Explorer (IE). Dans IE6 et IE7, si vous ajouter un attribut <code>name</code> et un attribut <code>value</code> à un élément {{HTMLElement("button")}}, ils n'enverront pas le contenu de l'attribut <code>value</code> mais la valeur brute du bouton à la place. Ceci à été corrigé depuis IE8, il n'y a donc plus de raison d'éviter l'utilisation de l'élément {{HTMLElement("button")}}.</div>
<h3 id="Attributs_communs">Attributs communs</h3>
<p>La plupart des éléments utilisés pour définir des blocs de formulaires ont leurs propres attributs. Toutefois, un certain nombre d'attributs est commun à tous ces éléments vous donnant un certain degré de contrôle sur ces blocs. Voici une liste de ces atributs communs&nbsp;:</p>
<table>
  <thead>
    <tr>
      <th scope="col">Nom de l'attribut</th>
      <th scope="col">Valeur par défaut</th>
      <th scope="col">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>autofocus</code></td>
      <td>(<em>false</em>)</td>
      <td>Cet attribut booléen vous permet de définir si un élément doit avoir le focus lorsque la page est chargée. Un seul des élément associés à un formulaire peut avoir cet attribut défini par document.</td>
    </tr>
    <tr>
      <td><code>disabled</code></td>
      <td>(<em>false</em>)</td>
      <td>Cet attribut booléen indique qu'un utilisateur ne peut pas intéragir avec cet élément. Si l'attribut n'est pas défini, l'élément hérite de la valeur de son conteneur, {{HTMLElement("fieldset")}} par exemple. Si aucun conteneur n'a l'attribut <code>disabled</code> définit, alors l'élément est actif.</td>
    </tr>
    <tr>
      <td><code>form</code></td>
      <td>&nbsp;</td>
      <td>L'élément form associé au bloc en question. La valeur de cet attribut doit être la valeur de l'attribut <code>id</code> de l'élément {{HTMLElement("form")}} dans le même document. En théorie, cela permet de définir un bloc de formulaire à l'extérieur d'un élément {{HTMLElement("form")}}. En pratique, aucun navigateur n'est compatible avec cette fonction à l'heure actuelle.</td>
    </tr>
    <tr>
      <td><code>name</code></td>
      <td>&nbsp;</td>
      <td>Le nom de l'élément. Ceci est soumit avec les données du formulaire.</td>
    </tr>
    <tr>
      <td><code>value</code></td>
      <td>&nbsp;</td>
      <td>La valeur initiale de l'élément.</td>
    </tr>
  </tbody>
</table>
<h2 id="Utiliser_ARIA_pour_structurer_les_formulaires_HTML">Utiliser <a href="/fr/docs/Accessibilité/ARIA" title="/fr/docs/Accessibilité/ARIA">ARIA</a> pour structurer les formulaires HTML</h2>
<p><a href="/fr/docs/Accessibilité/ARIA" title="/fr/docs/Accessibilité/ARIA">ARIA</a> est une <a href="http://www.w3.org/TR/wai-aria/" rel="external" title="http://www.w3.org/TR/wai-aria/">Candidate Recommendation du W3C</a> qui améliore l'accessibilité du HTML pour les applications Internet riches, incluant les formulaires. Nous allons utiliser son utilisation en détails dans l'article «&nbsp;<a href="/fr/docs/HTML/Formulaires/Comment_créer_des_blocs_de_formulaires_personnalisés" title="/fr/docs/HTML/Formulaires/Comment_créer_des_blocs_de_formulaires_personnalisés">Comment créer des blocs de formulaires personnalisés</a>&nbsp;», mais il y a quelques connaissances de base à acquérir auparavant.</p>
<p>Avant d'aller plus loin, il faut remarquer que la compatibilité des différents navigateurs avec ARIA et les technologies d'assistance est loin d'être parfait, mais elle s'améliore. Pour mieux comprendre, lorsqu'un navigateur rencontre un attribut ARIA, il doit envoyer des informations aux couches d'accessiblité du système d'opération. Tous les navigateurs ne font pas cela convenablement sur différentes plateformes. Les technologies d'assistance, de leur côté, doivent se connecter aux couches d'accessibilité du système d'exploitation pour gérer les informations qui proviennent des navigateurs. Étonnament, toutes les technologies d'assistance ne le font pas très bien. Donc utiliser ARIA ne signifie pas que votre application web sera accessible, mais cela signifie que vous avez fait de votre mieux dans cette direction. Malheureusement, à l'heure actuelle, ARIA reste une technologie d'amélioration supplémentaire, mais c'est toujours mieux que de ne rien faire.</p>
<p>Si vous souhaitez vous intéresser à l'utilisation de ARIA pour les formulaires HTML, vous pouvez lire la <a href="/fr/docs/Accessibilité/ARIA/formulaires" title="/fr/docs/Accessibilité/ARIA/formulaires">section dédiée dans la documentaiton ARIA</a>.</p>
<h3 id="L'attribut_aria-labelledby">L'attribut <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby" title="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby"><code>aria-labelledby</code></a></h3>
<p>Cet attribut est une manière pratique de définir une étiquette sans utiliser l'élément {{HTMLElement("label")}}. Cet attribut est définit sur le bloc concerné et fait référence à l'attribut <code>id</code> de l'élément et l'utiliser comment étiquette.</p>
<pre class="brush:html;">
&lt;form&gt;
&nbsp; &lt;p id="etiquetteFruit"&gt;Quel est votre fruit préféré&lt;/p&gt;
&nbsp; &lt;p&gt;
&nbsp;&nbsp;&nbsp; &lt;input type="text" name="fruit" aria-labelledby="etiquetteFruit"&gt;
&nbsp; &lt;/p&gt;
&lt;/form&gt;</pre>
<p>D'un point de vue conceptuel, c'est l'opposé de l'attribut <code>for</code> pour l'élément {{HTMLElement("label")}}. Avec l'attribut <code>for</code>, vous faites référence à l'<code>id</code> du bloc mais avec l'attribut <code>aria-labbeldby</code>, vous faites référence à l'<code>id</code> de l'étiquette.</p>
<h3 id="L'attribut_aria-describedby">L'attribut <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby" title="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby"><code>aria-describedby</code></a></h3>
<p>Cet attribut fonctionne comme l'attribut <code>aria-labelledby</code>. La différence est princiapelement sémantique. Une étiquette définie l'essence d'un objet, alors que la description donne plus d'informations dont l'utilisateur pourait avoir besoin. Cet attribut n'est pas conseillé pour les éléments de formulaires, vous devriez utiliser l'attribut <code>aria-labelledby</code>, sauf si vous souhaitez donner une information complète sur l'élément concerné. Il doit être utilisé pour donner une description plus longue.</p>
<h3 id="L'attribut_aria-label">L'attribut <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label" title="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label"><code>aria-label</code></a></h3>
<p>Cet attribut est utilisé lorsqu'aucune étiquette spécifique n'existe dans le DOM par rapport à un certain bloc. Cela vous permet d'envoyer un bloc aux technologies d'assistance sans créer de nœud dans le DOM pour celui-ci.</p>
<pre class="brush:html;">
&lt;form&gt;
&nbsp; &lt;p&gt;
&nbsp;&nbsp;&nbsp; &lt;input type="search" name="q" aria-label="Recherche" /&gt;
&nbsp;&nbsp;&nbsp; &lt;input type="submit" value="Envoyer" /&gt;
&nbsp; &lt;/p&gt;
&lt;/form&gt;</pre>
<h3 id="L'attribut_role">L'attribut <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA" title="/fr/docs/Accessibilité/ARIA/Techniques_ARIA"><code>role</code></a></h3>
<p>Ceci est l'attribut ARIA le plus important. Il vous permet de définir de l'information sémantique, compréhensible par les technologies d'assistance, pour un élément HTML donné. De nombreux rôles existent et certains sont dédiés aux blocs de formulaires.</p>
<p>ARIA essaye de mettre à disposition une sémantique qui n'existe actuellement pas dans HTML pour les blocs ainsi que pour les éléments qui existent déjà. Nous allons voir en détail comment utiliser ces rôles dans l'article&nbsp;: <a href="/fr/docs/HTML/Formulaires/Comment_créer_des_blocs_de_formulaires_personnalisés" title="/fr/docs/HTML/Formulaires/Comment_créer_des_blocs_de_formulaires_personnalisés">Comment créer des blocs de formulaires personnalisés</a>.</p>
<p>Les rôles pour les formulaires sont&nbsp;:</p>
<ul>
  <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_button" title="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_button">Button</a></li>
  <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox" title="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox">Checkbox</a></li>
  <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_progressbar" title="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_progressbar">Progressbar</a></li>
  <li>Radio</li>
  <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider" title="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider">Slider</a></li>
  <li>Spinbutton</li>
  <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_textbox" title="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_textbox">textbox</a></li>
</ul>
<p>Il faut noter l'existence de quelque chose appelé les rôles composites (composite roles)&nbsp;:</p>
<ul>
  <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utilsier_le_role_listbox" title="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utilsier_le_role_listbox">Listbox</a></li>
  <li>Radiogroup</li>
</ul>
<p>Si ces rôles sont extrêment utiles, sachez qu'il en <a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA" title="/fr/docs/Accessibilité/ARIA/Techniques_ARIA">existe plus</a>. ARIA est une specification très vaste. Vous plonger dedans peut vous aider à améliorer l'accessibilité bien au-delà du domaine des formulaires HTML.</p>
<h2 id="Conclusion">Conclusion</h2>
<p>Vous avez désormais toutes les connaissances pour structurer vos formulaires HTML de manière convenable. L'article suivant s'intéresse aux détails d'implémentation et aux attentes fonctionnelles&nbsp;: <a href="/fr/docs/HTML/Formulaires/Les_blocs_de_formulaires_natifs" title="/fr/docs/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les blocs de formulaires natifs</a>.</p>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<ul>
  <li>En anglais&nbsp;: <a href="http://www.alistapart.com/articles/sensibleforms/" rel="external" title="http://www.alistapart.com/articles/sensibleforms/">A List Apart: <em>Sensible Forms: A Form Usability Checklist</em></a></li>
</ul>
Revenir à cette révision