Les autres contrôles de formulaire

Un champ texte sur plusieurs lignes se crée à l'aide d'un élément <textarea> plutôt qu'avec un élément <input>.

<textarea cols="30" rows="8"></textarea>

Voici le résultat qu'on obtient avec le fragment HTML précédent :

La différence principale entre un élément <textarea> et un champ texte (<input type="text">) est qu'il permet de saisir des sauts de lignes (en appuyant sur Entrée) qui seront inclus dans les données envoyées avec le formulaire.

<textarea> utilise également une balise fermante et le texte contenu entre ces deux balises sera utilisé comme contenu par défaut. <input> est quant à lui un élément vide sans balise fermante et la valeur par défaut est portée par l'attribut value.

Bien qu'on puisse mettre n'importe quoi à l'intérieur d'un élément <textarea> (y compris d'autres éléments HTML, CSS, et JavaScript), étant donné sa nature, tout le contenu sera affiché à l'écran comme du texte simple (on utilisera contenteditable sur des éléments qui ne sont pas des contrôles de formulaire pour fournir une API permettant de capturer du contenu riche/complexe plutôt que du texte simple).

Sur le plan visuel, le texte saisi passe à la ligne automatiquement et le contrôle est redimensionnable par défaut. Les navigateurs récents fournissent une zone (généralement dans l'angle inférieur droit du contrôle) qui permet d'augmenter/réduire la taille de la zone de texte.

Les captures suivantes montrent l'aspect par défaut, avec le focus, ou désactivé d'éléments <textarea> sur Firefox 71 et Safari 13 sur macOS, et sur Edge 18, Yandex 14, Firefox 71 et Chrome 79 sur Windows 10.

<textarea> accepte trois attributs qui contrôlent son aspect visuel :

cols

Indique la largeur visible (le nombre de colonnes de caractères) de la zone de texte. Celle-ci est mesurée en largeur moyenne de caractères. Il s'agit de la largeur initiale, celle-ci pouvant être modifiée lors du redimensionnement manuel ou surchargée avec CSS. La valeur par défaut est 20.

rows

Indique le nombre de lignes visibles de la zone de texte. Il s'agit de la hauteur initiale, celle-ci pouvant être modifiée lors du redimensionnement manuel ou surchargée avec CSS. La valeur par défaut est 2.

wrap

Indique la façon dont le texte passe à la ligne automatiquement. Les valeurs sont :

soft (la valeur par défaut)

Le texte affiché dans le navigateur passe à la ligne automatiquement, mais la valeur envoyée par le formulaire ne contient pas de sauts de ligne automatiques.

hard

Lorsque cette valeur est utilisée, l'attribut cols doit être précisé. Cette valeur indique le texte affiché et la valeur envoyée contiennent des sauts de ligne automatique.

off

Il n'y a pas de passage automatique à la ligne.

La capacité à redimensionner un élément <textarea> se contrôle grâce à la propriété CSS resize. Les valeurs possibles sont :

both

C'est la valeur par défaut. Le contrôle peut être redimensionné sur l'axe horizontal et l'axe vertical.

horizontal

Le redimensionnement est uniquement possible sur l'axe horizontal.

vertical

Le redimensionnement est uniquement possible sur l'axe vertical.

none

Aucun redimensionnement n'est possible.

block et inline

Ces valeurs logiques permettent le redimensionnement selon la direction de bloc ou la direction de ligne (qui varie selon la directionnalité du texte, voir Gérer les différentes directions du texte pour en savoir plus).

Vous pouvez manipuler l'exemple interactif situé en haut de la page de référence pour resize afin de voir comment ces valeurs fonctionnent.

Les contrôles de listes déroulantes sont un outil pratique pour permettre de sélectionner une valeur parmi différentes options, sans occuper trop d'espace sur l'interface utilisateur. HTML dispose de deux formes de listes déroulantes : la boîte de sélection avec <select>, et la boîte d'autocomplétion avec <datalist>. Dans les deux cas, l'interaction est la même, une fois que le contrôle est activé, le navigateur affiche une liste de valeurs parmi lesquelles la personne peut choisir.

On crée une boîte de sélection à l'aide d'un élément <select> qui contient un ou plusieurs éléments <option> comme enfants, chacun de ces derniers fournissant une valeur possible.

Exemple simple

<select id="simple" name="simple">
  <option>Banane</option>
  <option selected>Cerise</option>
  <option>Citron</option>
</select>

Si une valeur par défaut est nécessaire, on pourra l'indiquer à l'aide de l'attribut selected sur l'élément <option> voulu, l'option sera alors présélectionnée au chargement de la page.

Utiliser <optgroup>

Les éléments <option> peuvent être imbriqués dans des éléments <optgroup> pour créer des groupes de valeurs distincts :

<select id="groups" name="groups">
  <optgroup label="fruits">
    <option>Banane</option>
    <option selected>Cerise</option>
    <option>Citron</option>
  </optgroup>
  <optgroup label="legumes">
    <option>Carotte</option>
    <option>Aubergine</option>
    <option>Pomme de terre</option>
  </optgroup>
</select>

Sur l'élément <optgroup>, la valeur de l'attribut label est affichée avant les valeurs des options imbriquées. Le navigateur sépare généralement ce libellé des options sélectionnables (par exemple avec une mise en gras et un niveau d'imbrication différent) afin qu'il ne puisse pas être confondu avec les options.

Utiliser l'attribut value

Si un élément <option> possède explicitement un attribut value, c'est cette valeur qui sera envoyée avec le formulaire lors de l'envoi si cette option est sélectionnée. Si l'attribut value est absent (à l'instar des exemples précédents), c'est le contenu de l'élément <option> qui est utilisé comme valeur. Aussi, les attributs value ne sont pas strictement nécessaires mais peuvent s'avérer utiles lorsqu'on souhaite fournir une valeur raccourcie ou normalisée au serveur et qui est différente de la valeur affichée dans la boîte.

Par exemple :

<select id="simple" name="simple">
  <option value="banane">Une belle banane bien jaune</option>
  <option value="cerise">Quelques cerises juteuses à souhait</option>
  <option value="citron">Un citron acide comme il faut</option>
</select>

Par défaut la taille de la boîte de sélection permet d'afficher une seule valeur. L'attribut optionnel size permet de contrôler le nombre d'options visibles lorsque la boîte de sélection n'a pas le focus.

Par défaut, une boîte de sélection permet de choisir une seule valeur. En ajoutant l'attribut multiple à l'élément <select>, il devient possible de sélectionner plusieurs valeurs en utilisant le mécanisme de sélection multiple fourni par le système d'exploitation (par exemple en cliquant sur les différentes valeurs ou en maintenant les touches Cmd/Ctrl du clavier sur un ordinateur).

<select id="multi" name="multi" multiple size="2">
  <optgroup label="fruits">
    <option>Banane</option>
    <option selected>Cerise</option>
    <option>Citron</option>
  </optgroup>
  <optgroup label="legumes">
    <option>Carotte</option>
    <option>Aubergine</option>
    <option>Pomme de terre</option>
  </optgroup>
</select>

Il est possible de fournir des suggestions de valeurs qui pourront être utilisées en auto-complétion par les contrôles de formulaire avec l'élément <datalist> qui contient des éléments <option>, décrivant chacun une valeur à afficher. L'élément <datalist> doit avoir un attribut id.

La liste de données est rattachée à un élément <input> (par exemple de type text ou email) en utilisant l'attribut list dont la valeur correspond à l'identifiant (id) de la liste.

Lorsqu'une liste de données est rattachée à un contrôle de formulaire, les options qu'elle fournit sont utilisées pour l'autocomplétion du texte saisi par la personne. Généralement, les suggestions sont présentées sous la forme d'une liste déroulante qui contient les correspondances possibles selon ce qui a déjà été saisi dans le champ.

Exemple simple

Prenons un exemple.

<label for="monFruit">Quel est votre fruit préféré ?</label>
<input type="text" name="monFruit" id="monFruit" list="maSuggestion" />
<datalist id="maSuggestion">
  <option>Pomme</option>
  <option>Banane</option>
  <option>Cassis</option>
  <option>Myrtille</option>
  <option>Citron</option>
  <option>Litchi</option>
  <option>Pêche</option>
  <option>Poire</option>
</datalist>

Prise en charge et méthodes alternatives

La quasi-totalité des navigateurs prend en charge <datalist>, toutefois, si vous devez prendre en charge des versions d'Internet Explorer antérieures à IE10, voici une méthode alternative :

<label for="monFruit">Quel est votre fruit préféré ? (avec alternative)</label>
<input type="text" id="monFruit" name="fruit" list="listeFruit" />

<datalist id="listeFruit">
  <label for="suggestion">ou sélectionnez un fruit</label>
  <select id="suggestion" name="altFruit">
    <option>Pomme</option>
    <option>Banane</option>
    <option>Cassis</option>
    <option>Myrtille</option>
    <option>Citron</option>
    <option>Litchi</option>
    <option>Pêche</option>
    <option>Poire</option>
  </select>
</datalist>

Les navigateurs qui prennent en charge l'élément <datalist> ignoreront tous les éléments enfants qui ne sont pas des éléments <option>, la liste fonctionnant alors comme on le souhaite. Les navigateurs qui ne prennent pas en charge <datalist> afficheront le libellé et la boîte de sélection.

La capture d'écran qui suit illustre le résultat de cette méthode alternative avec Safari 6 :

Si vous utilisez cette méthode alternative, il faudra vous assurer que les données de l'élément <input> et de l'élément <select> sont bien récupérées côté serveur.

Utilisations moins évidentes

Selon la spécification HTML, l'attribut list et l'élément <datalist> peuvent être utilisés pour n'importe quel type de contrôle nécessitant une saisie de l'utilisatrice ou de l'utilisateur. Cela amène à certains cas d'usage qui peuvent sembler moins évidents au premier regard.

Ainsi, pour les navigateurs qui prennent en charge <datalist> pour les champs de type range, une graduation sera affichée au-dessus de l'intervalle pour chaque option (fournie par <option>) de la liste de données. Vous pouvez en voir une implémentation sur l'exemple de la page de référence pour <input type="range">.

Pour les navigateurs qui prennent en charge <datalist> et <input type="color">, ils devraient afficher une palette de couleurs personnalisée par défaut, tout en gardant la palette complète disponible.

Pour ces cas, les différents navigateurs se comportent de façon hétérogène et de tels usages devraient être considérés avec une amélioration progressive, en s'assurant que leur absence ne nuit pas à l'usage de la page ou de l'application.

Il existe d'autres fonctionnalités relatives aux formulaires qui ne sont pas aussi évidentes que celles déjà abordées, mais qui s'avèrent utiles dans certaines situations. Voyons donc ces fonctionnalités rapidement.

Les jauges et les barres de progression sont des représentations visuelles de valeurs numériques.

Barres de progression

Une barre de progression représente une valeur qui change au cours du temps jusqu'à atteindre une valeur maximale (indiquée par l'attribut max). Pour créer une telle barre, on utilisera l'élément <progress>.

<progress max="100" value="75">75/100</progress>

Cet élément permet de restituer l'évolution d'une valeur comme le pourcentage de fichiers téléchargés, le nombre de questions renseignées dans un formulaire, etc.

Le contenu à l'intérieur d'un élément <progress> agit comme contenu alternatif pour les navigateurs qui ne prennent pas en charge cet élément et pour les outils de lecture d'écran qui doivent vocaliser l'information.

Jauges

Une jauge représente une valeur fixe au sein d'un intervalle délimité par les valeurs des attributs max et min. Cette valeur s'affiche comme une barre. Pour connaître comment la valeur est affichée, il faut la comparer à d'autres valeurs :

• Les attributs low et high partagent l'intervalle en trois parties :
  • La partie inférieure de l'intervalle est comprise entre min et low (inclus).
  • La partie intermédiaire de l'intervalle est comprise entre low et high (inclus).
  • La partie supérieure de l'intervalle est comprise entre high et max (inclus).
• La valeur de l'attribut optimum définit la valeur optimale pour l'élément <meter>. Avec les valeurs des attributs low et high, elle définit les parties de l'intervalle qui sont privilégiées :
  • Si la valeur optimum est contenue dans la partie inférieure, c'est cette partie qui est privilégiée, la partie intermédiaire étant considérée comme moyenne et la partie supérieure étant considérée comme la pire.
  • Si la valeur optimum est contenue dans la partie intermédiaire, la partie inférieure et la partie supérieure sont considérées comme moyennes et la partie intermédiaire est considérée comme privilégiée.
  • Si la valeur optimum est contenue dans la partie supérieure, la partie inférieure sera considérée comme la pire, la partie intermédiaire sera considérée comme moyenne et la partie supérieure sera considérée comme privilégiée.

Tous les navigateurs implémentant l'élément <meter> utilisent ces valeurs pour changer la couleur de la jauge :

• Si la valeur courante se situe dans la partie privilégiée de l'intervalle, la jauge sera verte.
• Si la valeur courante se situe dans la partie moyenne, la barre sera jaune.
• Si la valeur courante se situe dans la pire partie, la barre sera rouge.

Pour créer une telle jauge, on utilise l'élément <meter>. Ce dernier permet d'implémenter n'importe quel type de jauge, par exemple une barre représentant l'espace total utilisé sur un disque, qui devient rouge lorsque l'espace vient à manquer.

<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>

Le contenu situé à l'intérieur d'un élément <meter> est utilisé comme contenu alternatif par les navigateurs qui ne prennent pas en charge cet élément et par les technologies d'assistance qui doivent vocaliser cette information.

La prise en charge de <progress> et <meter> est plutôt correcte, seul Internet Explorer ne prend pas en charge ces fonctionnalités.

Vous avez atteint la fin de cet article. Mais avez-vous retenu les informations les plus importantes ? Vous pouvez vous évaluer et vérifier que vous avez mémorisé ces informations avant d'aller plus loin. Testez vos compétences : les autres contrôles de formulaire (en-US).

Au cours des derniers articles, nous avons vu qu'il existe de nombreux types de contrôles différents pour composer un formulaire. Il n'est pas nécessaire de tout retenir par cœur, vous pourrez revenir à ces articles en temps voulu pour revoir les détails.

Maintenant que vous en savez un peu plus sur le HTML derrière les différents contrôles de formulaire, voyons comment les mettre en forme.

• Précédent
• Aperçu : Formulaires web — Travailler avec les données saisies
• Suivant