Corso di HTML / Scegliere i tipi di input per email, numeri, date e opzioni
Il type di un input indica al browser quale tipo di valore o selezione rappresenta il campo. Indirizzi e-mail, quantità, valori di date, caselle di controllo e pulsanti di scelta hanno comportamenti differenti. Selezionate il tipo in base ai dati e alle decisioni che gli utenti devono prendere, e non solamente in base all'aspetto visivo.
Associare il tipo al valore
<form method="get">
<p><label for="email">Indirizzo e-mail</label>
<input id="email" name="email" type="email"></p>
<p><label for="quantity">Quantità</label>
<input id="quantity" name="quantity" type="number" min="1"></p>
<p><label for="visit-date">Data della visita</label>
<input id="visit-date" name="date" type="date"></p>
<button type="submit">Verifica</button>
</form>Salvate l'esempio in un file HTML e provate ogni campo. email può fornire una convalida di base del formato dell'indirizzo e un'interfaccia di immissione appropriata su alcuni dispositivi. number può definire un valore minimo insieme a min; il controllo visibile per date dipende dal browser e dal sistema operativo. Il server deve sempre verificare se una data inviata è valida per lo scopo dell'applicazione.
Una quantità è un numero su cui si possono eseguire calcoli, ma un codice postale può avere zeri iniziali e un numero di telefono può contenere un prefisso internazionale o punteggiatura. Usate text o tel per tali valori invece di number. Chiedetevi se il valore è una quantità numerica e non solo se contiene cifre.
Caselle di controllo o pulsanti di opzione?
Usate una casella di controllo per una decisione indipendente Sì/No o per più selezioni indipendenti. Usate pulsanti di opzione con lo stesso name quando può essere scelta solo un'opzione da un gruppo. Confrontate la denominazione dei gruppi con l'esempio su fieldset e legend nel post Come rendere comprensibili i moduli con fieldset, legend e completamento automatico.
<fieldset>
<legend>Aggiornamenti</legend>
<label><input type="checkbox" name="news" value="yes"> Ricevi notizie</label>
</fieldset>
<fieldset>
<legend>Mezzo di contatto preferito</legend>
<label><input type="radio" name="contact" value="email"> Indirizzo e-mail</label>
<label><input type="radio" name="contact" value="phone"> Telefono</label>
</fieldset>Gli input radio condividono name="contact", quindi selezionando un'opzione si deseleziona quella scelta in precedenza. value è il valore trasmesso, che non deve corrispondere all'etichetta visibile. Inserite questi gruppi in un form con un pulsante di invio per testarli: una casella di controllo news non selezionata non aggiunge alcuna voce ai dati, mentre la selezione dell'indirizzo e-mail invia contact=email. Se la vostra applicazione deve distinguere tra un "No" esplicito e nessuna risposta, progettate consapevolmente questa selezione e il suo trattamento lato server.
Confrontate l'interfaccia con i valori trasmessi
| Tipo | Scopo | Attenzione |
|---|---|---|
email |
Una stringa in formato e-mail | Non verifica l'esistenza di una casella di posta |
number |
Una quantità numerica | L'intervallo, il passo e la possibilità di essere vuoto sono separati |
date |
Una data | L'interfaccia varia a seconda della localizzazione; il valore usa il formato yyyy-mm-dd (anno-mese-giorno) |
checkbox |
Una selezione indipendente | Una casella di controllo non selezionata non contribuisce a nessuna voce |
| radio | Una selezione da un gruppo con lo stesso nome | Un fieldset comune non sostituisce un valore name comune |
Salvate l'esempio completo come visit.html e usate l'indirizzo di test name@example.com. Se il gruppo di radio richiesto viene lasciato senza risposta, l'invio sarà bloccato, mentre la selezione opzionale Notizie modifica l'elenco dei dati.
<!doctype html>
<html lang="it-IT">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Esercizio sui tipi di campo</title>
</head>
<body>
<h1>Esercitarsi con una richiesta di visita</h1>
<form id="visit-form" method="get">
<p><label for="visit-email">Indirizzo e-mail</label>
<input id="visit-email" name="email" type="email" required></p>
<p><label for="visit-day">Data della visita</label>
<input id="visit-day" name="date" type="date" required></p>
<p><label for="visit-quantity">Quantità</label>
<input id="visit-quantity" name="quantity" type="number" min="1" step="1" value="1"></p>
<fieldset>
<legend>Mezzo di contatto</legend>
<label><input type="radio" name="contact" value="email" required> Indirizzo e-mail</label>
<label><input type="radio" name="contact" value="phone"> Telefono</label>
</fieldset>
<p><label><input type="checkbox" name="news" value="yes"> Notizie</label></p>
<button type="submit">Verifica dei valori inseriti</button>
</form>
</body>
</html>Selezionate una data e controllate document.getElementById("visit-day").value nella console. La selezione del 20 maggio 2030 restituisce un valore nel formato 2030-05-20, indipendentemente dalla visualizzazione del calendario localizzato. Selezionate e deselezionate poi Notizie e confrontate la lista delle voci con il comando sottostante.
Array.from(new FormData(document.getElementById("visit-form")).entries())Formato del valore di un campo data su MDN
Verificare oltre il tipo di input
Ogni campo necessita sempre di un'etichetta chiara e, se il suo valore deve essere inviato, di un name. Un campo type="email" può restare vuoto, a meno che non si richieda anche un valore; formato e obbligatorietà sono regole separate. È possibile aggiungere required a un gruppo di pulsanti radio se la selezione di una risposta è realmente necessaria. Verificate ciò che il browser invia e convalidate i valori importanti sul server. Il Riferimento per l'elemento input su MDN elenca i tipi supportati e le restrizioni. Tipo e obbligatorietà, lunghezza e intervallo sono separati; verificate i loro limiti nella validazione del modulo con obbligatorietà, limiti di lunghezza e intervallo.
