Textarea en HTML
Avant, form="id" et form* traitaient propriété et routage d'envoi. Textarea est un autre rôle : champ texte multiligne pour messages et notes. Un input monoligne convient mal aux paragraphes. Utilisez textarea quand l'utilisateur a besoin de plus d'une ligne.
Pourquoi textarea existe
Contact, tickets, bios et avis ont besoin d'une hauteur scrollable. Textarea envoie ce texte comme un seul champ nommé. Label, name et indices de taille restent — mais le contenu vit entre les balises, pas dans value comme un input.
Réponse directe
1) Écrivez textarea avec id, name, rows. 2) Reliez un label via for. 3) Texte par défaut entre les balises — pas value. 4) Optionnel : placeholder, maxlength, readonly, disabled, required, wrap. 5) Saisie multiligne — pas l'association form= précédente.
📊 Textarea attributes beginners use
| Attribute | Role | Beginner tip |
|---|---|---|
| name | Submit key | Required if the text should post with the form |
| id | Label hook | Match label for= for accessible naming |
| rows | Visible height hint | Lines of height before scrolling |
| cols | Visible width hint | Prefer CSS width for responsive layouts |
| placeholder | Soft hint | Disappears when the user types |
| maxlength | Character cap | Browser-enforced upper bound |
| readonly / disabled | Lock vs mute | readonly still submits; disabled usually does not |
| wrap | Soft/hard wrap | Affects how line breaks are submitted (soft vs hard) |
Formulaire de feedback : boîte message
Un court feedback garde l'e-mail en input monoligne et le message en textarea. Le texte de départ est entre les balises.
<form action="/feedback" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<label for="msg">Message</label>
<textarea id="msg" name="msg" rows="6" cols="40"
placeholder="What went well? What can improve?">Thanks for reading —</textarea>
<button type="submit">Send feedback</button>
</form>
Lire la démo feedback
- Multiligne = textarea, pas input
- id correspond au label for
- name clé le paragraphe envoyé
- rows/cols suggèrent la taille
- Texte par défaut entre les balises
- Gardez des labels clairs
- form= inutile ici — champs dans le form
Taille, limites et wrap
Seconde démo : bio avec maxlength, wrap=soft et CSS à la place de cols. readonly sur un résumé en lecture seule.
<label for="bio">Short bio</label>
<textarea id="bio" name="bio" rows="4" maxlength="280"
wrap="soft"
style="width:100%; max-width:28rem; resize:vertical;"
placeholder="Up to 280 characters"></textarea>
<label for="summary">Auto summary (read-only)</label>
<textarea id="summary" name="summary" rows="3" readonly>Generated preview — edit the bio above.</textarea>
Lire la démo taille
- maxlength plafonne la longueur
- wrap=soft pour retours visuels sans hard
- CSS width et resize affinent
- readonly visible sans édition
- name toujours nécessaire pour l'envoi
- Suite : select pour choisir dans une liste
Choisir textarea vs input
- Une courte ligne : input
- Paragraphes/messages : textarea
- Taille avec rows et CSS ; cols plutôt legacy
- Contenu par défaut entre balises — pas value
- Toujours label et name
- Imbriquer dans form si possible
- Ne pas confondre avec formaction/propriété
Pratique — construire et redimensionner
- Copiez le feedback ; changez le texte entre balises
- Réduisez rows
- Ajoutez maxlength
- Remplacez cols par une width CSS
- Testez value un instant puis retirez
- Phrase : textarea entre balises ; input avec value
- Les listes iront dans select ensuite
Erreurs faciles
- Texte par défaut dans value au lieu d'entre balises
- Oublier name
- Sans label
- input monoligne alors qu'il faut plusieurs lignes
- Confusion avec form=/formaction
- Seulement cols pour la largeur responsive
- disabled au lieu de readonly
Résumé
- textarea = texte multiligne
- label et souvent name
- Texte par défaut entre les balises
- rows/CSS ; optionnel maxlength, placeholder, readonly
- Pas les attributs d'association du form précédent
- Suite : select
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut