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>