Qu'est-ce que la balise <textarea> en HTML ?

Introduction à la balise <textarea>

La balise <textarea> est un élément fondamental des formulaires HTML qui permet aux utilisateurs de saisir du texte sur plusieurs lignes. Contrairement à la balise <input> qui se limite à une seule ligne de texte, le <textarea> offre un espace de saisie extensible, idéal pour les commentaires, les messages, les descriptions longues ou tout contenu textuel nécessitant plus d'espace.

Si vous souhaitez maîtriser parfaitement les formulaires HTML et créer des interfaces utilisateur professionnelles, notre formation complète sur HTML vous guidera pas à pas dans l'apprentissage de ces concepts essentiels. Vous y découvrirez comment créer des formulaires interactifs et accessibles qui répondent aux standards du web moderne.

Dans cet article, nous allons explorer en profondeur le fonctionnement de la balise <textarea>, ses nombreux attributs, ses cas d'utilisation pratiques et les bonnes pratiques à adopter pour créer des champs de texte accessibles et ergonomiques.

Définition et syntaxe de base

Structure fondamentale

La balise <textarea> est un élément HTML de formulaire qui crée une zone de saisie de texte multi-lignes. Contrairement à la plupart des éléments de formulaire, c'est une balise qui nécessite une ouverture et une fermeture, et le texte par défaut se place entre ces deux balises.

<textarea>Votre texte par défaut ici</textarea>

La syntaxe de base avec les attributs les plus courants ressemble à ceci :

<textarea name="message" rows="5" cols="40" placeholder="Écrivez votre message..."></textarea>

Voici les éléments clés de cette syntaxe :

• name : identifie le champ lors de l'envoi du formulaire
• rows : définit le nombre de lignes visibles
• cols : définit le nombre de colonnes (caractères) visibles
• placeholder : affiche un texte d'indication grisé

Différence avec l'élément input

Il est important de comprendre la différence fondamentale entre <textarea> et <input type="text"> :

Association avec un label

Pour une meilleure accessibilité, vous devez toujours associer votre <textarea> à un élément label. Cela permet aux lecteurs d'écran d'identifier correctement le champ et améliore l'expérience utilisateur :

<label for="commentaire">Votre commentaire :</label>
<textarea id="commentaire" name="commentaire" rows="4" cols="50"></textarea>

Attributs de la balise <textarea>

Attributs de dimensionnement

Les attributs rows et cols permettent de définir la taille visible du champ de texte. Ces valeurs représentent respectivement le nombre de lignes et le nombre de caractères de largeur :

<!-- Petit champ de commentaire -->
<textarea rows="3" cols="30"></textarea>

<!-- Grand champ pour contenu long -->
<textarea rows="10" cols="80"></textarea>

Nous vous recommandons cependant de privilégier le CSS pour gérer les dimensions, car cela offre plus de flexibilité et un meilleur contrôle responsive :

.textarea-believemy {
  width: 100%;
  min-height: 150px;
  max-height: 400px;
  resize: vertical;
}

Attributs de comportement

Plusieurs attributs permettent de contrôler le comportement du <textarea> :

Voici un exemple combinant plusieurs de ces attributs :

<form action="/envoyer" method="post">
  <label for="description">Description du projet Believemy :</label>
  <textarea 
    id="description" 
    name="description" 
    required 
    autofocus
    rows="6"
    placeholder="Décrivez votre projet de formation..."
  ></textarea>
  <button type="submit">Envoyer</button>
</form>

Attributs de validation

HTML5 a introduit des attributs de validation natifs pour le <textarea> qui permettent de vérifier le contenu côté client avant l'envoi du formulaire :

<textarea 
  name="avis" 
  minlength="20" 
  maxlength="500"
  required
  placeholder="Votre avis doit contenir entre 20 et 500 caractères"
></textarea>

• minlength : nombre minimum de caractères requis
• maxlength : nombre maximum de caractères autorisés
• required : rend le champ obligatoire

L'attribut wrap expliqué

L'attribut wrap contrôle la façon dont le texte est formaté lors de l'envoi du formulaire :

