user
Qu'est qu'une balise HTML textarea ?
alphonsio

La balise textarea en HTML

La balise HTML <textarea> permet de créer un champs d'édition de texte sur plusieurs lignes dans un navigateur. Par exemple, le code suivant crée une zone d'édition de texte de 4 lignes comportant chacun environ 33 caractères :

<textarea rows="5" cols="33">Texte par défaut</textarea>

Le rendu peut varier selon les navigateurs, mais le code précédent devrait afficher :

Contrairement à la balise <input type="text"> qui crée un champ de texte sur une seule ligne, <textarea> permet à l'utilisateur d'entrer plusieurs lignes de texte. Voici les caractéristiques et un exemple d'utilisation de cette balise :

Caractéristiques de la balise <textarea>

  1. Multi-lignes : Permet d'entrer du texte sur plusieurs lignes.
  2. Attributs principaux :
    • name : Spécifie le nom du champ de formulaire.
    • rows : Définit le nombre de lignes visibles dans la zone de texte.
    • cols : Définit le nombre de colonnes visibles dans la zone de texte.
    • placeholder : Affiche un texte indicatif lorsqu'aucune donnée n'est entrée.
    • maxlength : Spécifie le nombre maximal de caractères que l'utilisateur peut entrer.
    • readonly : Rend la zone de texte en lecture seule.
    • disabled : Désactive la zone de texte.
    • wrap : Définit la manière dont le texte est affiché lorsqu'il dépasse la largeur visible (peut être hard ou soft).

Exemple d'utilisation

<!DOCTYPE html>
<html>
<head>
    <title>Exemple de Textarea</title>
</head>
<body>
    <form action="/submit" method="post">
        <label for="commentaire">Commentaire :</label><br>
        <textarea id="commentaire" name="commentaire" rows="4" cols="50" placeholder="Entrez votre commentaire ici..."></textarea><br>
        <input type="submit" value="Envoyer">
    </form>
</body>
</html>

Dans cet exemple :

  • La balise <textarea> crée un champ de texte multi-lignes pour les commentaires.
  • L'attribut id lie l'étiquette <label> à la zone de texte.
  • Les attributs rows et cols définissent la taille visible de la zone de texte.
  • L'attribut placeholder fournit une indication à l'utilisateur sur le contenu attendu.

Utilisation avancée

Vous pouvez également styliser la balise <textarea> avec du CSS pour ajuster son apparence selon vos besoins. Par exemple :

<style>
    textarea {
        width: 98%;
        height: 150px;
        font-size: 14px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
</style>

Cela permet de créer une zone de texte plus flexible et esthétiquement agréable dont voici l'exemple en ligne :