Elementi dei Form HTML
Questo capitolo descrive tutti gli elementi del modulo HTML.
Gli elementi <form>
Lâelemento <form>
HTML può contenere uno o piÚ degli elementi del modulo seguenti:
<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>
Lâelemento <input>
Uno degli elementi del modulo piĂš utilizzati è lâelemento <input>
.
Lâelemento <input>
può essere visualizzato in modi diversi, a seconda dellâattributo âtypeâ.
<label for="nome">Nome:</label> <input type="text" id="nome" name="nome" />
Tutti i diversi valori dellâattributo âtypeâ sono trattati nel prossimo capitolo: Tipi di input HTML.
Lâelemento <label>
Lâelemento <label>
definisce una descrizione per diversi elementi del modulo.
Lâelemento <label>
è utile per gli utenti di screen-reader, perchĂŠ lo screen-reader leggerĂ ad alta voce lâetichetta quando lâutente si focalizza sullâelemento di input.
Lâelemento <label>
aiuta anche gli utenti che hanno difficoltĂ a cliccare su regioni molto piccole (come i pulsanti radio o le caselle di controllo) - perchĂŠ quando lâutente fa clic sul testo allâinterno dellâelemento <label>
, viene attivato il pulsante radio o la casella di controllo.
Lâattributo âforâ del tag <label>
deve essere uguale allâattributo âidâ dellâelemento <input>
per collegarli insieme.
Lâelemento <select>
Lâelemento <select>
definisce una lista a discesa (menu):
<label for="automobili">Scegli una macchina:</label><select id="automobili" name="automobili"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option></select>
Gli elementi <option>
definiscono unâopzione selezionabile.
Per impostazione predefinita, il primo elemento nella lista a discesa è selezionato.
Per definire unâopzione preselezionata, aggiungere lâattributo âselectedâ allâopzione:
<option value="fiat" selected>Fiat</option>
Valori visibili:
Utilizzare lâattributo âsizeâ per specificare il numero di valori visibili
<label for="automobili">Scegli una macchina:</label><select id="automobili" name="automobili" size="3"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option></select>
Consenti selezioni multiple:
Utilizzare lâattributo âmultipleâ per consentire allâutente di selezionare piĂš di un valore:
<label for="automobili">Scegli una macchina:</label><select id="automobili" name="automobili" size="4" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option></select>
Lâelemento <textarea>
Lâelemento <textarea>
definisce un campo di input multi-linea (area di testo):
<textarea name="messaggio" rows="10" cols="30">
Il gatto stava giocando in giardino.</textarea>
Lâattributo ârowsâ specifica il numero di righe visibili in unâarea di testo. Lâattributo âcolsâ specifica la larghezza visibile di unâarea di testo. Ă anche possibile definire la dimensione dellâarea di testo utilizzando CSS:
<textarea name="messaggio" style="width:200px; height:600px;">Il gatto stava giocando in giardino.</textarea>
Lâelemento <button>
Lâelemento <button>
definisce un pulsante cliccabile:
<button type="button" onclick="alert('Ciao Mondo!')">Cliccami!</button>
Specificare sempre lâattributo âtypeâ per lâelemento del pulsante.
Diversi browser possono utilizzare diversi tipi predefiniti per lâelemento del pulsante.
Gli elementi <fieldset>
e <legend>
Lâelemento <fieldset>
viene utilizzato per raggruppare dati correlati in un modulo.
Lâelemento <legend>
definisce una didascalia per lâelemento <fieldset>
.
<form action="/action_page.php"> <fieldset> <legend>Informazioni personali:</legend> <label for="nome">Nome:</label><br /> <input type="text" id="nome" name="nome" value="Luca" /><br /> <label for="cognome">Cognome:</label><br /> <input type="text" id="cognome" name="cognome" value="Rossi" /><br /><br /> <input type="submit" value="Invia" /> </fieldset></form>
Lâelemento <datalist>
specifica un elenco di opzioni predefinite per un elemento <input />
.
Gli utenti vedranno un elenco a discesa delle opzioni predefinite mentre inseriscono i dati.
Lâattributo âlistâ dellâelemento <input />
, deve fare riferimento allâattributo âidâ dellâelemento <datalist>
.
<form action="/action_page.php"> <input list="browsers" /> <datalist id="browsers"> <option value="Internet Explorer"></option> <option value="Firefox"></option> <option value="Chrome"></option> <option value="Opera"></option> <option value="Safari"></option> </datalist></form>