Balise HTML <textarea>
La balise HTML <textarea> définit un champ de formulaire pour la saisie de texte multiligne, autorisé lors de la soumission du formulaire.
La balise <textarea> définit un champ de formulaire permettant aux utilisateurs de saisir du texte multiligne. Contrairement à la balise <input>, le retour à la ligne automatique à l'intérieur de <textarea> est autorisé lors de la soumission du formulaire.
Une zone de texte peut contenir un nombre illimité de caractères. Le texte dans cette balise est rendu avec une police proportionnelle par défaut.
La balise <textarea> est utilisée à l'intérieur de la balise <form>.
Syntaxe
La balise <textarea> fonctionne par paire. Le contenu est écrit entre les balises ouvrante (<textarea>) et fermante (</textarea>).
Une erreur fréquente chez les débutants : un <textarea> ne prend pas d'attribut value. Sa valeur par défaut se place entre les balises ouvrante et fermante, contrairement à un <input> sur une seule ligne qui utilise value="…". Par exemple, <textarea>Hello</textarea> affiche « Hello », tandis que <input value="Hello"> affiche « Hello » — mais <textarea value="Hello"></textarea> n'affiche rien.
Exemple de la balise HTML <textarea> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="post">
<textarea name="comment" rows="12" cols="35">Send your comments to the author.</textarea><br />
<input type="submit" name="submitInfo" value="Submit" />
</form>
</body>
</html>Résultat
Dans cet exemple, nous utilisons <textarea> pour définir le champ de texte, l'attribut name pour lui attribuer un nom (« comment »), l'attribut rows pour définir sa hauteur visible (12 lignes) et l'attribut cols pour définir sa largeur visible (35 caractères).
Associer un label à un <textarea>
Chaque champ de formulaire devrait avoir une balise <label>. Reliez le label à la zone de texte en donnant à celle-ci un id et en pointant l'attribut for du label vers cette même valeur. Cela permet aux lecteurs d'écran d'annoncer le champ, et aux utilisateurs de cliquer sur le texte du label pour déplacer le focus dans la zone de texte — deux améliorations pour l'accessibilité et l'utilisabilité.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="post">
<label for="comment">Your comment:</label><br />
<textarea id="comment" name="comment" rows="6" cols="40"></textarea><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>Limiter et guider la saisie
Utilisez l'attribut maxlength pour limiter le nombre de caractères qu'un utilisateur peut saisir, et l'attribut placeholder pour afficher une courte indication dans un champ vide. Le placeholder disparaît dès que l'utilisateur commence à taper — ce n'est pas une valeur par défaut, il n'est donc jamais soumis avec le formulaire.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="post">
<label for="bio">Short bio (max 100 characters):</label><br />
<textarea id="bio" name="bio" rows="4" cols="40" maxlength="100"
placeholder="Tell us a little about yourself..."></textarea><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>Styliser l'élément <textarea> avec CSS
La balise <textarea> est considérée comme un élément remplacé, car elle possède des dimensions intrinsèques. La styliser est relativement simple avec du CSS ordinaire.
Ses valeurs valides et invalides peuvent être mises en évidence avec les pseudo-classes :valid et :invalid.
Dans la plupart des navigateurs, <textarea> est redimensionnable grâce à la propriété CSS resize. Le redimensionnement est activé par défaut. Vous pouvez le désactiver en passant la valeur resize à none.
Exemple de la balise HTML <textarea> avec des propriétés CSS :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.comment {
width: 60%;
height: 100px;
padding: 10px;
outline: 0;
border: 3px solid #1c87c9;
background: #d0e2bc;
line-height: 20px;
}
</style>
</head>
<body>
<form>
<p>Here we use CSS styles to customize the look of the text field.</p>
<textarea class="comment"> Send your comments to the author.</textarea>
<br />
<input type="submit" name="submitInfo" value="Submit" />
</form>
</body>
</html>Dans cet exemple, nous utilisons des styles CSS pour personnaliser l'apparence du champ de texte.
Contrôler le redimensionnement avec la propriété resize
Par défaut, la plupart des navigateurs ajoutent une poignée de glissement dans le coin d'un <textarea> afin que les utilisateurs puissent le redimensionner dans les deux directions. Vous pouvez contrôler cela avec la propriété CSS resize :
resize: none;— désactive entièrement le redimensionnement.resize: vertical;— permet de redimensionner uniquement la hauteur.resize: horizontal;— permet de redimensionner uniquement la largeur.resize: both;— valeur par défaut, permet le redimensionnement dans les deux directions.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
textarea {
width: 60%;
padding: 8px;
}
.no-resize {
resize: none;
}
.vertical-only {
resize: vertical;
}
.horizontal-only {
resize: horizontal;
}
</style>
</head>
<body>
<p>Not resizable:</p>
<textarea class="no-resize" rows="3"></textarea>
<p>Resizable vertically only:</p>
<textarea class="vertical-only" rows="3"></textarea>
<p>Resizable horizontally only:</p>
<textarea class="horizontal-only" rows="3"></textarea>
</body>
</html>Attributs
| Attribut | Valeur | Description |
|---|---|---|
| autocomplete | on, off | Indique si la complétion automatique doit être activée pour le champ de texte. |
| autofocus | autofocus | Définit que la zone de texte doit recevoir le focus automatiquement au chargement de la page. |
| cols | nombre | Définit la largeur visible de la zone de texte. La valeur par défaut est 20 caractères. |
| dirname | dirname | Spécifie le nom d'un contrôle de formulaire masqué qui contiendra la direction du texte de la zone de texte lors de la soumission. |
| disabled | disabled | Définit que la zone de texte doit être désactivée. |
| form | form_id | Définit un ou plusieurs formulaires auxquels appartient la zone de texte (via l'id). |
| maxlength | nombre | Définit le nombre maximum de caractères autorisés dans la zone de texte. |
| minlength | nombre | Définit le nombre minimum de caractères autorisés dans la zone de texte. |
| name | texte | Définit un nom pour la zone de texte. |
| placeholder | texte | Définit une courte indication décrivant la valeur attendue dans la zone de texte. L'indication s'affiche quand le champ est vide et disparaît quand il reçoit le focus. |
| readonly | readonly | Définit que la zone de texte est en lecture seule. |
| required | required | Définit que la zone de texte doit être remplie avant l'envoi du formulaire. |
| rows | nombre | Définit le nombre visible de lignes dans la zone de texte. La valeur par défaut dépend du navigateur (généralement 2). |
| spellcheck | true, false, default | Indique si le texte dans la balise <textarea> doit être vérifié par le correcteur orthographique du navigateur ou du système d'exploitation. |
| wrap | soft, hard | Définit la manière dont le texte d'une zone de texte doit être mis à la ligne lors de la soumission du formulaire. soft (par défaut) : le texte est envoyé sans sauts de ligne supplémentaires. hard : le navigateur insère des sauts de ligne en fonction de la largeur (nécessite cols). |
La balise <textarea> supporte également les Attributs globaux et les Attributs d'événement.
Balises associées
<input>— contrôles de formulaire sur une seule ligne et spécialisés.<form>— le conteneur qui regroupe et soumet les champs de formulaire.<label>— labels qui rendent les champs de formulaire accessibles.