HTML - L'area di testo

  »   Moduli HTML  »   HTML Tutorial - Comments, Text Areas

L'area di testo è utilizzata nei blog, per i commenti o per le note o comunque nel caso sia necessario inserire un testo di una certa lunghezza.

Per creare un'area di testo sono necessarie un'etichetta di chiusura e una di apertura come nel caso seguente:

html<textarea>Area di testo!</textarea>

Demo

Area di testo - size

Per cambiare la dimensione standard di un'area di testo useremo colonne e righe. Questi avranno valori numerici. Più grande sarà il loro valore, più grande sarà l'area di testo.

html<textarea cols="50" rows="2">Area di testo!</textarea>

<textarea cols="40" rows="5">Area di testo!</textarea>

<textarea cols="20" rows="10">Area di testo!</textarea>

Demo

Area di testo - wrap

Wrap può avere tre valori: hard, soft, off.

  • Hard wrap - Inserirà un 'a capo' alla fine di ogni riga e invierà il testo nello stesso formato in cui è stato introdotto.
  • Soft wrap - Posizionerà un 'a capo' alla fine di ogni riga, ma a differenza del valore Hard invierà il testo in un formato libero.
  • Off wrap - Il testo non viene formattato in alcun modo e viene inviato come una sola riga continua.

Hard/Soft

html<textarea cols="20" rows="5" wrap="hard">Hard - Inserirà un 'a capo' alla fine di ogni riga e invierà il testo nello stesso formato in cui è stato introdotto.</textarea>

Demo

The off attribute

html<textarea cols="20" rows="5" wrap="off">Off - Il testo non viene formattato in alcun modo e viene inviato come una sola riga continua.</textarea>

Demo

Area di testo - readonly

A seconda del valore di questo attributo, l'utente è in grado o meno di modificare il contenuto dell'area di testo. L'attributo readonly può avere i valori 'sì' o 'no'.

html<textarea cols="20" rows="5" wrap="hard" readonly="yes">Come puoi vedere il testo non può venir modificato.</textarea>

Demo

Come potete vedere questo testo non può essere modificato. Nel caso in cui si scelga il valore "no" si otterrebbe il risultato opposto. Anche se non può essere modificato, può essere evidenziato e copiato con CTRL-C o con il tasto destro del mouse/copia.

Area di testo - disabled

L'attributo disabled non è molto diverso da quello readonly. Il testo sarà mostrato in grigio, disabilitando allo stesso tempo la possibilità di modificare il testo contenuto nell'area di testo.

html<textarea cols="20" rows="5" wrap="hard" disabled="yes">L'attributo disabled non è molto diverso da quello readonly. Il testo sarà mostrato in grigio, disabilitando allo stesso tempo la possibilità di modificare il testo contenuto nell'area di testo. </textarea>

Demo

Ora fai un po' di pratica per prendere un po' confidenza con questi attributi.