<input> : l'élément de saisie dans un formulaire
================================================

L'élément HTML **`<input>`** est utilisé pour créer un contrôle interactif dans un formulaire web qui permet à l'utilisatrice ou l'utilisateur de saisir des données. Les saisies possibles et le comportement de l'élément `<input>` dépendent fortement de la valeur indiquée dans son attribut `type` et de ses autres attributs. Il existe différents contrôles pour la saisie, qui dépendent de l'appareil utilisé et de l'agent utilisateur.

Exemple interactif
------------------

Les différents types de champs `<input>`
----------------------------------------

La façon dont un élément `<input>` fonctionne dépend grandement de la valeur de son attribut `type`. Aussi, pour chacun de ces types, on aura une page de référence dédiée. Par défaut, lorsque l'attribut `type` n'est pas présent, il aura la valeur implicite `text`.



| Type | Description | Exemple simple |
| --- | --- | --- |
| `button` | Un bouton sans comportement défini qui affiche la valeur de l'attribut `value` qui est vide par défaut. | 
```
<input type="button" name="button" value="Button" />
```
 |
| `checkbox` | Une case à cocher qui permet de sélectionner/désélectionner une valeur. | 
```
<input type="checkbox" name="checkbox"/>
```
 |
| `color` | Un contrôle qui permet de définir une couleur, cela ouvre un sélecteur de couleur dans les navigateurs qui le prennent en charge. | 
```
<input type="color" name="color"/>
```
 |
| `date` | Un contrôle qui permet de saisir une date (composé d'un jour, d'un mois et d'une année mais sans heure), cela ouvre un sélecteur de date ou des roues numériques pour la sélection du jour/mois/année dans les navigateurs qui le prennent en charge. | 
```
<input type="date" name="date"/>
```
 |
| `datetime-local` | Un contrôle qui permet de saisir une date et une heure (sans fuseau horaire), cela ouvre un sélecteur de date ou des roues numériques pour la sélection de la date et de l'heure dans les navigateurs qui le prennent en charge. | 
```
<input type="datetime-local" name="datetime-local"/>
```
 |
| `email` | Un champ qui permet de saisir une adresse électronique, il ressemble à un champ de type `text`, mais possède des fonctionnalités de validation et l'adaptation du clavier pour les navigateurs et appareils qui ont des claviers dynamiques. | 
```
<input type="email" name="email"/>
```
 |
| `file` | Un contrôle qui permet de sélectionner un fichier. L'attribut `accept` peut être utilisé pour définir les types de fichiers qui peuvent être sélectionnés. | 
```
<input type="file" accept="image/\*, text/\*" name="file"/>
```
 |
| `hidden` | Un contrôle qui n'est pas affiché mais dont la valeur est envoyée au serveur. Il y a un exemple dans la colonne à côté, mais il est caché ! | 
```
<input id="userId" name="userId" type="hidden" value="abc123">
```
 |
| `image` | Un bouton graphique d'envoi du formulaire. L'attribut `src` doit être défini avec la source de l'image et l'attribut `alt` doit être défini avec le texte alternatif si l'image est absente. | 
```
<input type="image" name="image" src="" alt="image input"/>
```
 |
| `month` | Un contrôle qui permet de saisir un mois et une année (sans fuseau horaire). | 
```
<input type="month" name="month"/>
```
 |
| `number` | Un contrôle qui permet de saisir un nombre, affichant des curseurs pour augmenter/réduire la valeur et disposant d'une validation par défaut lorsqu'elle est prise en charge. Un clavier numérique est affiché pour certains appareils avec des claviers dynamiques. | 
```
<input type="number" name="number"/>
```
 |
| `password` | Un champ texte sur une seule ligne dont la valeur est masquée et qui affichera une alerte si le site n'est pas sécurisé. | 
```
<input type="password" name="password"/>
```
 |
| `radio` | Un bouton radio qui permet de sélectionner une seule valeur parmi un groupe de différentes valeurs portant le même attribut `name`. | 
```
<input type="radio" name="radio"/>
```
 |
| `range` | Un contrôle qui permet de saisir un nombre dont la valeur exacte n'est pas importante. Le contrôle qui s'affiche est une jauge horizontale avec la valeur par défaut placée au milieu. On l'utilise avec les attributs `min` et `max` pour définir un intervalle des valeurs acceptables. | 
```
<input type="range" name="range" min="0" max="25"/>
```
 |
| `reset` | Un bouton qui réinitialise le contenu du formulaire avec les valeurs par défaut. Ce type d'élément n'est pas recommandé. | 
```
<input type="reset" name="reset"/>
```
 |
| `search` | Un champ texte sur une ligne pour des termes de recherche. Les sauts de ligne sont automatiquement retirés. Le contrôle peut disposer d'une icône permettant de réinitialiser le champ. Une icône de recherche est affichée à la place de la touche `Entrée`/ pour certains appareils avec des claviers dynamiques. | 
```
<input type="search" name="search"/>
```
 |
| `submit` | Un bouton qui envoie le formulaire. | 
```
<input type="submit" name="submit"/>
```
 |
| `tel` | Un contrôle pour saisir un numéro de téléphone, qui affiche un clavier téléphonique pour certains appareils avec des claviers dynamiques. | 
```
<input type="tel" name="tel"/>
```
 |
| `text` | La valeur par défaut de `type`. Un champ texte sur une seule ligne. Les sauts de ligne sont automatiquement retirés. | 
```
<input type="text" name="text"/>
```
 |
| `time` | Un contrôle pour saisir une valeur temporelle sans fuseau horaire. | 
```
<input type="time" name="time"/>
```
 |
| `url` | Un champ permettant de saisir une URL. Ce contrôle ressemble à un champ de type `text`, mais dispose de paramètres de validation et d'un clavier adapté pour les navigateurs et appareils qui le prennent en charge et qui ont un clavier dynamique. | 
```
<input type="url" name="url"/>
```
 |
| `week` | Un contrôle permettant de saisir une date représentée par un numéro de semaine et une année (sans indication de fuseau horaire). | 
```
<input type="week" name="week"/>
```
 |
| Valeurs obsolètes |
| `datetime` | 
Obsolète
 Un contrôle pour saisir une date et une heure selon un fuseau horaire UTC. | 
```
<input type="datetime" name="datetime"/>
```
 |

Attributs
---------

L'élément `<input>` est l'un des éléments HTML les plus complexes et puissants en raison de ses attributs et notamment de `type`, le plus important. Chaque élément `<input>`, quel que soit son type, étant basé sur l'interface DOM `HTMLInputElement`, ils partagent tous, techniquement, les mêmes attributs. Toutefois, certains attributs ne fonctionnent que pour certains types de champs et certains attributs fonctionnent spécifiquement selon le type de champ.

Dans cette section, nous verrons un tableau qui liste l'ensemble des attributs avec une rapide description. Ce tableau est suivi d'une liste plus détaillée de chaque attribut et des types auxquels ils sont associés. Les attributs communs à tous les types sont détaillés dans cet article, ceux qui sont uniques à certains types ou qui ont un comportement spécifique pour un type donné sont documentés sur les pages des types respectifs.

Sur cette page, vous trouverez des informations sur les attributs communs à l'ensemble des types d'éléments `<input>` ainsi que la description de quelques attributs notables.

Les éléments `<input>` peuvent utiliser les attributs universels et les attributs suivants :

| Attribut | Type(s) | Description |
| --- | --- | --- |
| `accept` | `file` | Une indication quant au type de fichier attendu pour l'*upload* |
| `alt` | `image` | Un texte alternatif à l'image, nécessaire pour une accessibilité correcte |
| `autocapitalize` | tous sauf `url`, `email` et `password` | Contrôle la mise en majuscule automatique du text saisie. |
| `autocomplete` | tous sauf `checkbox`, `radio` et les boutons | Une indication pour le remplissage automatique du formulaire |
| `capture` | `file` | La méthode de capture du média pour l'upload du fichier |
| `checked` | `radio`, `checkbox` | Indique si l'option est sélectionnée ou si la case est cochée |
| `dirname` | `hidden`, `text`, `search`, `url`, `tel`, `email` | Le nom du champ de formulaire à utiliser pour envoyer le sens d'écriture de l'élément à l'envoi du formulaire |
| `disabled` | tous | Indique si le contrôle est désactivé |
| `form` | tous | Associe un contrôle à un élément de formulaire |
| `formaction` | `image`, `submit` | L'URL à utiliser pour l'envoi du formulaire |
| `formenctype` | `image`, `submit` | L'encodage des données à utiliser pour l'envoi du formulaire |
| `formmethod` | `image`, `submit` | La méthode HTTP à utiliser pour envoyer le formulaire |
| `formnovalidate` | `image`, `submit` | Surcharge la validation du contrôle dictée par le formulaire pour l'envoi de ce dernier |
| `formtarget` | `image`, `submit` | Le contexte de navigation à utiliser pour l'envoi du formulaire |
| `height` | `image` | Analogue à l'attribut `height` de l'élément `<img>`, la hauteur de l'image |
| `list` | tous sauf `hidden`, `password`, `checkbox`, `radio` et les boutons | La valeur de l'attribut `id` de l'élément `<datalist>` fournissant les options d'autocomplétion |
| `max` | `date`, `month`, `week`, `time`, `datetime-local`, `number`, `range` | La valeur maximale |
| `maxlength` | `text`, `search`, `url`, `tel`, `email`, `password` | La longueur maximale (en nombre de caractères) de l'attribut `value` |
| `min` | `date`, `month`, `week`, `time`, `datetime-local`, `number`, `range` | La valeur minimale |
| `minlength` | `text`, `search`, `url`, `tel`, `email`, `password` | La longueur minimale (en nombre de caractères) de l'attribut `value` |
| `multiple` | `email`, `file` | Un booléen indiquant si plusieurs valeurs sont acceptées |
| `name` | tous | Le nom associé au contrôle et qui est envoyé avec le formulaire associé à la valeur sous la forme d'une paire nom/valeur |
| `pattern` | `text`, `search`, `url`, `tel`, `email`, `password` | Un motif que la valeur doit respecter afin d'être valide |
| `placeholder` | `text`, `search`, `url`, `tel`, `email`, `password`, `number` | Un texte qui apparaît dans le contrôle lorsqu'aucune valeur n'y est écrite |
| `popovertarget` | `button` | Définit un `<input type="button">` en tant que contrôle pour un élément *popover* |
| `popovertargetaction` | `button` | Définit l'action que le *popover* va devoir accomplir |
| `readonly` | tous sauf `hidden`, `range`, `color`, `checkbox`, `radio` et les boutons | Un booléen indiquant que la valeur n'est pas éditable |
| `required` | tous sauf `hidden`, `range`, `color` et les boutons | Un booléen indiquant que la valeur est requise ou que le contrôle doit être coché avant de pouvoir envoyer le formulaire |
| `size` | `text`, `search`, `url`, `tel`, `email`, `password` | La taille du contrôle |
| `src` | `image` | Analogue à l'attribut `src` de l'élément `<img>`, indique l'emplacement de l'image |
| `step` | `date`, `month`, `week`, `time`, `datetime-local`, `number`, `range` | Un incrément pour les valeurs valides |
| `type` | tous | Le type de contrôle de formulaire |
| `value` | tous sauf `image` | La valeur initiale du contrôle |
| `width` | `image` | Analogue à l'attribut `width` de l'élément `<img>`, la largeur de l'image |

Certains attributs non-standard supplémentaires sont listés après les descriptions des attributs standard.

### Attributs individuels

`accept`

Uniquement valide pour le type `file`, cet attribut définit les types de fichiers qui peuvent être sélectionnés. Voir la page détaillée sur `<input type="file">`.

`alt`

Uniquement valide pour le type `image`, cet attribut fournit un texte alternatif à l'image qui est affiché lorsque l'attribut `src` de l'image est absent ou que le chargement de l'image a échoué. Voir la page détaillée sur `<input type="image">`.

`autocapitalize`

Contrôle si le texte saisi doit être automatiquement mis en majuscule et, le cas échéant, de quelle manière. Voir la page de l'attribut universel `autocapitalize` pour plus d'informations.

`autocomplete`

**Cet attribut n'est pas booléen !** Il prend comme valeur une chaîne de caractères dont les valeurs sont séparées par des espaces qui décrivent, le cas échéant, le type de fonctionnalité à fournir pour l'autocomplétion du champ. Généralement, l'implémentation de l'autocomplétion repose sur les valeurs précédemment saisies dans le même champ, mais le navigateur peut implémenter une forme d'autocomplétion plus avancée (par exemple intégrer la liste des contacts connue de l'appareil pour autocompléter les champs `email`). Voir la page sur cet attribut pour les valeurs autorisées. Cet attribut est valide pour les types de champ `hidden`, `text`, `search`, `url`, `tel`, `email`, `date`, `month`, `week`, `time`, `datetime-local`, `number`, `range`, `color`, et `password`. Il n'a pas d'effet pour les types de champs qui ne renvoient pas de données numériques ou text et est donc valide pour tous les types de champs à l'exception de `checkbox`, `radio`, `file`, ou des types de bouton. Voir la page de l'attribut HTML `autocomplete` pour plus d'informations, y compris sur la sécurité des mots de passe et sur la façon dont `autocomplete` s'applique légèrement différemment pour les champs de type `hidden`.

