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>