<textarea>

Résumé

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

• Catégories de contenu Contenu de flux, contenu phrasé, contenu associé aux formulaires (listed, submittable, resettable), contenu interactif.
• Contenu autorisé Des données représentant des caractères
• Omission de balises Aucune, tant le tag d'ouverture que de fermeture est obligatoire
• Élément parents autorisés Tout élément acceptant du contenu phrasé.
• Interface DOM HTMLTextareaElement

Attributs

Cet élément inclut les attributs globaux.

autocomplete HTML5

Cet attribut indique si la valeur du contrôle peut être automatiquement complétée par le navigateur. Les valeurs possibles sont :

• off : L’utilisateur doit explicitement entrer une valeur dans ce champ à chaque utilisation, ou le document fournit son propre système d’auto-complétion ; le navigateur ne complète pas automatiquement l’entrée.
• on : Le navigateur peut compléter automatiquement la valeur en se basant sur les valeurs que l’utilisateur a entré lors de ses précédentes utilisation.

Si l’attribut autocomplete n’est pas spécifié sur un élément textarea, alors le navigateur utilise la valeur de l’attribut autocomplete du formulaire auquel appartient l’élément <textarea>. Ce formulaire est soit l’élément form dont cet élément <textarea> est un descendant, soit l’élément form dont l’id est spécifié par l’attribut form de l’élément <textarea>. Pour plus d’information, voir la documentation de l’attribut autocomplete de la balise <form>.

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.

minlength HTML5

Cet attribut définit le nombre minimum de caractères (des points code Unicode) que l'utilisateur doit entrer.

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

Compatibilité des navigateurs

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.

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;
}