Moduli HTML
Un modulo HTML viene utilizzato per raccogliere l'input dell'utente. L'input dell'utente viene spesso inviato a un server per l'elaborazione.
Esempio
L'elemento <modulo>
L'elemento HTML <form>viene utilizzato per creare un modulo HTML per l'input dell'utente:
<form>
.
form elements
.
</form>
L' <form>elemento è un contenitore per diversi tipi di elementi di input, come: campi di testo, caselle di controllo, pulsanti di opzione, pulsanti di invio, ecc.
Tutti i diversi elementi del modulo sono trattati in questo capitolo: Elementi del modulo HTML .
L'elemento <input>
L'elemento HTML <input>è l'elemento del modulo più utilizzato.
Un <input>elemento può essere visualizzato in molti modi, a seconda type
dell'attributo.
Ecco alcuni esempi:
| Tipo | Descrizione |
|---|---|
| <tipo di input="testo"> | Visualizza un campo di immissione di testo a riga singola |
| <tipo di input="radio"> | Visualizza un pulsante di opzione (per selezionare una delle tante scelte) |
| <tipo di input="casella di controllo"> | Visualizza una casella di controllo (per selezionare zero o più di molte scelte) |
| <tipo di input="invia"> | Visualizza un pulsante di invio (per inviare il modulo) |
| <tipo di input="pulsante"> | Visualizza un pulsante selezionabile |
Tutti i diversi tipi di input sono trattati in questo capitolo: Tipi di input HTML .
Campi di testo
Definisce un campo di immissione a riga singola per l' <input type="text">immissione di testo.
Esempio
Un modulo con campi di input per il testo:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Ecco come verrà visualizzato il codice HTML sopra in un browser:
Nota: il modulo stesso non è visibile. Si noti inoltre che la larghezza predefinita di un campo di input è di 20 caratteri.
L'elemento <etichetta>
Notare l'uso <label>dell'elemento nell'esempio sopra.
Il <label>tag definisce un'etichetta per molti elementi del modulo.
L' <label>elemento è utile per gli utenti di screen reader, perché lo screen reader leggerà ad alta voce l'etichetta quando l'utente si concentra sull'elemento di input.
L' <label>elemento aiuta anche gli utenti che hanno difficoltà a fare clic su regioni molto piccole (come pulsanti di opzione o caselle di controllo), perché quando l'utente <label>fa clic sul testo all'interno dell'elemento, attiva o disattiva il pulsante di opzione/casella di controllo.
L' forattributo del <label>tag dovrebbe essere uguale idall'attributo <input>
dell'elemento per legarli insieme.
Tasti della radio
<input type="radio">Definisce un pulsante di opzione .
I pulsanti di opzione consentono all'utente di selezionare UNA di un numero limitato di scelte.
Esempio
Un modulo con pulsanti di opzione:
<p>Choose your favorite Web language:</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>
Ecco come verrà visualizzato il codice HTML sopra in un browser:
Scegli la tua lingua Web preferita:
Caselle di controllo
<input type="checkbox">Definisce una casella di controllo .
Le caselle di controllo consentono a un utente di selezionare ZERO o PIÙ opzioni di un numero limitato di scelte.
Esempio
Un modulo con caselle di controllo:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Ecco come verrà visualizzato il codice HTML sopra in un browser:
Il pulsante Invia
Definisce un pulsante per inviare i <input type="submit">dati del modulo a un gestore del modulo.
Il gestore del modulo è in genere un file sul server con uno script per l'elaborazione dei dati di input.
Il gestore del modulo è specificato nell'attributo del modulo action
.
Esempio
Un modulo con un pulsante di invio:
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Ecco come verrà visualizzato il codice HTML sopra in un browser:
L'attributo del nome per <input>
Si noti che ogni campo di input deve avere un nameattributo da inviare.
Se l' nameattributo viene omesso, il valore del campo di input non verrà inviato affatto.
Esempio
Questo esempio non invierà il valore del campo di input "Nome":
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>