Guida HTML interattiva: Textarea

Q: Come si crea una textarea in HTML?

Scrivi dentro un modulo, con un . A differenza di , ha un tag di chiusura, e tutto ciò che sta tra i tag è il testo iniziale.

Q: Come imposto il valore predefinito di una textarea?

Metti il testo tra i tag: Hello . In HTML una textarea non ha l'attributo value. In JavaScript, leggi e imposta textarea.value.

Q: Come impedisco di ridimensionare una textarea?

Imposta resize: none in CSS. Di solito resize: vertical è più comodo: il lettore può comunque allungarla per un testo lungo, ma non può rompere il layout trascinandola in larghezza.

Q: Come limito il numero di caratteri di una textarea?

Aggiungi maxlength="280". Il browser smette di accettare input a quella lunghezza. Mostra accanto un contatore, aggiornato con l'evento input, così il lettore sa quanto spazio resta, e controlla la lunghezza anche sul server.

Come creare una textarea

<textarea> è un campo di testo per più di una riga: messaggi, commenti, descrizioni. rows imposta la sua altezza visibile in righe. Scrivi qualche riga e premi 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>

Due cose sono diverse rispetto a <input>: una textarea ha bisogno di un tag di chiusura, e il suo testo iniziale va tra i tag invece che in un attributo value. Il suo name viene inviato con il testo come valore, a capo compresi.

Attributi della textarea

Attributo	Cosa fa
`name`	La chiave con cui viene inviato il testo
`rows`	Altezza visibile in righe (predefinito 2)
`cols`	Larghezza visibile in caratteri (predefinito 20); di solito è meglio `width` del CSS
`placeholder`	Un suggerimento mostrato finché è vuota
`maxlength`, `minlength`	Limiti di lunghezza in caratteri
`required`	Non può essere vuota
`readonly`	Si può selezionare e copiare, non modificare; viene comunque inviata
`disabled`	Non si può usare; non viene inviata
`wrap`	`soft` (predefinito) o `hard`, vedi più avanti
`spellcheck`	`true` o `false`

Il testo predefinito va tra i tag

Tutto ciò che sta tra <textarea> e </textarea> è il testo iniziale, esattamente come è scritto: spazi, tabulazioni e a capo compresi. Viene ignorato solo un a capo subito dopo il tag di apertura. Per questo il rientro è una trappola:

<!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>

La seconda textarea inizia con quattro spazi e finisce con un a capo e altri due spazi, che il lettore deve cancellare. Scrivi il testo predefinito attaccato ai tag.

L'HTML dentro una textarea non viene interpretato; <b>hi</b> tra i tag compare così com'è, come testo.

Larghezza, ridimensionamento e crescita automatica

I browser permettono al lettore di trascinare l'angolo per ridimensionare una textarea. La proprietà CSS resize lo limita, e width: 100% con box-sizing: border-box le fa riempire esattamente il suo contenitore:

<!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>

L'ultima azzera la sua altezza e poi la imposta a scrollHeight (l'altezza del contenuto e del padding) più i bordi, a ogni tasto premuto. Scrivici più righe: non mostra mai una barra di scorrimento. resize: vertical è il valore predefinito più comodo: le risposte lunghe hanno spazio, e nessuno può trascinare il campo oltre la larghezza del layout.

I browser basati su Chromium possono far crescere il campo con il solo CSS usando field-sizing: content. I browser che non lo supportano ignorano la riga e mantengono la dimensione normale, quindi aggiungerla è sicuro, ma tieni lo script se vuoi che ogni lettore abbia il riquadro che cresce.

maxlength e un contatore di caratteri

maxlength blocca l'input a un certo numero di caratteri. Da solo non avvisa, quindi il lettore se ne accorge solo quando la scrittura smette di funzionare. Un contatore risolve il problema:

<!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 fa leggere agli screen reader il contatore insieme al campo, e aria-live="polite" ne annuncia i cambiamenti tra un tasto e l'altro. maxlength viene fatto rispettare solo dal browser, quindi anche il server deve controllare la lunghezza.

Gli a capo nel testo inviato

Gli a capo del lettore vengono inviati con il testo. Nei dati inviati ognuno diventa una coppia ritorno a capo e avanzamento riga (%0D%0A in un modulo codificato come URL), ed è quello che si aspetta la maggior parte dei server. Per mostrare poi il testo in una pagina con i suoi a capo, convertili in <br> in uscita oppure dai all'elemento lo stile white-space: pre-line.

wrap="hard" (che richiede cols) va oltre: inserisce degli a capo anche dove il testo andava a capo visivamente, quindi il server riceve righe non più lunghe di cols caratteri. Il valore predefinito, wrap="soft", invia solo gli a capo scritti dal lettore.

Dare stile a una textarea

Chrome e Firefox danno alle textarea un font monospace di circa 13px, ed è per questo che spesso una textarea sembra fuori posto. font: inherit risolve il problema. Se cambi il bordo, mantieni uno stile di focus visibile:

<!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>

Il testo del placeholder deve avere un contrasto leggibile; il grigio chiaro usato da molti design è difficile da leggere. E, come per ogni campo, il placeholder non è un'etichetta: sparisce appena il lettore scrive. Le etichette sono spiegate in label HTML.

Errori comuni

<textarea value="...">. Non esiste l'attributo value; metti il testo tra i tag.
Far rientrare il testo predefinito insieme all'HTML. Gli spazi diventano parte del valore.
Una <textarea /> autochiusa. Non è un elemento vuoto; senza </textarea>, il resto della pagina finisce dentro come testo.
Nessun font: inherit, così il campo usa un piccolo font monospace.
resize: none con un'altezza fissa ridotta. Le risposte lunghe finiscono in un minuscolo riquadro a scorrimento.
Affidarsi solo a maxlength. Controlla la lunghezza anche sul server.

Domande frequenti

Come si crea una textarea in HTML?

Scrivi <textarea name="message" rows="4"></textarea> dentro un modulo, con un <label>. A differenza di <input>, ha un tag di chiusura, e tutto ciò che sta tra i tag è il testo iniziale.

Come imposto il valore predefinito di una textarea?

Metti il testo tra i tag: <textarea name="bio">Hello</textarea>. In HTML una textarea non ha l'attributo value. In JavaScript, leggi e imposta textarea.value.

Come impedisco di ridimensionare una textarea?

Imposta resize: none in CSS. Di solito resize: vertical è più comodo: il lettore può comunque allungarla per un testo lungo, ma non può rompere il layout trascinandola in larghezza.

Come limito il numero di caratteri di una textarea?

Aggiungi maxlength="280". Il browser smette di accettare input a quella lunghezza. Mostra accanto un contatore, aggiornato con l'evento input, così il lettore sa quanto spazio resta, e controlla la lunghezza anche sul server.

Perché la mia textarea usa un font diverso?

Chrome e Firefox danno alle textarea un font monospace di circa 13px per impostazione predefinita. Aggiungi font: inherit per farla corrispondere al resto della pagina.

Concetti correlati