<textarea>

Résumé

L'élément HTML <textarea> représente un champ de saisie à plusieurs lignes, permettant l'édition d'un texte simple.

Attributs

Cet élément inclut les attributs globaux.

autofocus HTML5
Cet attribut booléen, qui ne doit être défini qu'une fois par document, indique au navigateur que cet élément doit avoir le focus automatiquement lorsque la page est chargée. Cela permet de saisir immédiatement l'information pertinente dans le formulaire de la page sans avoir à cliquer au préalable dans le contrôle adéquat.
cols
Cet attribut contient un entier indiquant la largeur d'une ligne. Le navigateur utilise cette valeur pour dimensionner le contrôle de manière adéquate. En l'absence de cet attribut, ou s'il ne contient pas un entier strictement positif, sa valeur par défaut est 20 HTML5.
disabled
La présence de cet attribut booléen indique que le contrôle est désactivé, c'est-à-dire non modifiable. Il apparaît souvent en grisé dans les navigateurs et ne reçoit plus les événements de navigation comme un clic de souris ou ceux en relation avec le focus. S'il n'est pas défini, l'élément peut malgré tout être désactivé si dans ses ancêtres, il y a un élément <fieldset> désactivé. S'il n'y a pas de tels ancêtres, le contrôle est activé.
form HTML5
L'élément formulaire auquel cet élément est associé (son formulaire « propriétaire »). La valeur de cet attribut doit être l'identifiant (ou id) d'un élément {HTMLElement("form")}} présent dans le même document. Si cet attribut n'est pas spécifié, l'élément <textarea> doit être un descendant d'un élément <form>. Cet attribut permet de disposer des éléments <textarea> au sein du document sans qu'ils soient directement descendants de leur formulaire.
maxlength HTML5
Cet attribut définit le nombre maximum de caractères (des points code Unicode) que l'utilisateur peut entrer. S'il n'est pas spécifié, l'utilisateur peut entrer un nombre illimité de caractères.
name
Le nom du contrôle.
placeholder HTML5
Cet attribut contient une brève indication (un mot ou une phrase courte) afin d'aider l'utilisateur dans sa saisie, comme un exemple. Il ne s'agit pas d'un remplacement de l'attribut title, adéquat pour des indications plus longues, ou d'un élément <label> associé.
readonly
Cet attribut booléen définit si la valeur de l'élément est modifiable ou non. S'il est spécifié, l'élément est inaltérable et est exclu de la validation des contraintes du formulaire. (L'utilisateur pouvant toujours cliquer dessus ou sélectionner le contrôle). La valeur d'un contrôle en lecture seule est envoyée au formulaire).
required HTML5
Cet attribut booléen indique que l'élément doit être obligatoirement renseigné; si la valeur de l'élément est vide, la validation des contraintes du formulaire échouera et l'élément sera considéré comme manquant.
rows
Cet attribut définit le nombre de lignes de texte visibles dans ce contrôle. S'il n'est pas défini, ou si sa valeur n'est pas un entier strictement positif, sa valeur par défaut est 2 HTML5.
selectionDirection HTML5
La direction dans laquelle la sélection s'effectue. Les valeurs possibles sont forward, backward ou none. forward est utilisé dans les cas où la sélection est faite dans le sens du texte (de droite à gauche dans les locales dont la lecture se fait de droite à gauche, de gauche à droite dans les locales où la lecture se fait de gauche à droite) ; backward est utilisé pour le cas inverse ; none  est utilisé quand le sens de la sélection est inconnu.
selectionEnd
L'indice (position) du dernier caractère de la sélection courante.
selectionStart
L'indice (position) du premier caractère de la sélection courante.
spellcheck HTML5
Si cet attribut vaut true, cela indique que l'orthographe et la grammaire de l'élément doivent être vérifiés. La valeur default indique que le comportement à respecter est celui par défaut, éventuellement défini par la valeur de l'attribut spellcheck de l'élément parent. La valeur false indique qu'aucune vérification ne doit être effectuée sur l'élément.
wrap HTML5
Cet attribut énuméré définit la manière dont la césure doit être gérée. Il peut prendre l'une des valeurs suivantes :
  • hard: le navigateur ajoute automatique un saut de ligne (CR+LF) de manière à ce qu'aucune ligne ne dépasse le nombre de caractères spécifié par l'attribut cols. Dans ce cas, l'attribut cols est obligatoire.
  • soft: le navigateur s'assure que chaque saut de ligne consiste en un CR suivi d'un LF, mais n'ajoute aucun saut de ligne lui-même.
Si l'attribut n'est pas défini, sa valeur par défaut est soft.

Interaction avec CSS

Selon CSS, un élément <textarea> est un élement remplacé. La spécification HTML ne définit par l'emplacement de la ligne de base d'un élément <textarea>. Cela explique le fait que différents navigateurs la placent à différentes positions. Pour Gecko, la ligne de base de l'élément <textarea> est placé sur la ligne de base de la première ligne de l'élément textarea, sur d'autres navigateurs, elle est parfois placée sur le bas de la boîte du texte. La propriété CSS vertical-align: baseline ne doit pas être utilisée sur cet élément car son comportement pourrait être indéfini.

Un élément textarea possède des dimensions intrinsèques, de la même manière qu'une image matricielle.

Exemple

<textarea name="textarea" rows="10" cols="50">Saisir un texte ici.</textarea>

Spécifications

Spécification Statut Commentaires
WHATWG HTML Living Standard Living Standard  
HTML5 Candidate Recommendation  
HTML 4.01 Specification Recommendation  

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple (Oui) 1.0 (1.7 ou moins) (Oui) (Oui) (Oui)
Attribut autofocus (Oui) 4.0 (2.0) 10 (Oui) (Oui)
Attribut maxlength (Oui) 4.0 (2.0) 10 (Oui) (Oui)
Attribut placeholder (Oui) 4.0 (2.0) 10 11.50 5.0
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple (Oui) 1.0 (1.0) (Oui) (Oui) (Oui)
Attribut autofocus ? 4.0 (2.0) Pas de support ? ?
Attribut maxlength ? 4.0 (2.0) Pas de support ? ?
Attribut placeholder ? 4.0 (2.0) ? 11.50 4.0

Notes relatives à Gecko

À partir de Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), lorsque le focus est fait sur un élément <textarea>, le point d'insertion du texte est placé au début du texte par défaut  et non pas à la fin. Ce changement permet à Gecko d'être cohérent avec les autres navigateurs.

(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

Textarea redimensionable

Gecko 2.0 a introduit le support pour redimensionner les éléments <textarea>. Cela est contrôlé par la propriété CSS resize. Le redimensionnement des éléments <textarea> est activé par défaut, il est possible de bloquer cela en utilisant le code CSS qui suit :

textarea {
  resize: none;
}

Étiquettes et contributeurs liés au document

Contributeurs ayant participé à cette page : emagnier, tregagnon, SphinxKnight, teoli
Dernière mise à jour par : emagnier,