w3docs logo

Tag HTML <textarea>

Le tag <textarea> est utilisé pour spécifier la zone, dans laquelle l’utilisateur peut saisir un texte multiligne. Contrairement au tag <input>, où le transfert de ligne dans un champ de texte est impossible, dans le tag <textarea> les transferts sont autorisés, ils sont enregistrés lors de l'envoi de données au serveur.

Entre les tags ouvrant <textarea> et fermant </textarea>, on peut placer n’importe quel texte, qui sera affiché sous forme monospace. Vous pouvez entrer un nombre quelconque de caractères dans le champ de texte.

Syntaxe

Le contenu de l’élément est situé entre les tags ouvrant (<textarea>) et fermant (</textarea>).

Le tag <textarea> est utilisé dans le tag <form> .

Pour définir la taille du champ de texte, on peut utiliser les attributs cols et rows, ou utiliser les propriétés CSS height et width. Et à l’aide de la propriété CSS resize vous pouvez empêcher le champ de texte d'être redimensionné.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <form> 
      <textarea name="comment" rows="12" cols="35">Envoyez votre commenraires à l'auteur.</textarea><br>
      <input type="submit" name="submitInfo" value="Envoyer">
    </form>
  </body>
</html>

Résultat

Envoyez votre commenraires à l'auteur

Dans cet exemple, nous avons défini la zone de texte avec le tag <textarea>, en lui attribuant le nom "comment", en utilisant l'attribut name; nous avons défini la hauteur de la chaîne (12 caractères) avec l'attribut rows et spécifié la largeur du champ avec l'attribut cols (35 caractères). Nous avons également placé un bouton dans le formulaire, lorsque vous cliquez dessus, les informations saisies sont envoyées au serveur.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Ici, nous utilisons des styles CSS pour personnaliser l'apparence du champ de texte.</p>
      <textarea class="comment"> Envoyez votre commentaires à l'auteur.</textarea>
      <br>
      <input type="submit" name="submitInfo" value="Envoyer">
    </form>
  </body>
</html>

Résultat

Envoyez votre commenraires à l'auteur

Dans cet exemple nous avons utilisé les styles CSS pour la conception visuelle du champ de texte.

Attributs

Attribut Valeur Description
autocomplete on
off 		Détermine si le contenu de l'élément peut être automatiquement ajouté par le navigateur (auto-complete).
autofocus autofocus Indique que la zone de texte doit recevoir automatiquement le focus lorsque la page est chargée.
cols number Spécifie la largeur apparente de la zone de texte (en caractères). La valeur par défaut est 20 caractères.
dirname textareaname.dir Définit et transmet la direction du texte au serveur.
disabled disabled Un attribut logique indiquant que la zone de texte doit être désactivée.
form form_id Définit un ou plusieurs formulaires auxquels l'élément appartient et les associe à l'aide d'un identifiant (id).
maxlenght number Spécifie le nombre maximal de caractères que peut contenir une zone de texte.
minlength number Spécifie le nombre minimum de caractères qu'une zone de texte peut contenir.
name text Définit le nom de la zone de texte.
placeholder text Spécifie le texte de l’info-bulle qui décrit la valeur attendue pour que l'utilisateur entre dans l'élément. L'info-bulle est affichée dans une zone de texte vide et disparaît lorsqu'elle reçoit le focus.
readonly readonly Indique, que la zone de texte est disponible uniquement pour lire.
required required Un attribut logique indiquant que la zone de texte doit être remplie avant d'envoyer le formulaire.
rows number Spécifie le nombre de lignes visibles dans la zone de texte. La valeur par défaut est 2 caractères.
wrap Spécifie comment le texte doit être transféré lorsque le formulaire est envoyé.
soft - (la valeur par défaut), le texte est envoyé avec une ligne continue sans ajouter de sauts de ligne supplémentaires.
hard -le navigateur insère automatiquement des sauts de ligne afin que chaque ligne ne soit pas plus large que le champ de texte. Utilisé uniquement si l'attribut cols est défini.

Le tag <textarea> supporte également les Attributs globaux et les Attributs d'événements.

Comment styler le tag HTML <textarea> ?

Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <textarea>:

Coloration du texte dans le tag HTML <textarea>:

Styles de mise en page du texte pour la tag HTML <textarea>:

Autres propriétés utiles pour le tag HTML <textarea>:

Support de Navigateurs

chrome edge firefox safari opera
✓ ✓ ✓ ✓ ✓

Pratiquez vos connaissances

Quelles sont les principales fonctionnalités de la balise HTML <textarea> ?
Trouvez-vous cela utile?