<textarea>: l'elemento "Area di testo"
L' elemento HTML <textarea> rappresenta un controllo di modifica di testo normale su più righe, utile quando si desidera consentire agli utenti di inserire una notevole quantità di testo in formato libero, ad esempio un commento su un modulo di recensione o feedback.
Attributi
autocomplete
Questo attributo indica se il valore del controllo può essere completato automaticamente dal browser. I valori possibili sono:
off: L'utente deve inserire in modo esplicito un valore in questo campo per ogni utilizzo, oppure il documento fornisce un proprio metodo di completamento automatico; il browser non completa automaticamente l'immissione.on: Il browser può completare automaticamente il valore in base ai valori immessi dall'utente durante gli utilizzi precedenti.
Se l'attributo autocomplete non è specificato su un elemento <textarea>, il browser utilizza il valore dell'attributo autocomplete del proprietario del modulo dell'elemento <textarea>. Il proprietario del modulo è l'elemento <form> di cui questo elemento <textarea> è discendente o l'elemento del modulo il cui id è specificato dall'attributo form dell'elemento di input. Per ulteriori informazioni, vedere l'attributo autocomplete in <form>.
autocorrect
Una stringa che indica se attivare o meno la correzione ortografica automatica e l'elaborazione delle sostituzioni di testo (se configurate) mentre l'utente lo sta modificando textarea. I valori ammessi sono:
on
Abilita la correzione ortografica automatica e le sostituzioni del testo.
off
Disabilita la correzione ortografica automatica e le sostituzioni del testo.
autofocus
Questo attributo booleano consente di specificare che un controllo modulo deve avere lo stato attivo per l'input quando la pagina viene caricata. Solo un elemento associato al modulo in un documento può avere questo attributo specificato.
cols
La larghezza visibile del controllo del testo, in larghezze medie dei caratteri. Se è specificato, deve essere un numero intero positivo. Se non è specificato, il valore predefinito è 20.
disabled
Questo attributo booleano indica che l'utente non può interagire con il controllo. Se questo attributo non è specificato, il controllo eredita la sua impostazione dall'elemento contenitore, ad esempio <fieldset>; se non è presente alcun elemento contenitore quando l'attributo disabled è impostato, il controllo è abilitato.
form
L'elemento del modulo a cui è associato l'elemento <textarea> (il suo "proprietario del modulo"). Il valore dell'attributo id deve essere quello di un elemento del modulo nello stesso documento. Se questo attributo non è specificato, l'elemento <textarea> deve essere un discendente di un elemento del modulo. Questo attributo ti consente di posizionare elementi <textarea> ovunque all'interno di un documento, non solo come discendenti di elementi del modulo.
maxlength
Il numero massimo di caratteri (unità di codice UTF-16) che l'utente può inserire. Se questo valore non è specificato, l'utente può inserire un numero illimitato di caratteri.
minlength
Il numero minimo di caratteri (unità di codice UTF-16) richiesto dall'utente.
name
Il nome del controllo.
placeholder
Un suggerimento per l'utente su cosa può essere inserito nel controllo. I ritorni a capo o gli avanzamenti di riga all'interno del testo segnaposto devono essere trattati come interruzioni di riga durante il rendering del suggerimento.
readonly
Questo attributo booleano indica che l'utente non può modificare il valore del controllo. A differenza disableddell'attributo, l'attributo readonly non impedisce all'utente di fare clic o selezionare nel controllo. Il valore di un controllo di sola lettura viene comunque inviato con il modulo.
required
Questo attributo specifica che l'utente deve compilare un valore prima di inviare un modulo.
rows
Il numero di righe di testo visibili per il controllo. Se è specificato, deve essere un numero intero positivo. Se non è specificato, il valore predefinito è 2.
spellcheck
Specifica se <>textarea è soggetto al controllo ortografico da parte del browser/sistema operativo sottostante. Il valore può essere:
true: indica che l'elemento deve avere il controllo ortografico e grammaticale.default: indica che l'elemento deve agire in base a un comportamento predefinito, possibilmente basato sul valore dell'elemento padre spellcheck.false: indica che l'elemento non deve essere sottoposto a controllo ortografico.
wrap
Indica come il controllo esegue il wrapping del testo. I valori possibili sono:
hard: Il browser inserisce automaticamente le interruzioni di riga (CR+LF) in modo che ogni riga non abbia più della larghezza del controllo; anche l'attributocolsdeve essere specificato affinché ciò abbia effetto.soft: Il browser garantisce che tutte le interruzioni di riga nel valore siano costituite da una coppia CR+LF, ma non inserisce ulteriori interruzioni di riga.off: Mi piace softma cambia aspetto in white-space: premodo che i segmenti di linea eccedenti colsnon vengano avvolti e<textarea>diventi scorrevole orizzontalmente.
Se questo attributo non è specificato, è il suo valore predefinito soft.
Stilizzare con CSS
<textarea> è un elemento sostituito — ha dimensioni intrinseche, come un'immagine raster. Per impostazione predefinita, il suo valore display è inline-block. Rispetto ad altri elementi del modulo è relativamente facile da stile, con il suo modello a scatola, i caratteri, la combinazione di colori, ecc. Sono facilmente manipolabili usando i normali CSS.
Incoerenza di base
La specifica HTML non definisce dove si trova la linea di base di un <textarea>, quindi browser diversi lo impostano su posizioni diverse. Per Gecko, la linea base di <textarea> è impostata sulla linea di base della prima riga dell'area di testo, su un altro browser può essere impostata sul fondo del riquadro di <textarea>. Non usare su di esso vertical-align: baseline; il comportamento è imprevedibile.
Controllare se un'area di testo è ridimensionabile
Nella maggior parte dei browser, i <textarea> sono ridimensionabili: noterai la maniglia di trascinamento nell'angolo destro, che può essere utilizzata per modificare le dimensioni dell'elemento sulla pagina. Questo è controllato dalla proprietà CSS resize: il ridimensionamento è abilitato per impostazione predefinita, ma puoi disabilitarlo esplicitamente utilizzando il valore none:
textarea {
resize: none;
}
Stilizzare valori validi e non validi
I valori validi e non validi di un elemento <textarea> (ad esempio quelli all'interno e all'esterno dei limiti impostati da minlength, maxlength, o required) possono essere evidenziati utilizzando le pseudo-classi :valid e :invalid. Ad esempio, per assegnare alla tua area di testo un bordo diverso a seconda che sia valido o meno:
textarea:invalid {
border: 2px dashed red;
}
textarea:valid {
border: 2px solid lime;
}
Esempi
Esempio di base
L'esempio seguente mostra un'area di testo molto semplice, con un determinato numero di righe e colonne e alcuni contenuti predefiniti.
<textarea name="textarea"
rows="10" cols="50">Spazio per scrivere</textarea>
Esempio usando "minlength" e "maxlength"
Questo esempio ha un numero minimo e massimo di caratteri, rispettivamente di 10 e 20. Provalo e vedi.
<textarea name="textarea"
rows="5" cols="30"
minlength="10" maxlength="20">Spazio per scrivere</textarea>
Nota che minlength non impedisce all'utente di rimuovere i caratteri in modo che il numero inserito superi il minimo, ma rende il valore inserito in <textarea> non valido. Si noti inoltre che anche se si dispone di un valore minlength impostato (3, ad esempio), un <textarea> vuoto è comunque considerato valido a meno che non si disponga anche dell'attributo required impostato.
Esempio usando "placeholder"
<textarea name="textarea"
rows="10" cols="50"
placeholder="Commento"></textarea>
Disabilitato e di sola lettura
Questo esempio mostra due <textarea> — una delle quali è disabled, e una delle quali è readonly. Gioca con entrambi e vedrai la differenza di comportamento: l'elemento disabled non è selezionabile in alcun modo (e il suo valore non è inviato), mentre l'elemento readonly è selezionabile e il suo contenuto è copiabile (e il suo valore è inviato); semplicemente non puoi modificare i contenuti.
<textarea name="textarea"
rows="10" cols="50"
disabled>Textarea disabilitato</textarea>
<textarea name="textarea"
rows="10" cols="50"
readonly>Textarea per sola lettura</textarea>