HTML5 Textarea Attributes: Ecco Cosa Dovresti Sapere

admin

Che cosa è <textarea> usato per?

La maggior parte dei form HTML sono composti da un elemento padre del form, una manciata di elementi di input (almeno uno dei quali sarà del tipo submit), e una o più textarea. Se hai bisogno di campi del modulo per accettare indirizzi email, numeri di telefono e altri contenuti facili da definire, usa il tipo di input appropriato. Tuttavia, quando avete bisogno di un campo che può accettare qualsiasi combinazione e lunghezza di lettere, numeri e simboli di testo semplice, <textarea> è l’elemento che state cercando.

HTML5 Textarea Attributes

HTML5 ha introdotto alcuni nuovi attributi che possono essere usati con gli elementi textarea. Ecco alcuni dei più importanti:

  • form: Associa la textarea ad un modulo. Usa l’attributo ID del modulo come valore per gli attributi del modulo textarea. Questo permette di posizionare una textarea ovunque in una pagina web, anche al di fuori dell’elemento modulo, e avere ancora il contenuto della textarea incluso quando il modulo viene inviato.
  • maxlength e minlength: Usati per specificare un numero minimo o massimo di caratteri che possono essere inseriti in una textarea.
  • placeholder: Aggiunge un testo segnaposto alla textarea che scompare non appena l’utente posiziona il cursore all’interno dell’elemento.
  • required: Richiede che la textarea contenga del contenuto prima di permettere l’invio del modulo.
  • wrap: Specifica se gli hard-return devono essere aggiunti o meno al contenuto inviato in una textarea.

Attributi in azione

Ecco un esempio di come alcuni di questi nuovi attributi possono essere usati per controllare il comportamento di una textarea.

<p>This text area is limited to just 10 characters</p> <textarea cols="50" rows="3" maxlength="10" placeholder="Just 10 characters allowed"></textarea> <p>This text area is readonly and cannot be changed</p> <textarea cols="50" rows="3" readonly>This value can't be changed</textarea>

If we pair those textarea elements with a simple script and button element, we get the following form:

Adam is a technical writer who specializes in developer documentation and tutorials.