L'élément HTML <textarea> représente un contrôle qui permet d'éditer du texte sur plusieurs lignes.

Catégories de contenu Contenu de flux, contenu phrasé, contenu interactif, contenu de formulaire (énuméré, étiquetable, réinitialisable, envoyable).
Contenu autorisé Du texte.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés Tout élément qui accepte du contenu phrasé.
Rôles ARIA autorisés Aucun.
Interface DOM HTMLTextAreaElement

Attributs

À l'instar des autres éléments HTML, cet élément inclut les attributs universels.

  • "forward" : la sélection se fait de gauche à droite pour une locale écrite de gauche à droite (LTR) et elle se fait de droite à gauche pour une locale écrite de droite à gauche (RTL),
  • "backward" : la sélection se fait dans le sens inverse du sens d'écriture,
  • "none" : le sens de la sélection est inconnu.
autocapitalize
Cet attribut est non standard, pris en charge par WebKit sur iOS, et contrôle la façon dont le texte saisi doit automatiquement être mis en majuscules. Les valeurs disponibles spour iOS 5 et les versions supérieures sont :
  • none : la mise en majuscules est complètement désactivée
  • sentences : la première lettre des phrases est automatiquement mise en majuscule
  • words : la première lettre de chaque mot est automatiquement mise en majuscule
  • characters : tous les caractères sont transformés en majuscules
  • on : valeur dépréciée depuis iOS 5 et qui permettait d'activer la mise en majuscule automatique.
  • off : valeur dépréciée depuis iOS 5 et qui permettait de désactiver la mise en majuscule automatique.
autocomplete HTML5
Cet attribut indique si la valeur saisie doit automatiquement être complétée par le navigateur. Cet attribut à valeur contrainte peut prendre l'une de ces deux valeurs :
  • off : l'utilisateur doit explicitement saisir une valeur dans ce champ à chaque fois qu'il l'utilise ou le document fournit son propre mécanisme d'auto-complétion. Le navigateur ne complète pas le texte saisi.
  • on : le navigateur peut compléter la saisie de l'utilisateur en fonction de ce que l'utilisateur a déjà saisi précédemment sur ce champ.

Si l'attribut autocomplete n'est pas indiqué à même l'élément <textarea>, alors le navigateur utilise la valeur d'autocomplete pour le formulaire rattaché à cet élément (c'est-à-dire son élément ancêtre <form> ou le formulaire correspond à l'identifiant fourni par l'attribut form). Pour plus d'informations, se référer à la documentation de l'attribut autocomplete de l'élément <form>.

autofocus HTML5
Cet attribut permet d'indiquer que ce contrôle doit recevoir le focus au chargement de la page. Seul un élément de formulaire au sein d'un document peut avoir cet attribut déclaré.
cols
La largeur visible du contrôle de saisie, exprimée en largeur moyenne de caractères. La valeur utilisée doit être un entier positif. La valeur par défaut de cet attribut est 20.
disabled
Cet attribut booléen indique que le contrôle est désactivé et que l'utilisateur ne peut pas interagir avec ce contrôle. Si cet attribut n'est pas utilisé, le contrôle héritera de l'état de son élément parent (par exemple de son éventuel élément parent <fieldset>). S'il n'existe pas d'élément englobant pour lequel l'attribut disabled est utilisé, le contrôle est alors actif.
form HTML5
L'élément de formulaire auquel l'élément <textarea> est rattaché. La valeur de cet attribut doit être l'identifiant (la valeur de l'attribut id) d'un élément <form> du même document. Si cet attribut n'est pas défini, l'élément <textarea> doit être un descendant d'un élément <form>. Cet attribut permet notamment de placer des éléments <textarea> où qu'on le veuille dans le document et pas uniquement comme des descendants des éléments de formulaire.
maxlength HTML5
Le nombre maximum de caractères, exprimé en codets Unicode, que l'utilisateur peut saisir. Si cet attribut n'est pas utilisé, l'utilisateur peut saisir un nombre illimité de caractères..
minlength HTML5
Le nombre minimal que l'utilisateur doit saisir dans le champ, exprimé en codets Unicode.
name
Le nom associé au contrôle.
placeholder HTML5
Une indication fournie à l'utilisateur sur la valeur qui peut être saisie dans le contrôle. Les retours à la ligne contenus dans la valeur de l'attribut doivent être interprétés comme des sauts de ligne lorsque l'indication est affichée pour l'utilisateur.
readonly
Cet attribut booléen indique que l'utilisateur ne peut pas modifier la valeur du contrôle. À la différence de l'attribut disabled, readonly n'empêche pas de cliquer ou de sélectionner le contrôle. La valeur d'un contrôle en lecture seule est tout de même envoyé avec les données du formulaire.
required HTML5
Cet attribut indique que l'utilisateur doit nécessairement saisir une valeur afin de pouvoir envoyer le formulaire.
rows
Le nombre de lignes de texte visibles pour le contrôle.
spellcheck HTML5
Lorsque cet attribut vaut true, cela indique que la vérification orthographique et grammaticale doit être activée. La valeur default indique que l'élément doit suivre le comportement par défaut, éventuellement basé sur la valeur de l'attribut spellcheck de l'élément parent. Si cet attribut vaut false, le texte de l'élément ne doit pas être contrôlé.
wrap HTML5
Cet attribut à valeur contrainte indique la façon dont les retours à la ligne automatiques sont utilisés. Les valeurs possibles pour cet attribut sont :
  • hard : le navigateur insère automatiquement des sauts de ligne (CR+LF) afin que chaque ligne ne soit pas plus longue que la largeur du contrôle. L'attribut cols doit alors être défini.
  • soft : le navigateur s'assure que tous les sauts de lignes soient représentés par une paire CR+LF mais il n'ajoute pas de sauts de ligne supplémentaires. C'est la valeur par défaut pour cet attribut.
  • off : , proche de soft mais on a la règle CSS white-space: pre et les lignes qui dépassent cols ne sont pas ramenées à la ligne. Si elles dépassent, on peut faire défiler la zone d'édition horizontalement.

