HTML textarea: testo multilinea, limiti, readonly e valori inviati

Riferimento HTML

Pubblicato 2026-10-30 Ultima modifica 2026-10-30

HTML textarea accetta più righe di testo semplice. Inserisci il contenuto iniziale tra i tag di apertura e chiusura, usa rows/cols per la dimensione di visualizzazione e minlength/maxlength per la lunghezza dell'input. Imposta name per inviare il valore con un modulo.

Dimensione di visualizzazione, contenuto iniziale e limiti di input

textarea necessita di un tag di chiusura. A differenza di input, non utilizza un attributo value HTML per il valore iniziale. Interruzioni di linea e spazi tra i suoi tag influenzano il contenuto, quindi verifica che l'indentazione del formato non introduca input indesiderati.

Attributo	Ruolo e limitazioni
`rows`, `cols`	Imposta il numero di righe visibili e la larghezza misurata in larghezze medie di carattere utilizzando numeri interi positivi. Non limitano le righe o i caratteri di input; anche la larghezza e l'altezza CSS influenzano la visualizzazione.
`placeholder`	Un suggerimento mostrato quando il valore è vuoto. Non viene inviato come valore effettivo e scompare durante la digitazione, quindi non sostituisce un'etichetta separata.
`required`	Blocca l'invio normale del modulo quando è vuoto. Non decide se un testo composto solo da spazi sia significativo.
`minlength`, `maxlength`	Limita la lunghezza minima e massima dei valori inseriti dall'utente in unità di codice UTF-16. Una emoji può utilizzare due o più unità. Solo il minimo permette un valore vuoto; combinalo con required per un input obbligatorio.
`readonly`	Impedisce la modifica dell'utente ma consente il focus e la copia. Con un nome, rimane incluso nei dati del modulo.
`disabled`	Disabilita il controllo ed esclude il campo dai dati del modulo e dalla validazione dei vincoli.

Esegui un esempio completo di input multilinea

Salva questo codice completo come textarea.html e aprilo in un browser. Non è necessario alcun server o libreria aggiuntiva. Il pulsante di invio mostra le voci nome/valore del browser invece di inviarle.

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Input textarea e valori inviati</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>Scrivi una richiesta</h1>
  <form id="demo">
    <label for="message">Messaggio (5–200 unità di codice)</label>
    <textarea id="message" name="message" rows="4" cols="32"
      minlength="5" maxlength="200" required
      placeholder="Descrivi il problema e il risultato desiderato.">Questa è la prima riga.
Questa è la seconda riga.</textarea>
    <label for="reference">Indicazione di sola lettura</label>
    <textarea id="reference" name="reference" rows="2" readonly>Includi il numero di ordine.</textarea>
    <label for="locked">Campo disabilitato</label>
    <textarea id="locked" name="locked" rows="2" disabled>Questo valore è escluso dall’invio.</textarea>
    <button type="submit">Mostra valori inviati</button>
    <button type="reset">Ripristina</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>

Invia il modulo iniziale: appaiono message e reference. Il JSON \n indica un'interruzione di linea nel valore; locked è omesso.
Cancella il messaggio e invia: la validazione richiesta lo blocca. Poi digita direttamente due o tre caratteri ordinari e invia per verificare la validazione della lunghezza minima.
Inserisci <b>Practice</b> come messaggio e invia. Poiché input e output sono testo, il risultato mostra testo a forma di tag invece di testo in grassetto.
Il ripristino ripristina il messaggio originale di due righe e cancella il risultato. Il ripristino torna ai valori predefiniti HTML invece di rendere il valore vuoto.

La convalida nativa del browser aiuta con l'inserimento dell'utente e l'invio ordinario del modulo. Gli stessi controlli non sono garantiti per i valori assegnati tramite script, quindi le applicazioni reali devono convalidare anche sul server i valori richiesti, le lunghezze consentite e i formati.

Distinguere l'avvolgimento visivo dalle effettive interruzioni di riga

Il ritorno a capo visivo dovuto alla larghezza del campo è diverso da un’interruzione inserita con Invio. Lo wrap="soft" predefinito non aggiunge interruzioni di riga inviate solo perché il testo va a capo visivamente. wrap="hard" aggiunge interruzioni di riga inviate secondo la larghezza di colonna specificata e richiede cols. Per adattarsi a uno schermo stretto, iniziare con l'andata a capo predefinita e la larghezza CSS.

Lo max-width: 100% dell'esempio aiuta a mantenere il campo all'interno del suo contenitore su schermi stretti, mentre resize: vertical consente agli utenti di modificare la sua altezza. La larghezza in pixel di cols="32" dipende dal carattere, dalla larghezza dei caratteri e dal browser, quindi non assumere che esattamente 32 caratteri si adattino a una riga.

Leggere i valori in JavaScript e convalidarli sul server

Leggi l'input corrente tramite textarea.value e quello predefinito tramite textarea.defaultValue. Per leggere le modifiche dell'utente, usa value anziché il textContent del tag. L'esempio scrive i risultati in textContent in modo che l'input non venga eseguito come HTML.

readonly e disabled non sono controlli di sicurezza. Gli utenti possono modificare i valori tramite gli strumenti per sviluppatori o richieste separate, quindi verifica numeri d'ordine o dati di permesso non modificabili confrontandoli con i dati del server affidabile. Se il server conta byte o un'altra unità di caratteri, verifica se il suo limite usa la stessa misura dell'attributo maxlength del browser.

La reference per il textarea riferimento MDN per textarea

Riferimento HTML