HTML textarea : texte multiligne, longueur, readonly et valeurs envoyées

HTML textarea accepte plusieurs lignes de texte brut. Mettez le contenu initial entre ses balises d'ouverture et de fermeture, utilisez rows/cols pour la taille d'affichage, et minlength/maxlength pour la longueur de saisie. Définissez name pour soumettre la valeur avec un formulaire.

Taille d'affichage, contenu initial et limites de saisie

textarea a besoin d'une balise de fermeture. Contrairement à input, il n'utilise pas un attribut de valeur HTML pour la valeur initiale. Les sauts de ligne et les espaces entre ses balises affectent le contenu, donc vérifiez que l'indentation du formatage n'introduit pas d'entrée indésirable.

Exécutez un exemple complet à entrée multiple

Enregistrez ce code complet sous textarea.html et ouvrez-le dans un navigateur. Aucun serveur ni bibliothèque supplémentaire n'est nécessaire. Le bouton de soumission affiche les entrées nom/valeur du navigateur au lieu de les envoyer.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Saisie textarea et valeurs envoyées</title>
  <style>
    body { font-family: sans-serif; margin: 24px; }
    label, textarea { display: block; }
    textarea { max-width: 100%; box-sizing: border-box; margin: 8px 0 20px; resize: vertical; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Rédiger une demande</h1>
  <form id="demo">
    <label for="message">Message (5 à 200 unités de code)</label>
    <textarea id="message" name="message" rows="4" cols="32"
      minlength="5" maxlength="200" required
      placeholder="Décrivez le problème et le résultat souhaité.">Voici la première ligne.
Voici la deuxième ligne.</textarea>
    <label for="reference">Consigne en lecture seule</label>
    <textarea id="reference" name="reference" rows="2" readonly>Veuillez inclure le numéro de commande.</textarea>
    <label for="locked">Champ désactivé</label>
    <textarea id="locked" name="locked" rows="2" disabled>Cette valeur est exclue de l’envoi.</textarea>
    <button type="submit">Afficher les valeurs envoyées</button>
    <button type="reset">Réinitialiser</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const result = document.querySelector('#result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

1. Soumettez le formulaire initial : message et reference apparaissent. Le JSON \n indique un saut de ligne dans la valeur ; locked est omis.
2. Effacez le message et soumettez : la validation obligatoire le bloque. Tapez ensuite directement deux ou trois caractères ordinaires et soumettez pour vérifier la validation de longueur minimale.
3. Entrez <b>Practice</b> comme message et soumettez. Comme l’entrée et la sortie sont du texte, le résultat affiche du texte en forme de balise au lieu de texte en gras.
4. La réinitialisation restaure le message original de deux lignes et efface le résultat. La réinitialisation revient aux valeurs par défaut HTML plutôt que de rendre la valeur vide.

La validation native du navigateur aide à la saisie utilisateur et à l'envoi ordinaire de formulaires. Les mêmes vérifications ne sont pas garanties pour les valeurs assignées par script, donc les applications réelles doivent également valider sur le serveur les valeurs obligatoires, les longueurs autorisées et les formats.

Distinguer le retour à la ligne visuel des véritables sauts de ligne

Un retour automatique dû à la largeur du champ diffère d’un saut de ligne saisi avec Entrée. Le wrap="soft" par défaut n'ajoute pas de retours à la ligne soumis simplement parce que le texte se replie visuellement. wrap="hard" ajoute des retours à la ligne soumis selon la largeur de colonne spécifiée et nécessite cols. Pour s'adapter à un écran étroit, commencez avec le retour à la ligne par défaut et la largeur CSS.

Le max-width: 100% de l'exemple aide à maintenir le champ dans son conteneur sur des écrans étroits, tandis que resize: vertical permet aux utilisateurs de changer sa hauteur. La largeur en pixels de cols="32" dépend de la police, des largeurs des caractères et du navigateur, donc ne supposez pas qu'exactement 32 caractères tiennent sur une ligne.

Lire les valeurs en JavaScript et les valider sur le serveur

Lisez l'entrée actuelle via textarea.value et la valeur par défaut via textarea.defaultValue. Pour lire les modifications de l'utilisateur, utilisez la valeur plutôt que le textContent de la balise. L'exemple écrit les résultats dans textContent afin que l'entrée ne soit pas exécutée en tant que HTML.

readonly et disabled ne sont pas des contrôles de sécurité. Les utilisateurs peuvent modifier les valeurs via les outils de développement ou des requêtes séparées, donc vérifiez les numéros de commande ou les données d'autorisation inchangeables par rapport aux données de serveur fiables. Si le serveur compte les octets ou une autre unité de caractère, vérifiez si sa limite utilise la même mesure que le maxlength du navigateur.

La référence de la zone de texte référence MDN de textarea explique les attributs et les contraintes.