Tag HTML <textarea>
Il tag HTML <textarea> definisce un campo modulo per l'inserimento di testo su più righe, inviato con il form.
Il tag <textarea> definisce un campo modulo in cui gli utenti possono inserire un testo su più righe. A differenza del tag <input>, il ritorno a capo del testo all'interno di <textarea> è consentito quando il modulo viene inviato.
Un'area di testo può contenere un numero illimitato di caratteri. Il testo all'interno di questo tag viene reso in un font proporzionale per impostazione predefinita.
Il tag <textarea> viene usato all'interno del tag <form>.
Sintassi
Il tag <textarea> è composto da una coppia di tag. Il contenuto viene scritto tra il tag di apertura (<textarea>) e il tag di chiusura (</textarea>).
Un errore comune per i principianti: un <textarea> non accetta un attributo value. Il suo valore predefinito va tra i tag di apertura e chiusura, a differenza di un <input> a riga singola, che usa value="…". Ad esempio, <textarea>Hello</textarea> mostra "Hello", mentre <input value="Hello"> mostra "Hello" — ma <textarea value="Hello"></textarea> non mostra nulla.
Esempio del tag HTML <textarea>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="post">
<textarea name="comment" rows="12" cols="35">Send your comments to the author.</textarea><br />
<input type="submit" name="submitInfo" value="Submit" />
</form>
</body>
</html>Risultato
In questo esempio utilizziamo il tag <textarea> per definire il campo di testo, l'attributo name per assegnare un nome a questo campo ("comment"), l'attributo rows per impostarne l'altezza visibile (12 righe) e l'attributo cols per impostarne la larghezza visibile (35 caratteri).
Associare un'etichetta a un <textarea>
Ogni campo modulo dovrebbe avere un tag <label>. Collega l'etichetta all'area di testo assegnando al <textarea> un id e impostando l'attributo for dell'etichetta sullo stesso valore. Ciò consente agli screen reader di annunciare il campo e agli utenti di fare clic sul testo dell'etichetta per spostare il focus nell'area di testo — entrambi miglioramenti per l'accessibilità e l'usabilità.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="post">
<label for="comment">Your comment:</label><br />
<textarea id="comment" name="comment" rows="6" cols="40"></textarea><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>Limitare e suggerire l'input
Usa l'attributo maxlength per limitare il numero di caratteri che un utente può digitare, e l'attributo placeholder per mostrare un breve suggerimento all'interno di un campo vuoto. Il segnaposto scompare non appena l'utente inizia a digitare — non è un valore predefinito, quindi non viene mai inviato con il modulo.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="post">
<label for="bio">Short bio (max 100 characters):</label><br />
<textarea id="bio" name="bio" rows="4" cols="40" maxlength="100"
placeholder="Tell us a little about yourself..."></textarea><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>Applicare stili CSS all'elemento <textarea>
Il tag <textarea> è considerato un elemento sostituito, in quanto possiede dimensioni intrinseche. Applicare stili a questo tag è relativamente semplice con il normale CSS.
I suoi valori validi e non validi possono essere evidenziati con le pseudo-classi :valid e :invalid.
Nella maggior parte dei browser, <textarea> è ridimensionabile grazie alla proprietà CSS resize. Il ridimensionamento è abilitato per impostazione predefinita. Puoi disabilitarlo impostando il valore di resize su none.
Esempio del tag HTML <textarea> con proprietà CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.comment {
width: 60%;
height: 100px;
padding: 10px;
outline: 0;
border: 3px solid #1c87c9;
background: #d0e2bc;
line-height: 20px;
}
</style>
</head>
<body>
<form>
<p>Here we use CSS styles to customize the look of the text field.</p>
<textarea class="comment"> Send your comments to the author.</textarea>
<br />
<input type="submit" name="submitInfo" value="Submit" />
</form>
</body>
</html>In questo esempio utilizziamo gli stili CSS per personalizzare l'aspetto del campo di testo.
Controllare il ridimensionamento con la proprietà resize
Per impostazione predefinita, la maggior parte dei browser aggiunge una maniglia di trascinamento nell'angolo di un <textarea> in modo che gli utenti possano ridimensionarlo in entrambe le direzioni. Puoi controllare questo comportamento con la proprietà CSS resize:
resize: none;— disabilita completamente il ridimensionamento.resize: vertical;— consente di ridimensionare solo l'altezza.resize: horizontal;— consente di ridimensionare solo la larghezza.resize: both;— il valore predefinito, consente il ridimensionamento in entrambe le direzioni.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
textarea {
width: 60%;
padding: 8px;
}
.no-resize {
resize: none;
}
.vertical-only {
resize: vertical;
}
.horizontal-only {
resize: horizontal;
}
</style>
</head>
<body>
<p>Not resizable:</p>
<textarea class="no-resize" rows="3"></textarea>
<p>Resizable vertically only:</p>
<textarea class="vertical-only" rows="3"></textarea>
<p>Resizable horizontally only:</p>
<textarea class="horizontal-only" rows="3"></textarea>
</body>
</html>Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| autocomplete | on, off | Specifica se il completamento automatico deve essere abilitato per il campo di testo. |
| autofocus | autofocus | Definisce che l'area di testo deve ricevere automaticamente il focus al caricamento della pagina. |
| cols | number | Definisce la larghezza visibile dell'area di testo. Il valore predefinito è 20 caratteri. |
| dirname | dirname | Specifica il nome di un controllo modulo nascosto che conterrà la direzione del testo dell'area di testo quando viene inviato. |
| disabled | disabled | Definisce che l'area di testo deve essere disabilitata. |
| form | form_id | Definisce uno o più moduli a cui appartiene l'area di testo (tramite id). |
| maxlength | number | Definisce il numero massimo di caratteri consentiti nell'area di testo. |
| minlength | number | Definisce il numero minimo di caratteri consentiti nell'area di testo. |
| name | text | Definisce un nome per l'area di testo. |
| placeholder | text | Definisce un breve suggerimento che descrive il valore atteso dell'area di testo. Il suggerimento viene mostrato quando il campo è vuoto e scompare quando riceve il focus. |
| readonly | readonly | Definisce che l'area di testo è di sola lettura. |
| required | required | Definisce che l'area di testo deve essere compilata prima che il modulo venga inviato. |
| rows | number | Definisce il numero visibile di righe nell'area di testo. Il valore predefinito dipende dal browser (in genere 2). |
| spellcheck | true, false, default | Specifica se il testo nel tag <textarea> deve essere sottoposto al controllo ortografico del browser/sistema operativo sottostante. |
| wrap | soft, hard | Definisce come il testo nell'area di testo deve essere mandato a capo quando il modulo viene inviato. soft (predefinito): il testo viene inviato senza interruzioni di riga aggiuntive. hard: il browser inserisce interruzioni di riga in base alla larghezza (richiede cols). |
Il tag <textarea> supporta anche gli Attributi Globali e gli Attributi Evento.
Tag correlati
<input>— controlli modulo a riga singola e specializzati.<form>— il contenitore che raggruppa e invia i campi del modulo.<label>— etichette che rendono i campi del modulo accessibili.