Interaction avec CSS

Pour CSS, un élément <textarea> est un élément remplacé. La spécification HTML ne définit pas l'emplacement de la ligne de base pour un élément <textarea>. Aussi, les différents navigateurs utilisent différentes positions. Pour Gecko, la ligne de base d'un élément <textarea> est définie sur la ligne de base de la première ligne du texte de <textarea>. Pour un autre navigateur, elle pourrait être définie par rapport au bas de la boîte de l'élément <textarea>. Pour ces raisons, on évitera d'utiliser vertical-align: baseline sur cet élément car le comportement serait imprévisible.

Un élément <textarea> possède des dimensions intrinsèques (comme une image matricielle).

Exemples

HTML

<textarea name="textarea"
   rows="10" cols="50">
  Vous pouvez écrire quelque
  chose ici.
</textarea>

Résultat

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<textarea>' dans cette spécification.
Standard évolutif  
HTML5
La définition de '<textarea>' dans cette spécification.
Recommendation  
HTML 4.01 Specification
La définition de '<textarea>' dans cette spécification.
Recommendation  

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet OuiEdge Support complet OuiFirefox Support complet Oui
Notes
Support complet Oui
Notes
Notes Before Firefox 6, when a <textarea> was focused, the insertion point was placed at the end of the text by default. Other major browsers place the insertion point at the beginning of the text.
Notes A default background-image gradient is applied to all <textarea> elements, which can be disabled using background-image: none.
IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet Oui
Notes
Support complet Oui
Notes
Notes Before Firefox 6, when a <textarea> was focused, the insertion point was placed at the end of the text by default. Other major browsers place the insertion point at the beginning of the text.
Notes A default background-image gradient is applied to all <textarea> elements, which can be disabled using background-image: none.
Opera Android Support complet OuiSafari iOS Support complet Oui
Notes
Support complet Oui
Notes
Notes Unlike other major browsers, a default style of opacity: 0.4 is applied to disabled <textarea> elements.
Samsung Internet Android Support complet Oui
autocapitalize
Non-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
autocompleteChrome Aucun support Non
Notes
Aucun support Non
Notes
Notes See issue 758078.
Edge Aucun support NonFirefox Support complet 59IE Aucun support NonOpera Aucun support NonSafari Support complet Oui
Notes
Support complet Oui
Notes
Notes See bug 150731.
WebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile ? Firefox Android Support complet 59Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
autofocusChrome Support complet OuiEdge Support complet OuiFirefox Support complet 4IE Support complet 10Opera Support complet OuiSafari Support complet OuiWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Support complet 4Opera Android ? Safari iOS ? Samsung Internet Android ?
colsChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
disabledChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
formChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
maxlengthChrome Support complet OuiEdge Support complet OuiFirefox Support complet 4IE Support complet 10Opera Support complet OuiSafari Support complet OuiWebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android ? Safari iOS ? Samsung Internet Android ?
minlengthChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
nameChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
placeholderChrome Support complet OuiEdge Support complet OuiFirefox Support complet 4IE Support complet 10Opera Support complet 11.5Safari Support complet 5WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 11.5Safari iOS Support complet 4Samsung Internet Android ?
readonlyChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
requiredChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
rowsChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
spellcheckChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
wrapChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, lulu5239, kagagnon, wakka27, emagnier, tregagnon, teoli
Dernière mise à jour par : SphinxKnight,