Form in HTML

Un elemento HTML form viene utilizzato per raccogliere l’input dell’utente. Solitamente, l’input dell’utente viene inviato a un server per essere elaborato.

L’elemento HTML <form>

L’elemento HTML <form> viene utilizzato per creare un modulo HTML per l’input dell’utente.

L’elemento <form> è un contenitore per diversi tipi di elementi di input, come campi di testo, checkbox, radio button, pulsanti di invio, ecc.

L’elemento <input>

L’elemento HTML <input> è l’elemento del modulo più utilizzato.

Un elemento <input> può essere visualizzato in molti modi, a seconda dell’attributo type.

Ecco alcuni esempi:

• <input type="text"> Visualizza un campo di input di testo su una sola riga
• <input type="radio"> Visualizza un pulsante di opzione (per selezionare una delle varie opzioni)
• <input type="checkbox"> Visualizza una casella di controllo (per selezionare zero o più opzioni tra varie)
• <input type="submit"> Visualizza un pulsante di invio (per inviare il modulo)
• <input type="button"> Visualizza un pulsante cliccabile

Tutti i diversi tipi di input sono trattati in questo capitolo: Tipi di input HTML.

Campi di testo

L’elemento <input type="text"> definisce un campo di input su una sola riga per l’input di testo. Il modulo stesso non è visibile. Notare inoltre anche che la larghezza predefinita di un campo di input è di 20 caratteri.

<form>
  <label for="fname">Nome:</label><br />
  <input type="text" id="fname" name="fname" /><br />
  <label for="lname">Cognome:</label><br />
  <input type="text" id="lname" name="lname" />
</form>

L’elemento <label>

Il tag <label> definisce un’etichetta per molti elementi del modulo.

L’elemento <label> è utile per gli utenti degli screen reader, poiché lo screen reader leggerà ad alta voce l’etichetta quando l’utente si concentra sull’elemento di input.

L’elemento <label> aiuta anche gli utenti che hanno difficoltà a fare clic su regioni molto piccole (come pulsanti di opzione o caselle di controllo), poiché quando l’utente fa clic sul testo all’interno dell’elemento <label>, viene attivato il pulsante di opzione/la casella di controllo.

L’attributo for dell’elemento <label> deve essere uguale all’attributo id dell’elemento <input> per associarli insieme.

Bottoni Radio

L’elemento <input type="radio"> definisce un pulsante di opzione (radio).

I bottoni radio consentono all’utente di selezionare UNA sola delle varie opzioni.

<p>Scegli il tuo linguaggio Web preferito:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML" />
  <label for="html">HTML</label><br />
  <input type="radio" id="css" name="fav_language" value="CSS" />
  <label for="css">CSS</label><br />
  <input type="radio" id="javascript" name="fav_language" value="JavaScript" />
  <label for="javascript">JavaScript</label>
</form>

Checkbox

L’elemento <input type="checkbox"> definisce una casella di controllo.

Le checkbox consentono all’utente di selezionare ZERO o PIÙ opzioni tra un numero limitato di scelte.

<form>
  <input type="checkbox" id="veicolo1" name="veicolo1" value="Bicicletta" />
  <label for="veicolo1"> Ho una bicicletta</label><br />
  <input type="checkbox" id="veicolo2" name="veicolo2" value="Macchina" />
  <label for="veicolo2"> Ho una macchina</label><br />
  <input type="checkbox" id="veicolo3" name="veicolo3" value="Barca" />
  <label for="veicolo3"> Ho una barca</label>
</form>

Il pulsante di invio

L’elemento <input type="submit" /> definisce un pulsante per inviare i dati del modulo a un form-handler. Il form-handler è solitamente un file sul server con uno script per elaborare i dati di input. Il form-handler è specificato nell’attributo action del modulo.

<form action="/action_page.php">
  <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" />
</form>

L’attributo Name per <input>

Notare che ogni campo di input deve avere un attributo name per essere inviato.

Se l’attributo name viene omesso, il valore del campo di input non verrà inviato affatto.

<form action="/action_page.php">
  <label for="nome">Nome:</label><br />
  <input type="text" id="nome" value="Luca" /><br /><br />
  <input type="submit" value="Invia" />
</form>