`autofocus`

Un attribut booléen qui, s'il est présent, indique que le contrôle devrait automatiquement recevoir le focus lorsque le chargement de la page est terminé (ou lorsque l'élément `<dialog>` qui contient ce contrôle a été affiché).

**Note :** Un élément avec l'attribut `autofocus` pourra recevoir le focus avant le déclenchement de l'évènement `DOMContentLoaded`.

Il ne peut pas y avoir plus d'un élément du document avec l'attribut `autofocus`. Si l'attribut est placé sur plus d'un élément, c'est le premier qui reçoit le focus.

L'attribut `autofocus` ne peut pas être utilisé sur les champs de type `hidden`, car ces derniers sont masqués et ne peuvent pas recevoir le focus.

**Attention :** Affecter le focus de façon automatique peut être source de confusion pour les personnes qui utilisent des lecteurs d'écran ou qui ont des difficultés cognitives. En effet, avec l'affectation d'`autofocus`, les lecteurs d'écran « téléportent » la personne jusqu'au contrôle, sans avertissement préalable.

On fera particulièrement attention à l'accessibilité en appliquant l'attribut `autofocus`. Le focus automatique peut entraîner le défilement de la page au chargement et faire apparaître le clavier logiciel sur certains appareils tactiles. Bien qu'un lecteur d'écran puisse annoncer le libellé du contrôle qui reçoit le focus, il n'annoncera rien avant le libellé. De même, une personne sans déficience visuelle sur un petit écran manquera certainement le contexte créé par le contenu qui précède.

`capture`

Cet attribut, introduit avec la spécification HTML *Media Capture*, est uniquement valide pour le type `file`. Il définit quel appareil (micro, caméra, appareil photo) qui devrait être utilisé pour capturer un nouveau fichier à uploader. Voir la page détaillée sur `<input type="file">`.

`checked`

Cet attribut booléen est valide pour les types `radio` et `checkbox`. Lorsqu'il est présent sur un contrôle de type `radio`, il indique que ce bouton radio sera celui sélectionné parmi le groupe de boutons radio qui partagent le même nom. Lorsqu'il est présent sur un contrôle de type `checkbox`, il indique que la case est cochée par défaut au chargement de la page. Attention, il *n'indique pas* que la case est actuellement cochée, si l'état de la case à cocher change, l'attribut ne reflète pas ce changement (seul l'attribut IDL `HTMLInputElement.checked` est mis à jour).

**Note :** À la différence des autres contrôles de saisie, la valeur d'une case à cocher ou d'un bouton radio est uniquement incluse dans les données envoyées s'ils sont sélectionnés. Si c'est le cas, le nom et la valeur des contrôles sélectionnés sont envoyés.

Ainsi, si une case à cocher dont l'attribut `name` vaut `fruit` et dont l'attribut `value` vaut `cerise`, si la case est cochée, les données envoyées avec le formulaire contiendront `fruit=cerise`. Si la case à cocher n'est pas active, elle ne fera pas partie des données envoyées. Pour les cases à cocher et les boutons radio, la valeur par défaut de l'attribut `value` est `on`.

`dirname`

Cet attribut, uniquement valide pour les types `text` et `search`, permet d'envoyer également le sens d'écriture de la valeur dans le formulaire. Lorsqu'il est présent, le contrôle du formulaire enverra deux paires nom/valeur : la première composée de `name` et `value`, et la seconde composée de la valeur de `dirname` comme nom et de `ltr` ou `rtl` comme valeur, indiquée par le navigateur.


```html
<form action="page.html" method="post">
  <label
 >Fruit :
    <input type="text" name="fruit" dirname="fruit.dir" value="cerise"
 /></label>
  <input type="submit" />
</form>
<!-- page.html?fruit=cerise&fruit.dir=ltr -->
```


