Docs HTML exécutables : Textarea

Q: Comment créer un textarea en HTML ?

Écrivez dans un formulaire, avec un . Contrairement à , il a une balise fermante, et tout ce qui se trouve entre les balises est le texte de départ.

Q: Comment définir la valeur par défaut d'un textarea ?

Placez le texte entre les balises : Hello . Un textarea n'a pas d'attribut value en HTML. En JavaScript, lisez et définissez textarea.value.

Q: Comment empêcher le redimensionnement d'un textarea ?

Définissez resize: none en CSS. resize: vertical est généralement plus agréable : le lecteur peut toujours l'agrandir en hauteur pour un long texte, mais ne peut pas casser votre mise en page en l'élargissant.

Q: Comment limiter le nombre de caractères d'un textarea ?

Ajoutez maxlength="280". Le navigateur cesse d'accepter la saisie à cette longueur. Affichez à côté un compteur, mis à jour sur l'événement input, pour que le lecteur sache combien de place il lui reste, et vérifiez aussi la longueur sur le serveur.

Comment faire un textarea

<textarea> est un champ de texte sur plus d'une ligne : messages, commentaires, descriptions. rows fixe sa hauteur visible en lignes. Tapez quelques lignes et appuyez sur Send :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Textarea</title>
</head>
<body>
  <form>
    <label for="msg">Message</label><br>
    <textarea id="msg" name="message" rows="4" cols="40" placeholder="What would you like to ask?"></textarea>
    <br>
    <button type="submit">Send</button>
  </form>
</body>
</html>

Deux choses diffèrent de <input> : un textarea a besoin d'une balise fermante, et son texte de départ se place entre les balises au lieu d'un attribut value. Son name est envoyé avec le texte comme valeur, retours à la ligne compris.

Les attributs du textarea

Attribut	Rôle
`name`	La clé sous laquelle le texte est envoyé
`rows`	Hauteur visible en lignes (2 par défaut)
`cols`	Largeur visible en caractères (20 par défaut) ; la `width` CSS est généralement préférable
`placeholder`	Une indication affichée tant qu'il est vide
`maxlength`, `minlength`	Limites de longueur en caractères
`required`	Ne doit pas être vide
`readonly`	Peut être sélectionné et copié, pas modifié ; toujours envoyé
`disabled`	Inutilisable ; pas envoyé
`wrap`	`soft` (par défaut) ou `hard`, voir plus bas
`spellcheck`	`true` ou `false`

Le texte par défaut va entre les balises

Tout ce qui se trouve entre <textarea> et </textarea> est le texte de départ, exactement tel qu'il est écrit : espaces, tabulations et retours à la ligne compris. Seul un retour à la ligne placé juste après la balise ouvrante est ignoré. Cela fait de l'indentation un piège :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Default text</title>
  <style>
    textarea { display: block; margin-bottom: 12px; font: inherit; }
  </style>
</head>
<body>
  <textarea rows="2">Hello, this is the default text.</textarea>

  <textarea rows="3">
    Indented to match the HTML
  </textarea>

  <p id="out"></p>
  <script>
    const [a, b] = document.querySelectorAll('textarea');
    document.querySelector('#out').textContent =
      'Lengths: ' + a.value.length + ' and ' + b.value.length +
      ' (the second adds 4 leading spaces, a line break and 2 more spaces)';
  </script>
</body>
</html>

Le second textarea commence par quatre espaces et finit par un retour à la ligne et deux espaces de plus, que le lecteur doit tous supprimer. Écrivez le texte par défaut collé aux balises.

Le HTML à l'intérieur d'un textarea n'est pas interprété ; <b>hi</b> entre les balises s'affiche tel quel.

Largeur, redimensionnement et hauteur automatique

Les navigateurs laissent le lecteur tirer le coin pour redimensionner un textarea. La propriété CSS resize limite cela, et width: 100% avec box-sizing: border-box lui fait remplir exactement son conteneur :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Resize</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    textarea {
      display: block;
      width: 100%;
      box-sizing: border-box;
      margin: 4px 0 14px;
      padding: 8px;
      font: inherit;
      border: 2px solid #9ca3af;
      border-radius: 8px;
    }
    .vertical { resize: vertical; min-height: 60px; }
    .none { resize: none; }
    .grow { resize: none; overflow: hidden; }
  </style>
</head>
<body>
  <label>resize: vertical <textarea class="vertical" rows="2"></textarea></label>
  <label>resize: none <textarea class="none" rows="2"></textarea></label>
  <label>grows as you type <textarea class="grow" rows="2" id="grow"></textarea></label>

  <script>
    const grow = document.querySelector('#grow');
    grow.addEventListener('input', () => {
      grow.style.height = 'auto';
      const border = grow.offsetHeight - grow.clientHeight;
      grow.style.height = grow.scrollHeight + border + 'px';
    });
  </script>
</body>
</html>

Le dernier réinitialise sa hauteur puis la règle sur scrollHeight (la hauteur de son contenu et de son padding) plus ses bordures, à chaque frappe. Tapez plusieurs lignes dedans : il n'affiche jamais de barre de défilement. resize: vertical est la valeur par défaut la plus agréable : les longues réponses ont de la place, et personne ne peut élargir le champ au-delà de la mise en page.

