`Textarea` pour les saisies multilignes

L’élément textarea

<label for="message">Message</label>
<textarea
  id="message"
  name="message"
  rows="5"
  cols="40"
  placeholder="Enter your message here..."
></textarea>
<!-- textarea is NOT a void element -- it has a closing tag -->
<!-- Default content goes between the tags, not in a value attribute -->

Attributs rows et cols

<!-- rows: height in lines (default: 2) -->
<!-- cols: width in characters (default: 20) -->
<textarea rows="6" cols="50">...</textarea>

<!-- Better: use CSS for sizing -->
<textarea style="width: 100%; height: 150px; resize: vertical;">

Définir le contenu par défaut

<textarea name="bio">
Hello! I am a developer who loves HTML.
</textarea>
<!-- Note: whitespace inside textarea IS rendered -->
<!-- The newline after the opening tag will appear in the textarea -->
<!-- Avoid whitespace between tags if you don't want it -->

Redimensionnement avec CSS

textarea {
  resize: vertical;    /* allow only vertical resize */
  /* resize: horizontal -- only horizontal */
  /* resize: both      -- both directions (default) */
  /* resize: none      -- prevent resizing */

  width: 100%;
  min-height: 120px;
  max-height: 400px;
  padding: 0.5rem;
  box-sizing: border-box;
}

Zone de texte à croissance automatique

<textarea id="auto-grow" rows="3" style="overflow: hidden;"></textarea>

<script>
const ta = document.getElementById('auto-grow');
ta.addEventListener('input', () => {
  ta.style.height = 'auto';
  ta.style.height = ta.scrollHeight + 'px';
});
</script>

maxlength et minlength

<label for="bio">Bio (max 500 characters)</label>
<textarea
  id="bio"
  name="bio"
  maxlength="500"
  minlength="10"
  rows="4"
></textarea>

<!-- Live character count: -->
<small id="char-count">0/500</small>
<script>
document.getElementById('bio').addEventListener('input', function() {
  document.getElementById('char-count').textContent =
    this.value.length + '/500';
});
</script>

Attribut spellcheck

<!-- Enable (default for textarea) -->
<textarea spellcheck="true">...</textarea>

<!-- Disable (for code editors, technical input) -->
<textarea spellcheck="false">...</textarea>

Attribut wrap

<!-- wrap="soft" (default): text wraps visually but newlines not added -->
<textarea wrap="soft">...</textarea>

<!-- wrap="hard": newlines inserted at wrap points when submitted -->
<!-- Requires cols to be set -->
<textarea wrap="hard" cols="40">...</textarea>

readonly et disabled

<!-- readonly: visible, selectable, submitted -->
<textarea readonly>This is read-only text.</textarea>

<!-- disabled: cannot interact, not submitted -->
<textarea disabled>Disabled textarea.</textarea>

Accessibilité des zones de texte

<label for="comment">Comment</label>
<textarea id="comment" aria-describedby="comment-hint"></textarea>
<p id="comment-hint">Maximum 200 characters.</p>

Mise en forme des zones de texte

textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 0.375rem;
  font-family: inherit;    /* match surrounding font */
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
  min-height: 100px;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
textarea:focus {
  outline: none;
  border-color: #0070f3;
  box-shadow: 0 0 0 3px rgba(0,112,243,0.2);
}

Vérification rapide

Récapitulatif : zones de texte