Balise HTML <textarea>
La balise <textarea> définit un champ de formulaire dans lequel les utilisateurs peuvent saisir un texte sur plusieurs lignes. Contrairement à la balise <input>, le retour à la ligne à l’intérieur de <textarea> est autorisé lors de l’envoi du formulaire.
Une zone de texte peut contenir un nombre illimité de caractères. Le texte à l’intérieur de cette balise est affiché par défaut dans une police proportionnelle.
La balise <textarea> est utilisée à l’intérieur de la balise <form>.
Syntaxe
La balise <textarea> se présente par paires. Le contenu est écrit entre les balises ouvrante (<textarea>) et fermante (</textarea>).
TIP
Pour définir la taille d’un champ de texte, utilisez les attributs rows et cols, ou les propriétés CSS height et width.
Exemple de la balise HTML <textarea> :
Exemple de la balise HTML <textarea>|W3Docs
<!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 attribuer un nom à ce champ (« comment »), l’attribut rows pour définir sa hauteur (12 caractères) et l’attribut cols pour définir sa largeur (35 caractères).
Styliser l’élément <textarea> avec CSS
La balise <textarea> est considérée comme un élément remplacé, car elle possède certaines dimensions intrinsèques. La styliser est relativement simple avec du CSS classique.
Ses valeurs valides et invalides peuvent être mises en évidence avec les pseudo-classes :valid et :invalid.
TIP
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 mettant la valeur de resize à none.
Exemple de la balise HTML <textarea> avec des propriétés CSS :
Exemple de champ de texte avec la balise HTML <textarea>|W3Docs
<!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.
Attributs
| Attribute | Value | Description |
|---|---|---|
| autocomplete | on, off | Spécifie si un champ de texte doit avoir l’autocomplétion activée ou non. |
| autofocus | autofocus | Définit qu’une zone de texte doit automatiquement recevoir le focus lorsque la page se charge. |
| cols | number | Définit la largeur visible d’une zone de texte. La valeur par défaut est de 20 caractères. |
| dirname | dirname | Spécifie le nom d’un contrôle de formulaire caché qui contiendra la direction du texte du textarea lors de l’envoi. |
| disabled | disabled | Définit qu’une zone de texte doit être désactivée. |
| form | form_id | Définit un ou plusieurs formulaires auxquels la zone de texte appartient (via id). |
| maxlength | number | Définit le nombre maximal de caractères autorisés dans la zone de texte. |
| minlength | number | Définit le nombre minimal de caractères autorisés dans la zone de texte. |
| name | text | Définit un nom pour une zone de texte. |
| placeholder | text | Définit une courte indication décrivant la valeur attendue d’une zone de texte. L’indication s’affiche lorsque le champ est vide et disparaît lorsqu’il reçoit le focus. |
| readonly | readonly | Définit qu’une zone de texte est en lecture seule. |
| required | required | Définit qu’une zone de texte doit être remplie avant l’envoi du formulaire. |
| rows | number | Définit le nombre visible de lignes dans une zone de texte. La valeur par défaut est 2. |
| spellcheck | true, false, default | Spécifie si le texte dans la balise <textarea> doit être vérifié orthographiquement par le navigateur/système d’exploitation sous-jacent. |
| wrap | soft, hard | Définit comment le texte d’une zone de texte doit être renvoyé à la ligne lors de l’envoi du formulaire. soft (par défaut) : le texte est envoyé sans retours à la ligne supplémentaires. hard : le navigateur insère des retours à la ligne en fonction de la largeur (nécessite cols). |
La balise <textarea> prend également en charge les Global Attributes et les Event Attributes.
Comment styliser une balise HTML <textarea>
{
"tag_name": "textarea"
}Practice
What are some of the attributes of the HTML <textarea> tag?