Lorsque le formulaire précédent est envoyé, on aura l'envoi de deux paires de clé/valeur `name`/`value` d'une part avec `fruit=cerise` et `dirname`/sens d'écriture d'autre part avec `fruit.dir=ltr`.

`disabled`

Un attribut booléen qui, lorsqu'il est présent, indique qu'il n'est pas possible d'interagir avec le champ. Les champs désactivés sont généralement affichés avec une couleur plus sombre ou une autre forme d'indication pour signifier que le champ n'est pas utilisable.

Plus précisément, les champs désactivés ne reçoivent pas les évènements `click` et ne sont pas envoyés avec le formulaire.

**Note :** Bien que cela ne soit pas nécessaire selon la spécification, par défaut, Firefox fera persister l'état désactivé obtenu dynamiquement pour un champ `<input>` même après des rechargements de la page. C'est l'attribut `autocomplete` qui contrôle cette fonctionnalité.

`form`

Une chaîne de caractères qui indique l'élément `<form>` auquel le contrôle est associé (on parle de son **formulaire propriétaire**). La valeur de la chaîne de caractères, si elle est présente, doit correspondre à la valeur d'un identifiant (l'attribut `id`) d'un élément `<form>` du même document. Si cet attribut n'est pas défini, l'élément `<input>` est associé au formulaire qui le contient le plus proche, s'il existe.

L'attribut `form` permet ainsi de placer un champ n'importe où dans le document tout en l'associant à un formulaire du document situé autre part.

**Note :** Un champ peut uniquement être associé avec un seul formulaire.

`formaction`

Uniquement valide pour les types `image` et `submit`. Voir la page détaillée sur `<input type="submit">`.

`formenctype`

Uniquement valide pour les types `image` et `submit`. Voir la page détaillée sur `<input type="submit">`.

`formmethod`

Uniquement valide pour les types `image` et `submit`. Voir la page détaillée sur `<input type="submit">`.

`formnovalidate`

Uniquement valide pour les types `image` et `submit`. Voir la page détaillée sur `<input type="submit">`.

`formtarget`

Uniquement valide pour les types `image` et `submit`. Voir la page détaillée sur `<input type="submit">`.

`height`

Uniquement valide pour le type `image`, cet attribut indique la hauteur de l'image à afficher sur un bouton d'envoi graphique. Voir la page détaillée sur `<input type="image">`.

`id`

Un attribut universel, valide pour tous les éléments (y compris `<input>` quel que soit le type), qui définit un identifiant unique au sein du document Son but est de pouvoir cibler un élément précis (pour la mise en forme ou pour créer un lien vers cet élément par exemple). C'est la valeur de cet attribut qui sera utilisée comme valeur de l'attribut `for` d'un élément `<label>` pour relier le libellé au champ correspondant. Voir `<label>`.

`inputmode`

Un attribut universel, valide pour tous les éléments, qui fournit une indication au navigateur quant au type de clavier virtuel à utiliser pour l'édition de l'élément ou de son contenu. Les valeurs possibles sont `none`, `text`, `tel`, `url`, `email`, `numeric`, `decimal`, et `search`.

`list`

La valeur fournie à l'attribut `list` doit être l'identifiant (l'attribut `id`) d'un élément `<datalist>` situé dans le même document. L'élément `<datalist>` fournit alors une liste de valeurs prédéfinies qui peuvent être suggérées pour la saisie dans le champ. Toute valeur de cette liste qui n'est pas compatible avec l'attribut `type` ne sera pas incluse dans les suggestions. Les valeurs ainsi fournies sont des suggestions et pas des contraintes, une personne pourra tout à fait choisir parmi cette liste ou fournir une valeur différente.

Cet attribut est valide pour les champs de type `text`, `search`, `url`, `tel`, `email`, `date`, `month`, `week`, `time`, `datetime-local`, `number`, `range`, et `color`.

Selon la spécification, l'attribut `list` n'est pas pris en charge pour les types `hidden`, `password`, `checkbox`, `radio`, `file`, et les types de bouton.

Selon le navigateur, on pourra avoir une palette de couleurs spécifiques en suggestion, des marques présentes sur la piste d'un curseur, voire un contrôle s'ouvrant comme un élément `<select>` et qui permet de saisir des valeurs en dehors des suggestions. Voir le tableau de compatibilité des navigateurs pour les autres types de champ.

Voir également la page de référence pour l'élément `<datalist>`.

`max`

Cet attribut est valide pour les types `date`, `month`, `week`, `time`, `datetime-local`, `number`, et `range`, il définit la plus grande valeur possible de l'intervalle des valeurs autorisées. Si la valeur saisie dans l'élément dépasse la valeur de cet attribut, l'élément échouera à la validation des contraintes (en-US). Si la valeur de l'attribut `max` n'est pas un nombre, l'élément n'a pas de valeur maximale.

Il existe un cas particulier pour les types de données périodiques (comme les dates ou les heures), où la valeur de `max` peut être inférieure à celle de `min`, pour avoir par exemple un intervalle de temps entre 10 heures du soir et 4 heures du matin.

`maxlength`

Cet attribut est valide pour les types `text`, `search`, `url`, `tel`, `email`, et `password`, il définit le nombre maximal de caractères (exprimé en nombre de codets UTF-16) qu'il est possible de saisir dans le champ. La valeur de cet attribut doit être un entier positif. Si aucune valeur de `maxlength` n'est indiquée ou qu'une valeur invalide est fournie, le champ n'a pas de longueur maximale. La valeur de cet attribut doit être supérieure ou égale à celle de `minlength`.

Le champ échouera à la validation des contraintes (en-US) si longueur du texte saisi est supérieure à `maxlength` comme nombre de codets UTF-16. Par défaut, les navigateurs empêchent de saisir plus de caractères que ce qui est permis par l'attribut `maxlength`. Voir la validation côté client pour plus d'information.

`min`

Cet attribut est valide pour les types `date`, `month`, `week`, `time`, `datetime-local`, `number`, et `range`, il définit la valeur la plus faible de l'intervalle des valeurs autorisées. Si la valeur saisie dans l'élément est inférieure à la valeur de cet attribut, l'élément échouera à la validation des contraintes (en-US). Si la valeur de l'attribut `min` n'est pas un nombre, l'élément n'a pas de valeur minimale.

Cette valeur doit être inférieure ou égale à la valeur fournie par l'attribut `max`. Si l'attribut `min` est présent mais sans valeur ou avec une valeur invalide, aucune contrainte de minimum n'est appliquée. Si l'attribut `min` est valide et que la valeur saisie dans le contrôle est inférieure à celle de cet attribut, la validation des contraintes empêchera l'envoi du formulaire. Voir la validation côté client pour plus d'information.

Il existe un cas particulier pour les types de données périodiques (comme les dates ou les heures), où la valeur de `max` peut être inférieure à celle de `min`, pour avoir par exemple un intervalle de temps entre 10 heures du soir et 4 heures du matin.

`minlength`

Cet attribut est valide pour les types `text`, `search`, `url`, `tel`, `email`, et `password`, il définit le nombre minimal de caractères (exprimé en nombre de codets UTF-16) qu'il est possible de saisir dans le champ. La valeur de cet attribut doit être un entier positif inférieur ou égal à celle de `maxlength`. Si cet attribut est absent ou qu'une valeur invalide est indiquée, le champ n'aura pas de longueur minimale.

Le champ échouera à la validation des contraintes (en-US) si longueur du texte saisi est inférieure à `minlength` comme nombre de codets UTF-16. Voir la validation côté client pour plus d'information.

`multiple`

Un attribut booléen qui, lorsqu'il est présent, permet de saisir plusieurs adresses électroniques séparées par des virgules ou de sélectionner plusieurs fichiers si le contrôle est de type `file`. Voir les page détaillées sur `<input type="file">` et `<input type="email">`.

`name`

Une chaîne de caractères qui fourni le nom associé au contrôle. Le nom est envoyé avec la valeur du contrôle lors de l'envoi du formulaire.

Cet attribut n'est pas strictement obligatoire mais devrait être utilisé dans la grande majorité des cas. Si un champ n'a pas d'attribut `name` ou que celui-ci est vide, la valeur du champ n'est pas envoyée avec le formulaire (à l'instar des contrôles désactivés, des boutons radio ou cases décochés, et des boutons de réinitialisation).

Il existe deux cas spéciaux :

* `_charset_` : Si cette valeur est utilisée comme nom pour un élément `<input>` de type `hidden`, la valeur du champ est automatiquement renseignée par l'agent utilisateur et porte l'encodage de caractères utilisé pour l'envoi du formulaire.
* `isindex` : Pour des raisons historiques, le nom `isindex` n'est pas autorisé.

L'attribut `name` possède un comportement particulier pour les boutons radio.

En effet, seul un bouton radio, parmi le groupe de boutons qui portent le même nom, peut être sélectionné à un moment donné. Sélectionner un des boutons radio du groupe déclenchera automatiquement la désélection de tout bouton du groupe précédemment sélectionné. C'est la valeur du bouton radio sélectionné qui est envoyé avec le nom lors de l'envoi du formulaire.

Lors de la navigation au clavier avec les tabulations, si un bouton est sélectionné, c'est celui-ci qui recevra le focus. Même si les boutons ne sont pas regroupés selon la source HTML, si un bouton du groupe est sélectionné, naviguer au clavier jusqu'à ce groupe passera tous les boutons non sélectionnés jusqu'au bouton sélectionné. Si aucun bouton du groupe n'est sélectionné, le groupe reçoit le focus lorsque le premier bouton du groupe est atteint au clavier.

Une fois le focus obtenu sur le groupe, on pourra utiliser les flèches du clavier pour naviguer entre les boutons radio du même groupe (c'est-à-dire partageant le même nom/`name`, et pas nécessairement groupés au sein de la source HTML).

Lorsqu'un élément `<input>` possède un attribut `name`, ce nom devient une propriété de l'objet `HTMLFormElement.elements` associé au formulaire propriétaire. Ainsi, si on a un champ dont le nom est `invite` et un autre dont le nom est `taille-chat`, on pourra manipuler les données du formulaire en JavaScript comme suit :


```js
let form = document.querySelector("form");

let nomInvite = form.elements.invite;
let tailleChat = form.elements["taille-chat"];
```


À l'exécution de ce code, `nomInvite` correspondra à l'objet `HTMLInputElement` associé au champ `invite`, et de même l'objet `tailleChat` correspondra à l'objet du DOM associé au champ avec le nom `taille-chat`.

**Attention :** On évitera de donner aux éléments de formulaire un nom qui correspond à une propriété native du DOM. Cela surchargerait la propriété ou la méthode native pour pointer vers le champ correspondant.

`pattern`

Valie pour les champs de type `text`, `search`, `url`, `tel`, `email`, cet attribut est une expression rationnelle que la valeur du champ doit respecter afin de valider les contraintes (en-US). Cette valeur doit être une expression rationnelle JavaScript valide (voir `RegExp`) telle que documentée dans le guide sur les expressions rationnelles. Le marqueur `'u'` est implicitement appliqué à la compilation de l'expression et le motif est donc traité comme une séquence de codets Unicode et non ASCII. Il ne faut pas encadrer le motif de barres obliques.

Si l'attribut `pattern` est présent mais sans valeur ou que celle-ci est valide, aucune expression rationnelle n'est appliquée et l'attribut est ignoré. Si la valeur de `pattern` est valide et que la valeur du champ ne respecte pas le motif, le champ échouera à la validation des contraintes (en-US) et empêchera l'envoi du formulaire.

**Note :** En utilisant l'attribut `pattern`, il faut également informer l'utilisatrice ou l'utilisateur quant au format attendu, en ajoutant un texte explicatif à proximité. On peut aussi inclure un attribut `title` pour expliquer les contraintes à respecter : la plupart des navigateurs afficheront le titre sous la forme d'une bulle d'information. Attention, une explication visible est nécessaire pour une accessibilité correcte, la bulle d'information fournie par `title` n'est qu'une amélioration secondaire.

Voir la validation côté client pour plus d'information.

`placeholder`

Valide pour les champs de type `text`, `search`, `url`, `tel`, `email`, `password`, et `number`, cet attribut est une chaîne de caractères qui fournit une brève indication quant au type d'information attendu dans le champ. Sa valeur devrait être un mot ou une courte phrase qui indique le type de données attendu plutôt qu'une explication ou une consigne. Le texte de cet attribut *ne doit pas* inclure de retour chariot ou de saut de ligne. Ainsi, si un champ est destiné à la saisie d'un prénom et que le libellé est « Prénom », une valeur appropriée pour cet attribut pourra être `"ex. Mustafa"`.

**Note :** Sur le plan sémantique, l'attribut `placeholder` n'est pas aussi utile que d'autres méthodes pour expliquer le formulaire. Il peut aussi causer certains problèmes inattendus avec le contenu. Voir les libellés pour plus d'informations.

`popovertarget`

Transforme un élément `<input type="button">` en un contrôleur de *popover*. Il prend comme valeur l'`id` de l'élément *popover* à contrôler. Voir la page de l'API Popover pour plus d'informations.

`popovertargetaction`

Définit l'action à accomplir sur l'élément *popover* contrôlé par l'élément `<input type="button">`. Les valeurs possibles sont :

`"hide"`

Le bouton va masquer un *popover* affiché. Si vous essayez de masquer un *popover* déjà masqué, aucune action ne sera effectuée.

`"show"`

Le bouton va afficher un *popover* masqué. Si vous essayez d'afficher un *popover* déjà affiché, aucune action ne sera effectuée.

`"toggle"`

Le bouton va basculer un *popover* entre les états affiché et masqué. Si le *popover* est masqué, il sera affiché ; si le *popover* est affiché, il sera masqué. Si `popovertargetaction` est omis, `"toggle"` est l'action par défaut qui sera effectuée par le bouton de contrôle.


`readonly`

Un attribut booléen qui, lorsqu'il est présent, indique qu'il ne devrait pas être possible d'éditer la valeur du champ. Cet attribut est pris en charge par les types de contrôle `text`, `search`, `url`, `tel`, `email`, `date`, `month`, `week`, `time`, `datetime-local`, `number`, et `password`.

Voir l'attribut HTML `readonly` pour plus d'informations.

`required`

Un attribut booléen qui, lorsqu'il est présent, indique qu'une valeur doit être saisie avant que le formulaire puisse être envoyé. Cet attribut est pris en charge pour les types de contrôle `text`, `search`, `url`, `tel`, `email`, `date`, `month`, `week`, `time`, `datetime-local`, `number`, `password`, `checkbox`, `radio`, et `file`.

Voir la validation côté client et l'attribut HTML `required` pour plus d'informations.

`size`

Cet attribut est uniquement valide pour les types de contrôle `email`, `password`, `tel`, `url` et `text`. Il indique la largeur visible pour le contrôle. D'une certaine façon, il crée un résultat analogue à l'application de la propriété CSS `width`. L'unité de cette valeur dépend du type de contrôle. Pour les champs de type `password` et `text`, il s'agit du nombre de caractères (équivalent à l'unité `em`) et la valeur par défaut vaut `20`. Pour les autres types de champs, la valeur est exprimée en pixels. La largeur définie avec la feuille de style CSS aura la priorité sur cet attribut.

`src`

Cet attribut est uniquement valide pour le type `image` et indique l'URL du fichier de l'image à afficher sur le bouton. Voir `<input type="image">` pour plus d'informations.

`step`

Cet attribut est valide pour les contrôles de type numériques et temporels (`date`, `month`, `week`, `time`, `datetime-local`, `number`, et `range`). L'attribut `step` est un nombre qui définit la granularité de la valeur.

S'il n'est pas explicitement inclus :

* Pour les types `number` et `range`, sa valeur par défaut sera 1.
* Pour les types temporels, la valeur par défaut de `step` dépend du type. Voir les pages individuelles pour plus de détails : `date`, `datetime-local`, `month`, `time`, et `week`.

La valeur de cet attribut doit être un nombre positif (entier ou décimal) ou la valeur spéciale `any` (cette dernière indiquant qu'il n'y a pas de contrainte de granularité et que toute valeur est autorisée (les contraintes imposées par `min` et `max` s'appliquent toujours)).

Si `any` n'est pas utilisé explicitement, les valeurs valides du champ pour les types temporels, `number`, et `range` seront celles construites depuis le minimum (`min`) en ajoutant l'incrément une ou plusieurs fois jusqu'à atteindre le maximum (`max`), si ce dernier est défini.

Ainsi, si on a `<input type="number" min="10" step="2">`, tout entier pair, supérieur ou égal à `10` sera valide. Si `step` est absent, par exemple avec `<input type="number">`, tous les nombres entiers seront valides mais les nombres décimaux (comme `4.2`) seront invalides, car la valeur par défaut de `step` vaut `1` pour le type `number`. Afin que `4.2` soit valide, on devra utiliser la valeur `any`, ou `0.1`, ou `0.2` pour l'attribut `step`, ou encore une valeur de `min` dont la partie fractionnaire vaut `.2`, par exemple `<input type="number" min="-5.2">`

**Note :** Lorsque la donnée saisie ne respecte pas l'incrément, la valeur est considérée comme invalide pour la validation des contraintes et l'élément sera ciblé par la pseudo-classe `:invalid`.

Voir la validation côté client pour plus d'information.

`tabindex`

Un attribut universel, valide pour tous les éléments, y compris tous les types de `<input>`. Sa valeur est un entier qui indique si l'élément peut prendre le focus et s'il devrait participer à la navigation séquentielle au clavier. Comme tous les types d'élément `<input>`, sauf ceux masqués, peuvent prendre le focus, cet attribut ne devrait pas être utilisé sur les contrôles de formulaire, car cela nécessiterait de gérer l'ordre du focus pour tous les éléments du document, au risque de dégradé l'utilisabilité et l'accessibilité si cela était fait de façon incorrecte.

`title`

Un attribut universel, valide pour tous les éléments, y compris tous les types de `<input>`. Sa valeur est un texte fournissant des informations à propos de l'élément auquel il appartient. Une telle information est généralement (mais pas nécessairement) affichée sous la forme d'une bulle d'information. `title` ne devrait pas être utilisé comme méthode principale pour expliquer le rôle d'un contrôle de formulaire. Il faut plutôt utiliser l'élément `<label>` avec un attribut `for` dont la valeur correspond à la valeur de l'attribut `id` du champ de formulaire. Voir la section sur les libellés ci-après.

`type`

Une chaîne de caractères qui indique le type de contrôle à afficher. On utilisera par exemple la valeur `checkbox` pour afficher une case à cocher. Si cet attribut est absent (ou qu'une valeur inconnue est utilisée), ce sera un champ de type `text` qui sera utilisé, permettant de saisir un texte dans le contrôle de formulaire.

Les valeurs autorisées pour cet attribut sont listées dans la section sur les types de champ ci-avant.

`value`

La valeur du contrôle. Lorsque cette valeur est fournie dans le document HTML, il s'agit de la valeur initiale, qui peut ensuite être récupérée et éventuellement modifiée avec JavaScript via la propriété du DOM correspondante : `HTMLInputElement.value`. Cet attribut est toujours optionnel en théorie, mais peut être considéré comme obligatoire en pratique pour les types de champ `checkbox`, `radio`, et `hidden`.

`width`

Cet attribut est uniquement valide pour le type de contrôle `image`, où il exprime la largeur du fichier d'image à afficher sur le bouton graphique. Voir `<input type="image">` pour plus d'informations.

### Attributs non-standards

Les attributs qui suivent ne sont pas standard et sont disponibles dans certains navigateurs uniquement. En règle général, il faut éviter de les utiliser.

| Attribut | Description |
| --- | --- |
| `autocorrect` | Une chaîne de caractères, `on` ou `off`, qui indique si la correction automatique est activée. **Uniquement dans Safari.** |
| `incremental` | Indique s'il faut envoyer ou non de multiples évènements `search` (en-US) pour mettre à jour les résultats de recherche de façon dynamique lorsque la personne est toujours en train d'éditer la valeur du champ. **Uniquement dans WebKit et Blink (Safari, Chrome, Opera, etc.).** |
| `mozactionhint` | Une chaîne de caractères qui indique le type d'action qui sera réalisée lorsque la personne appuiera sur la touche `Entrée` ou `Retour` lors de l'édition du champ. Il est utilisé pour déterminer le libellé pertinent à utiliser sur un clavier virtuel.
**Obsolète : il faut utiliser `enterkeyhint` à la place.** |
| `orient` | Définit l'orientation de la piste pour le curseur. **Uniquement dans Firefox**. |
| `results` | Le nombre maximum de résultats qui devraient être affichés dans une liste déroulante affichant les recherches précédentes. **Uniquement dans Safari.** |
| `webkitdirectory` | Un booléen indiquant s'il est possible de choisir un répertoire (ou plusieurs répertoires si `multiple` est également présent). |

`autocorrect` 
Non-standard

(Safari uniquement). Une chaîne de caractères qui indique si la correction automatique doit être activée lors de l'édition manuelle du champ. Les valeurs autorisées pour cet attribut sont :

`on`

La correction automatique des fautes et le traitement des substitutions de texte (si elles sont configurées) sont activées.

`off`

La correction automatique et les substitutions de texte sont désactivées.


`incremental` 
Non-standard

Cet attribut booléen est une extension de WebKit et Blink (présent donc dans les navigateurs Safari, Opera, Chrome, etc.) qui indique, s'il est présent, que le champ doit être traité comme un champ de recherche dynamique. Lorsque la personne édite la valeur du champ, l'agent utilisateur envoie des évènements `search` (en-US) à l'objet `HTMLInputElement` qui représente le champ de recherche. Cela permet de gérer, via du code, la mise à jour des résultats de recherche en temps réel lors de l'édition.

Si `incremental` n'est pas indiqué, l'évènement `search` (en-US) est uniquement envoyé lorsque la personne initie explicitement une recherche, c'est-à-dire en appuyant sur la touche `Entrée` ou `Retour` lors de l'édition du champ.

L'évènement `search` est soumis à des limites de fréquence propres à chaque implémentation.

`orient` 
Non-standard

Semblable à la propriété CSS non-standard `-moz-orient` pour les éléments `<progress>` et `<meter>`, cet attribut définit l'orientation de la piste du curseur. Les valeurs possibles pour cet attribut sont `horizontal` (la piste est affichée horizontalement) et `vertical` (la piste est affichée verticalement).

`results` 
Non-standard

Uniquement pris en charge par Safari, cet attribut est une valeur numérique qui permet de surcharger le nombre de résultats à afficher dans la liste des suggestions de l'élément `<input>` à partir des requêtes précédentes. Sa valeur doit être un nombre positif. Si aucune valeur n'est indiquée ou qu'une valeur invalide est fournie, c'est le nombre d'options maximum par défaut du navigateur qui est utilisé.

`webkitdirectory` 
Non-standard

Un attribut booléen qui, lorsqu'il est présent, indique que seuls les répertoires peuvent être sélectionnés via le sélecteur de fichier. Voir `HTMLInputElement.webkitdirectory` (en-US) pour plus de détails et d'exemples. Bien qu'originalement implémenté uniquement par les navigateurs WebKit, `webkitdirectory` est également utilisable avec Microsoft Edge et Firefox 50 (ou ultérieur). Toutefois, malgré cette prise en charge assez large, il n'est toujours pas standard et ne devrait pas être utilisé à moins qu'il n'y ait aucune autre alternative.

Méthodes
--------

Les méthodes suivantes sont fournies par l'interface `HTMLInputElement` qui représente les éléments `<input>` dans le DOM. Les méthodes des interfaces parentes `HTMLElement`, `Element`, `Node`, et `EventTarget` sont également disponibles.

`checkValidity()`

Renvoie `true` si la valeur de l'élément respecte les conditions de validité, `false` sinon et, dans ce dernier cas, déclenche un évènement `invalid` (en-US) sur l'élément.

`reportValidity()` (en-US)

Renvoie `true` si la valeur de l'élément respecte les conditions de validité, `false` sinon et, dans ce dernier cas, déclenche un évènement `invalid` (en-US) sur l'élément et, si l'évènement n'est pas annulé, rapporte ce problème à l'utilisatrice ou l'utilisateur.

`select()` (en-US)

Sélectionne tout le contenu de l'élément `<input>` sous réserve que son contenu soit sélectionnable. Pour les éléments qui n'ont pas de contenu texte qui puisse être sélectionné (par exemple un sélecteur de couleur ou un calendrier), cette méthode n'a pas d'effet.

`setCustomValidity()` (en-US)

Définit un message particulier à afficher si la valeur de l'élément n'est pas valide.

`setRangeText()` (en-US)

Modifie le contenu de la valeur entre deux positions de caractères par une nouvelle chaîne de caractères. Un paramètre `selectMode` permet de contrôler la façon dont le contenu existant est affecté.

`setSelectionRange()` (en-US)

Sélectionne un intervalle de caractères dans un champ texte. Cette méthode n'a pas d'effet pour les champs qui ne sont pas des champs texte.

`showPicker()` (en-US)

Affiche le sélecteur fourni par le navigateur, qui s'affiche normalement quand l'élément est sélectionné. Cela permet de déclencher son affichage à partir d'un bouton ou d'une autre interaction.

`stepDown()` (en-US)

Décrémente la valeur d'un champ numérique d'un nombre indiqué d'unités (1 par défaut).

`stepUp()` (en-US)

Incrément la valeur d'un champ numérique d'un nombre indiqué d'unités (1 par défaut).

CSS
---

Les champs de formulaire sont des éléments remplacés et disposent de quelques fonctionnalités qui ne sont pas applicables aux éléments qui ne sont pas des éléments de formulaire. Certains sélecteurs CSS permettent de cibler spécifiquement les contrôles en fonction de l'interface utilisateur : ce sont les pseudo-classes d'interface utilisateur. Un élément `<input>` peut également être ciblé via son type grâce aux sélecteurs d'attribut. Certaines propriétés CSS sont également utiles pour ces éléments.

### Pseudo-classes d'interface utilisateur

Pseudo-classes pertinentes pour l'élément `<input>`| Pseudo-classe | Description |
| --- | --- |
| `:enabled` | S'applique à tout élément actif (qui peut faire l'objet d'une sélection de texte, d'un clic, d'une saisie de texte, etc.) ou accepter le focus. |
| `:disabled` | S'applique à tout élément désactivé (dont le texte ne peut pas être sélectionné, qui ne peut pas recevoir de clic ou de saisie de texte) ou qui ne peut pas recevoir le focus. |
| `:read-only` | S'applique aux éléments qui ne peuvent pas être édités par l'utilisatrice ou l'utilisateur. |
| `:read-write` | S'applique aux éléments éditables. |
| `:placeholder-shown` | S'applique aux éléments qui affichent actuellement le texte fourni par l'attribut `placeholder`, y compris les éléments `<input>` et `<textarea>` avec un attribut `placeholder` présent mais sans valeur pour le moment. |
| `:default` | S'applique aux éléments de formulaire qui sont les options par défaut parmi les groupes d'éléments associés entre eux. Correspond aux éléments `<input type="checkbox">` et `<input type="radio">` qui sont cochés/sélectionnés au chargement de la page. |
| `checked` | S'applique aux éléments `<input type="checkbox">` et `<input type="radio">` qui sont actuellement cochés (et à l'élément `<option>` sélectionné d'un élément `<select>`). |
| `:indeterminate` | S'applique aux éléments `<input type="checkbox">` dont la propriété `indeterminate` est fixée à `true` en JavaScript, aux éléments `<input type="radio">` lorsque tous les boutons radio d'un groupe sous décochés, et aux éléments `<progress>` dans un état indéterminé. |
| `:valid` | S'applique aux contrôles de formulaire concernés par les contraintes de validation et qui sont actuellement valides. |
| `:invalid` | S'applique aux contrôles de formulaire concernés par les contraintes de validation et qui sont actuellement invalides. Cible un contrôle de formulaire dont les valeurs ne respectent pas les contraintes imposées par ses attributs comme `required`, `pattern`, `step`, et `max`. |
| `:in-range` | S'applique aux champs non vides dont la valeur actuelle est située dans les limites d'intervalle définies par les attributs `min` et `max` et suit le pas décrit par l'attribut `step`. |
| `:out-of-range` | S'applique aux champs non vides dont la valeur actuelle est située en dehors des limites d'intervalle définies par les attributs `min` et `max` ou qui ne respecte pas la contrainte de granularité dictée par l'attribut `step`. |
| `:required` | S'applique aux éléments `<input>`, `<select>` ou `<textarea>` qui ont l'attribut `required`. Seuls les éléments qui peuvent effectivement être obligatoires sont ciblés. Utiliser l'attribut `required` sur un élément qui ne peut pas devneir obligatoire n'aura aucun effet. |
| `:optional` | S'applique aux éléments `<input>`, `<select>` ou `<textarea>` qui n'ont pas l'attribut `required`. Les éléments qui ne peuvent pas être obligatoires ne sont pas ciblés. |
| `:blank` | S'applique aux éléments `<input>` ou `<textarea>` qui n'ont pas de valeur actuellement. |
| `:user-invalid` | Semblable à `:invalid`, mais ne s'applique aux champs invalides qu'après une interaction utilisateur (par exemple le passage du focus, la sortie du contrôle ou une tentative d'envoi du formulaire avec le contrôle invalide). |

#### Exemple d'utilisation des pseudo-classes

On peut mettre en forme le libellé d'une case à cocher selon que la case est cochée ou non. Dans cet exemple, on adapte les propriétés `color` et `font-weight` de l'élément `<label>` situé immédiatement après une case cochée. On applique aucune mise en forme si l'élément `<input>` n'est pas coché.
```

<input id="checkboxInput" type="checkbox" />
<label for="checkboxInput">Activer/désactiver la case à cocher</label>
```



```css
input:checked + label {
  color: red;
  font-weight: bold;
}
```

### Sélecteurs d'attribut

Il est possible de cibler différents types de contrôles en fonction de la valeur de leur attribut `type` grâce aux sélecteurs d'attribut. Les sélecteurs d'attribut CSS permettent de cibler des éléments en fonction de la présence ou de la valeur d'un attribut donné.


```css
/\* Cible un champ de saisie d'un mot de passe \*/
input[type="password"] {
}

/\* Cible un contrôle de formulaire dont l'intervalle des valeurs valides est délimité par attributs \*/
input[min][max] {
}

/\* Cible un contrôle de formulaire utilisant un attribut pattern \*/
input[pattern] {
}
```

### `::placeholder`

Par défaut, l'affichage du texte de l'attribut `placeholder` se fait en transparence ou avec un gris clair. Le pseudo-élément `::placeholder` permet de cibler le texte de cet attribut et peut être mis en forme avec un sous-ensemble de propriétés CSS.


```css
::placeholder {
  color: blue;
}
```


Seul le sous-ensemble des propriétés CSS qui s'appliquent au pseudo-élément `::first-line` peuvent être utilisées dans une règle qui utilise `::placeholder` comme sélecteur.

### `appearance`

La propriété `appearance` permet d'afficher presque tous les éléments en utilisant le style natif fourni par le thème du système d'exploitation, ou de retirer ce style natif si on utilise la valeur `none`.

En théorie, on peut donc faire ressembler un élément `<div>` à un bouton radio grâce à `div {appearance: radio;}` ou faire ressembler un bouton radio à une case à cocher avec `[type="radio"] {appearance: checkbox;}`. En réalité, il s'agit de mauvaises pratiques, à éviter donc.

Utiliser `appearance: none` permettra de retirer les bordures liées à la plateforme mais pas les fonctionnalités.

### `caret-color`

`caret-color` est une propriété qui s'applique aux éléments permettant de saisir du texte et qui permet de personnaliser la couleur du curseur de saisie :

#### HTML


```html
<label for="textInput">Vous noterez le curseur rouge :</label>
<input id="textInput" class="custom" size="32" />
```


#### CSS


```css
input.custom {
  caret-color: red;
  font:
    16px "Helvetica",
    "Arial",
    "sans-serif";
}
```


#### Résultat

### `object-position` et `object-fit`

Dans certains cas (le plus souvent pour les champs non-texte et les interfaces spécialisées), l'élément `<input>` est un élément remplacé. Lorsque c'est le cas, la taille et la position de l'élément au sein de son cadre peuvent être ajustées grâce aux propriétés CSS `object-position` et `object-fit`.

### Mise en forme

Pour plus d'informations sur l'ajout de couleurs aux éléments HTML, voir :

* Appliquer des couleurs aux éléments HTML en utilisant CSS.

Voir également :

* Mettre en forme les formulaires HTML
* Mise en forme avancée des formulaires HTML
* Tableau de compatibilité des propriétés CSS pour les contrôles de formulaire.
Fonctionnalités supplémentaires
-------------------------------

### Libellés

Les libellés permettent d'associer les textes explicatifs aux éléments `<input>`. Utiliser un élément `<label>` pour fournir des informations explicatives quant à un champ de formulaire est *toujours* une bonne chose (quel que soit le sujet de mise en forme qui vient après). Ce n'est jamais une mauvaise idée que d'utiliser un élément `<label>` pour expliquer ce qui doit être saisi dans un élément `<input>` ou `<textarea>`.

#### Rattachement des libellés

Le rattachement sémantique entre les éléments `<input>` et `<label>` est utile aux outils d'assistance comme les lecteurs d'écran. En les associant grâce à l'attribut `for` des éléments `<label>`, on lie le libellé au contrôle de formulaire d'une façon qui permet aux lecteurs d'écran de décrire les champs du formulaire plus précisément.

Il ne suffit pas d'avoir un texte normal à côté de l'élément `<input>`. Pour l'utilisabilité et l'accessibilité, on associera un libellé avec `<label>` de façon implicite ou explicite :


```html
<!-- inaccessible -->
<p>Veuillez saisir votre nom : <input id="name" type="text" size="30" /></p>

<!-- libellé implicite -->
<p>
  <label
 >Veuillez saisir votre nom : <input id="name" type="text" size="30"
 /></label>
</p>

<!-- libellé explicite -->
<p>
  <label for="name">Veuillez saisir votre nom : </label
 ><input id="name" type="text" size="30" />
</p>
```


Le premier exemple est inaccessible : il n'y a aucune relation entre la consigne de saisie et l'élément `<input>`.

En plus d'un nom accessible, un élément `<label>` permet d'agrandir la zone d'interaction à la souris ou via la surface tactile sur laquelle on peut cliquer/toucher. En associant un élément `<label>` avec un élément `<input>`, si on clique sur l'un des deux, cela passera le focus au contrôle porté par l'élément `<input>`. Si on utilise du texte simple plutôt qu'un élément sémantique, on n'aura pas ces bénéfices. Agrandir la zone d'activation du contrôle aide les personnes avec un handicap moteur.

En développant sur le Web, il est important de ne pas présupposer que tout le monde connaît tout sur le Web. La diversité des personnes qui utilisent le Web, et donc votre site ou application, garantit à coup sûr que quelqu'un d'autre peut interpréter un formulaire différemment si ce dernier ne contient pas de libellés clairs et bien associés.

#### Les textes d'indications (`placeholder`) ne sont pas accessibles

L'attribut `placeholder` permet d'indiquer un texte qui apparaît dans la zone du contenu de l'élément `<input>` lorsqu'il est vide. Ce texte indicatif ne devrait jamais être strictement nécessaire à la compréhension du formulaire. Il ne s'agit pas d'un libellé et on ne devrait pas utiliser cet attribut comme un remplacement d'un libellé. `placeholder` permet de fournir une indication de ce à quoi la valeur à saisir devrait ressembler, il ne s'agit ni d'une explication ni d'une consigne.

Le texte fourni par `placeholder` n'est pas accessible pour les lecteurs d'écran et dès que la personne saisit une valeur, ou si le contrôle a déjà une valeur, il disparaît. Les navigateurs qui ont une fonctionnalité de traduction automatique pourraient ignorer les attributs lors de la traduction, ce qui signifie que `placeholder` pourrait ne pas être traduit.

**Note :** Évitez d'utiliser `placeholder` si vous pouvez. Pour ajouter un libellé sur un élément `<input>`, on utilisera l'élément `<label>`.

### Validation côté client

**Attention :** La validation côté client est utile mais *ne garantit pas* que le serveur reçoit des données valides. Si les données doivent respecter un format donné, il faudra *toujours* les vérifier côté serveur et renvoyer une réponse HTTP `400` si le format est invalide.

En complément des pseudo-classes CSS `:valid` et `:invalid` qui permettent de cibler les contrôles selon leur état de validité, le navigateur fournit une validation côté client pour chaque tentative d'envoi du formulaire. À l'envoi du formulaire, si un des contrôles échoue à respecter les contraintes, les navigateurs qui implémentent cette fonctionnalité afficheront un message d'erreur sur le premier contrôle du formulaire qui est invalide, le message pouvant être un message par défaut selon le type d'erreur ou un message choisi par le site.

Certains types de champ et attributs imposent des limites aux valeurs possibles pour un champ donné. Ainsi, `<input type="number" min="2" max="10" step="2">` signifiera que seuls les nombres 2, 4, 6, 8, et 10 sont valides. Plusieurs erreurs de validation peuvent se produire ici, `rangeUnderflow` si la valeur est inférieure à 2, `rangeOverflow` si elle est supérieure à 10, `stepMismatch` si la valeur est comprise entre 2 et 10, mais n'est pas un entier pair (autrement dit, la contrainte imposée par `step` n'est pas respectée), ou `typeMismatch` si la valeur n'est pas un nombre.

Pour les types de champ dont le domaine des valeurs possibles est périodique (autrement dit après avoir atteint la plus grande valeur, on revient à la plus petite), il est possible d'avoir des valeurs d'attribut `max` inférieures à celles de `min`. Cela est particulièrement utile pour les dates et les heures, par exemple pour autoriser les heures entre 8h du soir et 8h du matin :


```html
<input type="time" min="20:00" max="08:00" name="overnight" />
```


Certains attributs et valeurs peuvent causer une erreur `ValidityState` (en-US) spécifique :

Objets d'erreur de validité selon les attributs `<input>` et leurs valeurs| Attribut | Propriété correspondante | Description |
| --- | --- | --- |
| `max` | `validityState.rangeOverflow` (en-US) | Se produit lorsque la valeur est supérieure à la valeur maximale définie par l'attribut `max`. |
| `maxlength` | `validityState.tooLong` (en-US) | Se produit lorsque le nombre de caractères du champ est supérieur à la valeur définie par l'attribut `maxlength`. |
| `min` | `validityState.rangeUnderflow` (en-US) | Se produit lorsque la valeur est inférieure à la valeur minimale définie par l'attribut `min`. |
| `maxlength` | `validityState.tooShort` (en-US) | Se produit lorsque le nombre de caractères du champ est inférieur à la valeur définie par l'attribut `minlength`. |
| `pattern` | `validityState.patternMismatch` (en-US) | Se produit lorsque l'attribut `pattern` contient une expression rationnelle valide et que la valeur du champ ne respecte pas celle-ci. |
| `required` | `validityState.valueMissing` (en-US) | Se produit lorsque l'attribut `required` est présent et mais sa valeur est `null` ou que le bouton radio ou la case à cocher n'est pas sélectionné. |
| `step` | `validityState.stepMismatch` (en-US) | Se produit lorsque la valeur ne respecte pas l'incrément imposé par l'attribut `step`. L'incrément par défaut vaut `1`, ce qui signifie que seules les valeurs entières sont valides pour le type `number` si `step` est absent. Utiliser `step="any"` empêchera de déclencher cette erreur. |
| `type` | `validityState.typeMismatch` (en-US) | Se produit lorsque la valeur ne correspond pas au type, par exemple si une adresse électronique ne contient pas le caractère `@` ou si une URL ne contient pas de protocole. |

Si un contrôle de formulaire n'a pas d'attribut `required`, n'a aucune valeur, ou s'il a une chaîne de caractères de vide comme valeur, il n'est pas invalide. Même si les attributs précédents sont présents, exception faite de `required`, une chaîne de caractères vide ne causera pas d'erreur.

On peut définir des limites sur les valeurs acceptables et les navigateurs qui implémentent les fonctionnalités de validation effectueront un contrôle nativement en alertant la personne qu'il y a un problème lors de l'envoi du formulaire.

En plus des erreurs décrites dans le tableau qui précède, l'interface `validityState` contient les propriétés booléennes en lecture seule `badInput`, `valid`, et `customError`. Cet objet possède les propriétés suivantes :

* `validityState.valueMissing` (en-US)
* `validityState.typeMismatch` (en-US)
* `validityState.patternMismatch` (en-US)
* `validityState.tooLong` (en-US)
* `validityState.tooShort` (en-US)
* `validityState.rangeUnderflow` (en-US)
* `validityState.rangeOverflow` (en-US)
* `validityState.stepMismatch` (en-US)
* `validityState.badInput` (en-US)
* `validityState.valid`
* `validityState.customError`

Pour chacune de ces propriétés booléennes, une valeur à `true` indique que la raison de validation correspondante peut avoir échoué, exception faite de la propriété `valid` qui, si elle vaut `true`, indique que la valeur de l'élément respecte l'ensemble des contraintes.

S'il y a une erreur, les navigateurs qui prennent en charge la validation avertiront la personne et empêcheront l'envoi du formulaire. Attention à un point : si un message d'erreur personnalisé a une valeur équivalente à `true` (toute valeur qui n'est ni la chaîne vide ni `null`), le formulaire ne pourra pas être envoyé. S'il n'y a pas de message d'erreur personnalisé et qu'aucune des propriétés précédentes ne vaut `true` à part `valid`, le formulaire pourra être envoyé.


```js
function validate(input) {
  let validityState_object = input.validity;
  if (validityState_object.valueMissing) {
    input.setCustomValidity("Une valeur est nécessaire.");
  } else if (validityState_object.rangeUnderflow) {
    input.setCustomValidity("La valeur est trop basse.");
  } else if (validityState_object.rangeOverflow) {
    input.setCustomValidity("La valeur est trop haute.");
  } else {
    input.setCustomValidity("");
  }
}
```


La dernière ligne, qui utilise la chaîne vide comme valeur pour le message d'erreur est essentielle. Si la personne fait une erreur et que la validité est définie, le formulaire ne pourra être envoyé, même si toutes les valeurs sont valides, jusqu'à ce que le message soit `null`.

#### Exemple de message d'erreur de validation sur mesure

Si vous souhaitez afficher un message d'erreur spécifique lorsqu'un champ est invalide, vous devrez utiliser les fonctionnalités relatives à la validation des contraintes (en-US) disponible sur les éléments `<input>` (entre autres). Prenons le formulaire suivant :


```html
<form>
  <label for="name"
 >Veuillez saisir un nom d'utilisateur (avec des lettres en minuscules ou
    majuscules) :
  </label>
  <input type="text" name="name" id="name" required pattern="[A-Za-z]+" />
  <button>Envoyer</button>
</form>
```


Les fonctionnalités HTML de base pour la validation des formulaires permettront d'afficher un message d'erreur par défaut si on tente de soumettre le formulaire sans valeur ou avec une valeur qui ne respecte pas le motif de l'expression rationnelle indiquée avec `pattern`.

Si on souhaite afficher un message d'erreur spécifique, on pourra utiliser JavaScript comme suit :


```js
const nameInput = document.querySelector("input");

nameInput.addEventListener("input", () => {
  nameInput.setCustomValidity("");
  nameInput.checkValidity();
});

nameInput.addEventListener("invalid", () => {
  if (nameInput.value === "") {
    nameInput.setCustomValidity(
      `Veuillez saisir un nom d'utilisateur non vide !`,
    );
  } else {
    nameInput.setCustomValidity(
      `Un nom d'utilisateur ne peut contenir que des lettres en minuscules ou majuscules. Essayez à nouveau.`,
    );
  }
});
```


L'exemple ainsi construit produira le résultat suivant :

En résumé :

* On vérifie l'état de validité du champ chaque fois que sa valeur est modifiée en exécutant la méthode `checkValidity()` lors de l'évènement `input` via le gestionnaire d'évènement.
* Si la valeur est invalide, un évènement `invalid` est déclenché et la fonction indiquée sur le gestionnaire d'évènement pour `invalid` est exécutée. Au sein de cette fonction, on détermine si la valeur est invalide parce qu'elle est vide ou parce qu'elle ne correspond pas au motif imposé en distinguant le cas avec un bloc `if()` et en adaptant le message d'erreur selon le cas de figure.
* Ainsi, si la valeur du champ est invalide lorsqu'on clique sur le bouton d'envoi, un des messages spécifiques est affiché.
* Si la valeur est valide, le formulaire est envoyé sans problème. Pour cela, il faut annuler la vérification de validité spécifique en appelant `setCustomValidity()` avec une chaîne de caractères vide. C'est ce qu'on fait à chaque fois qu'un évènement `input` est déclenché. Sans ça, si une validité spécifique avait précédemment été définie, le champ serait toujours considéré comme invalide, même si la valeur courante était valide lors de l'envoi.

**Note :** On veillera à toujours valider les contraintes côté client et côté serveur. La validation des contraintes du navigateur ne se substitue pas à la vérification côté serveur. En effet, des valeurs invalides peuvent toujours être envoyées par des navigateurs obsolètes ou par des acteurs malveillants.

### Localisation

Les valeurs autorisées à la saisie pour certains types d'`<input>` dépendent de la locale. En effet, pour certaines locales 1,000.00 représente un nombre valide tandis qu'il faudrait saisir 1000,00 dans d'autres locales.

Firefox utilise les heuristiques suivantes pour déterminer la locale selon laquelle valider la saisie (au moins pour `type="number"`) :

* Tente d'utiliser la langue indiquée par l'attribut `lang`/`xml:lang` sur l'élément ou l'un de ses parents,
* Sinon, utilise la langue indiquée par l'en-tête HTTP `Content-Language`,
* Sinon, utilise la locale du navigateur.
### Résumé technique

|  |  |
| --- | --- |
| Catégories de contenu | Contenu de flux, contenu associé aux formulaires : listé, participant à l'envoi du formulaire, réinitialisable, contenu phrasé. Si l'attribut `type` ne vaut pas `hidden`, il s'agit d'un élément étiquetable et d'un contenu tangible. |
| Contenu autorisé | Aucun, il s'agit d'un élément vide. |
| Omission de balises | Cet élément doit avoir une balise ouvrante et pas de balise fermante. |
| Parents autorisés | Tout élément qui accepte du contenu phrasé. |
| Rôle ARIA implicite | * `type=button` : `button`
* `type=checkbox` : `checkbox`
* `type=email`
    + Sans attribut `list` : `textbox`
    + Avec un attribut `list` : `combobox`
* `type=image` : `button`
* `type=number` : `spinbutton`
* `type=radio` : `radio`
* `type=range` : `slider`
* `type=reset` : `button`
* `type=search`
    + Sans attribut `list` : `searchbox`
    + Avec un attribut `list` : `combobox`
* `type=submit` : `button`
* `type=tel`
    + Sans attribut `list` : `textbox`
    + Avec un attribut `list` : `combobox`
* `type=text`
    + Sans attribut `list` : `textbox`
    + Avec un attribut `list` : `combobox`
* `type=url`
    + Sans attribut `list` : `textbox`
    + Avec un attribut `list` : `combobox`
* `type=color|date|datetime-local|file|hidden|month|password|time|week` : pas de rôle correspondant
 |
| Rôles ARIA autorisés | * `type=button` : `checkbox`, `combobox` (en-US), `link`, `menuitem` (en-US), `menuitemcheckbox` (en-US), `menuitemradio` (en-US), `option` (en-US), `radio` (en-US), `switch`, `tab` (en-US)
* `type=checkbox` : `button` lorsqu'utilisé avec `aria-pressed`, `menuitemcheckbox` (en-US), `option` (en-US), `switch`
* `type=image`: `link`, `menuitem` (en-US), `menuitemcheckbox` (en-US), `menuitemradio` (en-US), `radio` (en-US), `switch`
* `type=radio`: `menuitemradio` (en-US)
* `type=text` sans attribut `list` : `combobox` (en-US), `searchbox` (en-US), `spinbutton` (en-US)
* `type=color|date|datetime-local|email|file|hidden|month|number|password|range|reset|search|submit|tel|url|week` ou `text` avec un attribut `list` : aucun rôle autorisé
 |
| Interface du DOM correspondante | `HTMLInputElement` |

Accessibilité
-------------

### Libellés

Lorsqu'on ajoute des champs de formulaire sur une page, le minimum, en termes d'accessibilité, consiste à ajouter des libellés correspondants avec des éléments `<label>`. Cela permet aux outils d'assistance d'indiquer le rôle du champ. De plus, cliquer ou toucher le libellé permettra de passer le focus au contrôle de formulaire correspondant. Cela améliore l'accessibilité et l'utilisabilité pour les personnes voyantes, en augmentant la zone d'interaction possible pour activer le contrôle du formulaire au clic ou au toucher. C'est notamment utile (voire nécessaire) pour les boutons radios et les cases à cocher dont la surface est faible. Pour plus d'informations sur les libellés en général, voir la section sur les libellés.

Dans l'exemple qui suit, on illustre comment associer un élément `<label>` avec un élément `<input>`. Le lien se fait avec la valeur l'attribut `id` de l'élément `<input>` qui est réutilisée comme valeur pour l'attribut `for` de l'élément `<label>`.


```html
<label for="ptipois">Est-ce que vous aimez les petits pois ?</label>
<input type="checkbox" name="petitspois" id="ptipois" />
```

### Dimensionnement

Les éléments interactifs d'une page web, tels que les champs de formulaire, doivent fournir une zone d'interaction suffisamment large pour qu'il soit facile de les activer. Cela aide les personnes avec des handicaps moteurs et aussi les personnes qui utilisent des dispositifs de pointage peu précis comme les doigts ou un stylet. Une surface interactive minimale de 44×44 pixels CSS est recommandée.

* Comprendre le critère de réussite 2.5.5 : taille de la cible, Guide du W3C pour la compréhension de WCAG 2.1 (en anglais)
* Taille de la cible et 2.5.5, billet de blog d'Adrian Roselli (en anglais)
* Test rapide : cibles suffisamment grande, le projet A11Y (en anglais)
Spécifications
--------------

| Specification |
| --- |
| HTML Standard # the-input-element |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Validation des contraintes dans un formulaire (en-US)
* Votre premier formulaire HTML
* Comment structurer un formulaire HTML
* Les contrôles de formulaire natifs
* Envoyer des données de formulaire
* Validation des données d'un formulaire
* Comment construire des contrôles sur mesure
* Les formulaires HTML dans les navigateurs historiques
* Mise en forme d'un formulaire HTML
* Mise en forme avancée d'un formulaire HTML
* Tableau de compatibilité des propriétés CSS