• soft (par défaut) : le texte apparaît avec des retours à la ligne visuels, mais ils ne sont pas inclus lors de l'envoi
• hard : les retours à la ligne sont inclus dans les données envoyées (nécessite l'attribut cols)
• off : pas de retour à la ligne automatique, le texte défile horizontalement

<!-- Le texte envoyé contiendra des retours à la ligne -->
<textarea wrap="hard" cols="40" name="texte_formate"></textarea>

Exemples pratiques et cas d'utilisation

Formulaire de contact complet

Voici un exemple de formulaire de contact professionnel intégrant un <textarea> pour le message :

<form action="/contact" method="post" class="formulaire-contact">
  <div class="champ">
    <label for="nom">Votre nom :</label>
    <input type="text" id="nom" name="nom" required>
  </div>
  
  <div class="champ">
    <label for="email">Votre email :</label>
    <input type="email" id="email" name="email" required>
  </div>
  
  <div class="champ">
    <label for="sujet">Sujet de votre message :</label>
    <input type="text" id="sujet" name="sujet" required>
  </div>
  
  <div class="champ">
    <label for="message">Votre message :</label>
    <textarea 
      id="message" 
      name="message" 
      rows="8" 
      required
      minlength="50"
      maxlength="2000"
      placeholder="Décrivez votre demande en détail (minimum 50 caractères)..."
    ></textarea>
  </div>
  
  <button type="submit">Envoyer le message</button>
</form>

Système de commentaires

Pour un système de commentaires sur un site comme Believemy, nous pouvons créer un <textarea> stylisé et fonctionnel :

<div class="section-commentaires">
  <h3>Laisser un commentaire sur cette formation</h3>
  
  <form action="/commentaires/ajouter" method="post">
    <input type="hidden" name="formation_id" value="html-css">
    
    <div class="groupe-formulaire">
      <label for="commentaire">Votre commentaire :</label>
      <textarea 
        id="commentaire" 
        name="contenu"
        rows="5"
        required
        minlength="10"
        maxlength="1000"
        placeholder="Partagez votre expérience avec cette formation Believemy..."
      ></textarea>
      <span class="compteur-caracteres">0 / 1000</span>
    </div>
    
    <button type="submit" class="btn-commenter">Publier le commentaire</button>
  </form>
</div>

Éditeur de contenu simple

Pour une interface d'édition de contenu, le <textarea> peut servir de base à un éditeur plus complexe :

<div class="editeur-contenu">
  <div class="barre-outils">
    <button type="button" data-action="gras"><strong>G</strong></button>
    <button type="button" data-action="italique"><em>I</em></button>
    <button type="button" data-action="lien">🔗</button>
  </div>
  
  <textarea 
    id="editeur" 
    name="contenu_article"
    rows="20"
    placeholder="Rédigez votre article ici..."
    spellcheck="true"
  ></textarea>
  
  <div class="apercu" id="apercu"></div>
</div>

Stylisation CSS du textarea

Styles de base

Le <textarea> peut être entièrement personnalisé avec CSS. Voici un exemple de styles modernes :

/* Style de base pour textarea */
.textarea-believemy {
  width: 100%;
  min-height: 120px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  resize: vertical;
}

/* État focus */
.textarea-believemy:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

/* État désactivé */
.textarea-believemy:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

/* État invalide */
.textarea-believemy:invalid {
  border-color: #e53e3e;
}

/* Placeholder */
.textarea-believemy::placeholder {
  color: #999;
  opacity: 1;
}

Contrôle du redimensionnement

Par défaut, les navigateurs permettent à l'utilisateur de redimensionner le <textarea>. Vous pouvez contrôler ce comportement avec la propriété CSS resize :

/* Autoriser uniquement le redimensionnement vertical */
.textarea-vertical {
  resize: vertical;
}

/* Autoriser uniquement le redimensionnement horizontal */
.textarea-horizontal {
  resize: horizontal;
}

/* Autoriser les deux directions (défaut) */
.textarea-both {
  resize: both;
}

/* Interdire tout redimensionnement */
.textarea-fixed {
  resize: none;
}

Design responsive

Pour un <textarea> qui s'adapte à tous les écrans :

.textarea-responsive {
  width: 100%;
  min-height: 100px;
  max-width: 100%;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .textarea-responsive {
    min-height: 150px;
  }
}

@media (min-width: 1024px) {
  .textarea-responsive {
    min-height: 200px;
  }
}

Bonnes pratiques et accessibilité

Accessibilité du textarea

Pour rendre vos <textarea> accessibles à tous les utilisateurs, suivez ces recommandations essentielles :

• Toujours utiliser un label : associez chaque textarea à un label avec les attributs for et id
• Fournir des instructions claires : utilisez l'attribut aria-describedby pour lier des instructions supplémentaires
• Indiquer les champs obligatoires : utilisez aria-required="true" en plus de l'attribut required
• Gérer les erreurs : utilisez aria-invalid et aria-errormessage pour signaler les problèmes

<div class="groupe-formulaire">
  <label for="bio">Votre biographie <span class="requis">*</span></label>
  <span id="bio-instructions" class="instructions">
    Décrivez-vous en quelques phrases (50-500 caractères)
  </span>
  <textarea 
    id="bio" 
    name="biographie"
    aria-describedby="bio-instructions bio-erreur"
    aria-required="true"
    minlength="50"
    maxlength="500"
    required
  ></textarea>
  <span id="bio-erreur" class="erreur" role="alert"></span>
</div>

Optimisation des performances

Pour les <textarea> qui peuvent contenir beaucoup de texte, considérez ces optimisations :

• Debounce les événements : limitez la fréquence des traitements sur les événements input ou keyup
• Lazy loading du contenu : pour les très longs textes, chargez le contenu progressivement
• Limitez la taille maximale : utilisez maxlength pour éviter les abus

<!-- Textarea optimisé avec attributs de performance -->
<textarea 
  id="contenu-formation"
  name="contenu"
  maxlength="10000"
  spellcheck="false"
  autocomplete="off"
  autocapitalize="sentences"
></textarea>

Sécurité et validation

N'oubliez jamais que la validation côté client n'est qu'une aide à l'utilisateur. Vous devez TOUJOURS valider et assainir les données côté serveur :

Erreurs courantes à éviter

Erreur 1 : Oublier la balise fermante

Contrairement à <input>, le <textarea> nécessite une balise fermante :

<!-- ❌ INCORRECT -->
<textarea name="message" />

<!-- ✅ CORRECT -->
<textarea name="message"></textarea>

Erreur 2 : Utiliser l'attribut value

Le <textarea> n'utilise pas l'attribut value. Le contenu par défaut se place entre les balises :

<!-- ❌ INCORRECT -->
<textarea name="message" value="Texte par défaut"></textarea>

<!-- ✅ CORRECT -->
<textarea name="message">Texte par défaut</textarea>

Erreur 3 : Espaces indésirables

Attention aux espaces et retours à la ligne entre les balises, ils seront inclus comme contenu :

<!-- ❌ INCORRECT - contient des espaces -->
<textarea name="message">
  
</textarea>

<!-- ✅ CORRECT - pas d'espaces parasites -->
<textarea name="message"></textarea>

Erreur 4 : Négliger l'accessibilité

Ne jamais oublier d'associer un label au <textarea> :

<!-- ❌ INCORRECT -->
<textarea name="commentaire" placeholder="Votre commentaire"></textarea>

<!-- ✅ CORRECT -->
<label for="commentaire">Votre commentaire :</label>
<textarea id="commentaire" name="commentaire"></textarea>

Compatibilité navigateurs

La balise <textarea> bénéficie d'une excellente compatibilité avec tous les navigateurs modernes et anciens :

Les attributs HTML5 comme placeholder, minlength, maxlength et required sont supportés par tous les navigateurs modernes depuis plusieurs années.

Questions fréquentes sur le textarea

Les attributs rows et cols définissent les dimensions en termes de caractères et de lignes, tandis que CSS permet un contrôle précis en pixels, pourcentages ou autres unités. Nous recommandons d'utiliser CSS pour la mise en page, car cela offre plus de flexibilité et une meilleure adaptation aux différentes tailles d'écran.

Utilisez la propriété CSS resize: none; pour bloquer complètement le redimensionnement, ou resize: vertical; pour autoriser uniquement le redimensionnement vertical, ce qui est généralement le meilleur compromis entre ergonomie et contrôle de la mise en page.

Vous pouvez utiliser JavaScript pour écouter l'événement input sur le <textarea> et mettre à jour un compteur affiché à côté du champ. Combinez cela avec l'attribut maxlength pour limiter automatiquement la saisie.

Pour maîtriser parfaitement les formulaires HTML et tous les éléments comme le <textarea>, nous vous recommandons de suivre notre formation pour apprendre HTML. Vous y découvrirez toutes les techniques pour créer des formulaires professionnels, accessibles et optimisés pour le référencement.