<textarea>
Un champ de texte multiligne pour des saisies plus longues : messages, avis, descriptions.
- Affichage
- inline-block
- Balise fermante
- Obligatoire
- Contenu autorisé
- Texte qui devient la valeur initiale du champ
Exemple
#<style>
label { display: block; margin-bottom: 6px; }
textarea { width: 100%; max-width: 420px; }
</style>
<label for="feedback">Qu’est-ce qu’on pourrait améliorer dans le cours ?</label>
<textarea id="feedback" name="feedback" rows="4" maxlength="500" placeholder="Écrivez quelques phrases…"></textarea>Définition et utilisation
#L’élément <textarea> crée un champ dans lequel on peut écrire plusieurs lignes de texte : un message dans un formulaire de contact, un commentaire, une description de projet ou un extrait de code. Contrairement à <input>, il a une balise fermante, et vous écrivez la valeur initiale entre les balises, et non dans un attribut value.
Le texte entre les balises est pris à la lettre, espaces compris. Les indentations de votre code source se retrouveront donc dans le champ, alors fermez </textarea> juste après le contenu, sans espacement supplémentaire.
Vous réglez la taille avec les attributs rows et cols, ou en CSS. Par défaut, l’utilisateur peut redimensionner le champ en faisant glisser son coin, un comportement contrôlé par la propriété CSS resize. Depuis 2026, dans tous les grands navigateurs, le champ peut aussi grandir seul avec son contenu grâce à field-sizing: content.
Syntaxe
#<textarea name="nom" rows="4"></textarea>Attributs
#nombre
La hauteur du champ en lignes de texte et sa largeur en caractères, 2 lignes et 20 caractères par défaut. Ce n’est qu’une taille initiale, que vous pouvez remplacer en CSS.texte
Une indication visible dans un champ vide. Comme dans<input>, elle ne remplace pas une étiquette.nombre de caractères
La longueur de texte minimale et maximale autorisée.maxlengthbloque la saisie au-delà de cette limite, etminlengthest vérifié lors de l’envoi du formulaire.attribut booléen
Le champ doit être rempli avant que le formulaire puisse s’envoyer.attribut booléen
readonlypermet de lire et de copier le texte, mais pas de le modifier, et la valeur sera envoyée.disableddésactive complètement le champ et l’ignore lors de l’envoi.wrap
soft | hard
Détermine si les longues lignes retournées à l’écran dans le champ doivent être envoyées avec des caractères de nouvelle ligne supplémentaires.soft(par défaut) ne retourne le texte qu’à l’écran, tandis quehardinsère de vrais caractères de nouvelle ligne lors de l’envoi et exige quecolssoit indiqué.
L’élément accepte aussi tous les attributs globaux, comme class, id, style ou hidden.
Attributs en pratique
#rows / cols
nombreLa hauteur du champ en lignes de texte et sa largeur en caractères, 2 lignes et 20 caractères par défaut. Ce n’est qu’une taille initiale, que vous pouvez remplacer en CSS.
<textarea rows="5" cols="36" aria-label="Notes">Leçon 3 : les formulaires
- une étiquette se relie à un champ grâce à for
- un bouton sans type envoie le formulaire</textarea>placeholder
texteUne indication visible dans un champ vide. Comme dans <input>, elle ne remplace pas une étiquette.
<textarea rows="3" cols="36" aria-label="Description du projet" placeholder="Qu’avez-vous appris en construisant ce projet ?"></textarea>minlength / maxlength
nombre de caractèresLa longueur de texte minimale et maximale autorisée. maxlength bloque la saisie au-delà de cette limite, et minlength est vérifié lors de l’envoi du formulaire.
<form>
<textarea name="bio" rows="3" cols="36" minlength="20" maxlength="160" required aria-label="À propos de moi"></textarea>
<p><button>Enregistrer la bio</button></p>
</form>required
attribut booléenLe champ doit être rempli avant que le formulaire puisse s’envoyer.
<form>
<textarea name="question" rows="2" cols="36" required aria-label="Question pour le mentor"></textarea>
<p><button>Poser la question</button></p>
</form>readonly / disabled
attribut booléenreadonly permet de lire et de copier le texte, mais pas de le modifier, et la valeur sera envoyée. disabled désactive complètement le champ et l’ignore lors de l’envoi.
<p><textarea rows="2" cols="36" readonly aria-label="Texte de l’exercice">Construisez une page avec trois sections et un menu.</textarea></p>
<p><textarea rows="2" cols="36" disabled aria-label="Commentaire du mentor">Le mentor n’a pas encore évalué l’exercice.</textarea></p>Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Ne définissez pas le contenu avec un attribut
value, car<textarea>n’en a pas. Écrivez la valeur initiale entre les balises. - Si l’utilisateur ne doit redimensionner que la hauteur du champ, réglez
resize: verticalen CSS. - Pour les champs avec une limite de caractères, affichez un compteur, par exemple « 120/500 », pour que la limite ne surprenne pas l’utilisateur en pleine phrase.
Entrées associées
#- <input>Un champ de formulaire : texte, e-mail, mot de passe, nombre, date, curseur, case à cocher, fichier et bien plus encore.
- <label>L’étiquette d’un champ de formulaire. Cliquer sur l’étiquette déplace le curseur vers le champ.
- <form>Un formulaire qui collecte des données auprès de l’utilisateur et les envoie à une adresse donnée.
- <button>Un bouton cliquable : il envoie un formulaire, le réinitialise, ou lance une action sur la page.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.