Les navigateurs basés sur Chromium savent faire l'agrandissement automatique en CSS seul avec field-sizing: content. Les navigateurs qui ne le prennent pas en charge ignorent la ligne et gardent la taille normale, donc vous pouvez l'ajouter sans risque, mais gardez le script si chaque lecteur doit avoir le champ qui s'agrandit.

maxlength et un compteur de caractères

maxlength arrête la saisie à un nombre de caractères. Seul, il ne prévient pas, donc le lecteur ne s'en aperçoit que lorsque la frappe cesse de fonctionner. Un compteur règle cela :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Character counter</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    textarea { display: block; width: 100%; box-sizing: border-box; font: inherit; padding: 8px; }
    .count { font-size: 14px; color: #4b5563; }
    .count.near { color: #b45309; font-weight: 600; }
  </style>
</head>
<body>
  <form>
    <label for="bio">Short bio</label>
    <textarea id="bio" name="bio" rows="3" maxlength="100" aria-describedby="bio-count"></textarea>
    <p class="count" id="bio-count" aria-live="polite">100 characters left</p>
    <button type="submit">Save</button>
  </form>

  <script>
    const bio = document.querySelector('#bio');
    const count = document.querySelector('#bio-count');
    bio.addEventListener('input', () => {
      const left = bio.maxLength - bio.value.length;
      count.textContent = left + ' characters left';
      count.classList.toggle('near', left <= 20);
    });
  </script>
</body>
</html>

aria-describedby fait lire le compteur par les lecteurs d'écran avec le champ, et aria-live="polite" annonce ses changements entre les frappes. maxlength n'est imposé que par le navigateur, donc le serveur doit aussi vérifier la longueur.

Les retours à la ligne dans le texte envoyé

Les retours à la ligne du lecteur sont envoyés avec le texte. Dans les données envoyées, chacun devient une paire retour chariot et saut de ligne (%0D%0A dans un formulaire encodé pour l'URL), ce qu'attendent la plupart des serveurs. Pour afficher plus tard le texte sur une page avec ses retours à la ligne, convertissez-les en <br> à l'affichage ou stylisez l'élément avec white-space: pre-line.

wrap="hard" (qui a besoin de cols) va plus loin : il insère aussi des retours à la ligne là où le texte a été coupé visuellement, donc le serveur reçoit des lignes d'au plus cols caractères. La valeur par défaut, wrap="soft", n'envoie que les retours à la ligne tapés par le lecteur.

Styliser un textarea

Chrome et Firefox donnent aux textareas une police à chasse fixe d'environ 13px, ce qui explique qu'un textarea paraisse souvent déplacé. font: inherit corrige cela. Gardez un style de focus visible si vous changez la bordure :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled textarea</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 16px; }
    textarea { display: block; margin: 4px 0 12px; }
    .styled {
      font: inherit;
      padding: 10px 12px;
      border: 1px solid #9ca3af;
      border-radius: 8px;
      resize: vertical;
    }
    .styled:focus-visible { outline: 3px solid #2563eb; outline-offset: 1px; border-color: #2563eb; }
    .styled::placeholder { color: #6b7280; }
  </style>
</head>
<body>
  <label>Browser default <textarea rows="2">Monospace, small</textarea></label>
  <label>Styled <textarea class="styled" rows="2">Same font as the page</textarea></label>
</body>
</html>

Le texte du placeholder doit avoir un contraste lisible ; le gris clair que beaucoup de designs utilisent est difficile à lire. Et, comme sur tous les champs, le placeholder n'est pas un label : il disparaît dès que le lecteur tape. Les labels sont présentés dans label HTML.

Erreurs fréquentes

<textarea value="...">. Il n'existe pas d'attribut value ; placez le texte entre les balises.
Indenter le texte par défaut en même temps que le HTML. Les espaces font partie de la valeur.
Un <textarea /> auto-fermant. Ce n'est pas un élément vide ; sans </textarea>, le reste de la page est avalé dedans comme du texte.
Pas de font: inherit, si bien que le champ utilise une petite police à chasse fixe.
resize: none avec une petite hauteur fixe. Les longues réponses finissent dans une minuscule boîte qui défile.
Compter uniquement sur maxlength. Validez aussi la longueur sur le serveur.

Questions fréquentes

Comment créer un textarea en HTML ?

Écrivez <textarea name="message" rows="4"></textarea> dans un formulaire, avec un <label>. Contrairement à <input>, il a une balise fermante, et tout ce qui se trouve entre les balises est le texte de départ.

Comment définir la valeur par défaut d'un textarea ?

Placez le texte entre les balises : <textarea name="bio">Hello</textarea>. Un textarea n'a pas d'attribut value en HTML. En JavaScript, lisez et définissez textarea.value.

Comment empêcher le redimensionnement d'un textarea ?

Définissez resize: none en CSS. resize: vertical est généralement plus agréable : le lecteur peut toujours l'agrandir en hauteur pour un long texte, mais ne peut pas casser votre mise en page en l'élargissant.

Comment limiter le nombre de caractères d'un textarea ?

Ajoutez maxlength="280". Le navigateur cesse d'accepter la saisie à cette longueur. Affichez à côté un compteur, mis à jour sur l'événement input, pour que le lecteur sache combien de place il lui reste, et vérifiez aussi la longueur sur le serveur.

Pourquoi mon textarea utilise une autre police ?

Chrome et Firefox donnent par défaut aux textareas une police à chasse fixe d'environ 13px. Ajoutez font: inherit pour l'accorder au reste de la page.

Concepts liés