English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
In HTML5, sono stati aggiunti molti nuovi tipi di input di modulo, utilizzando questi nuovi elementi, è possibile ottenere un migliore controllo degli input e convalida.
HTML5 ha molti nuovi tipi di input di modulo. Queste nuove funzionalità offrono una migliore controllo degli input e convalida.
Questa sezione introduce in modo completo questi nuovi tipi di input:
color
date
datetime
datetime-local
month
number
range
search
tel
time
url
week
Attenzione:Non tutti i browser mainstream supportano i nuovi tipi di input, ma puoi già usarli in tutti i browser mainstream. Anche se non vengono supportati, possono essere visualizzati come campi di testo normali.
Il tipo di dati "color" viene utilizzato principalmente nei campi input per selezionare colori, come mostrato di seguito:
Scegli un colore dal selettore di colori:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Guida di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Scegli il colore che preferisci: <input type="color" name="favcolor"><br> <input type="submit"> </form> </body> </html>Prova a vedere ‹/›
Il tipo di dati "date" ti permette di selezionare una data da un selettore di date.
Definire un controller di tempo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Guida di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Data di nascita: <input type="date" name="bday"> <input type="submit"> </form> </body> </html>Prova a vedere ‹/›
Il tipo datetime ti permette di selezionare una data (tempo UTC).
Definire un controller di data e ora (tempo locale):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Guida di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Compleanno (data e ora): <input type="datetime" name="bdaytime"> <input type="submit"> </form> </body> </html>Prova a vedere ‹/›
Il tipo datetime-local ti permette di selezionare una data e ora (senza fuso orario).
Definire una data e ora (senza fuso orario):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Guida di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Compleanno (data e ora): <input type="datetime-local" name="bdaytime"> <input type="submit"> </form> </body> </html>Prova a vedere ‹/›
Il tipo email è utilizzato per i campi di input che devono contenere indirizzi email.
Quando si invia il modulo, viene verificato automaticamente se il valore del campo email è legale e valido:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Guida di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> E-mail: <input type="email" name="usremail"> <input type="submit"> </form> <p><b>Attenzione:</b> Internet Explorer 9 e versioni precedenti non supportano type="email".</p> </body> </html>Prova a vedere ‹/›
Suggerimento: Il browser Safari su iPhone supporta il tipo di input email e si adatta al tasto di scrittura touch screen (aggiungendo le opzioni @ e .com).
Il tipo month ti permette di selezionare un mese.
Definire mese e anno (senza fuso orario):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Guida di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Compleanno (mese e anno): <input type="month" name="bdaymonth"> <input type="submit"> </form> </body> </html>Prova a vedere ‹/›
Il tipo number è utilizzato per i campi di input che devono contenere valori numerici.
Puoi anche definire i limiti dei numeri accettati:
Definire un campo di input numerico (limitato):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Guida di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Quantità (tra 1 e 5): <input type="number" name="quantity" min="1" max="5"> <input type="submit"> </form> <p><b>Attenzione:</b> Internet Explorer 9 e versioni precedenti non supportano type="number".</p> </body> </html>Prova a vedere ‹/›
Usa le seguenti proprietà per definire i limiti per il tipo numerico:
| Proprietà | Descrizione |
| disabled | Regola che stabilisce che il campo di input è disabilitato |
| max | Regola che stabilisce il valore massimo permesso |
| maxlength | Regola che stabilisce la lunghezza massima dei caratteri del campo di input |
| min | Regola che stabilisce il valore minimo permesso |
| pattern | Regola utilizzata per verificare il modello del campo di input |
| readonly | Regola che il valore del campo di input non può essere modificato |
| required | Specificare che il valore del campo di input è obbligatorio |
| size | Specificare il numero di caratteri visibili nel campo di input |
| step | Specificare l'intervallo numerico legittimo del campo di input |
| value | Specificare il valore predefinito del campo di input |
Il tipo di input range è utilizzato per campi di input che dovrebbero contenere valori numerici entro un intervallo specifico.
Il tipo di input range è visualizzato come una barra di scorrimento.
Definisci un valore numerico non molto preciso (simile al controllo slider):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Guida di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php" method="get"> Punti: <input type="range" name="points" min="1" max="10"> <input type="submit"> </form> <p><b>Attenzione:</b> Internet Explorer 9 e versioni precedenti non supportano type="range".</p> </body> </html>Prova a vedere ‹/›
Utilizza le seguenti proprietà per specificare i limiti per i tipi numerici:
max - Specifica il valore massimo permesso
min - Specifica il valore minimo permesso
step - Specifica l'intervallo numerico legittimo
value - Specifica il valore predefinito
Il tipo di input search è utilizzato per campi di ricerca, come la ricerca del sito o la ricerca di Google.
Definisci un campo di ricerca (simile alla ricerca del sito o alla ricerca di Google):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Guida di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Cerca Google: <input type="search" name="googlesearch"><br> <input type="submit"> </form> </body> </html>Prova a vedere ‹/›
Definisci il campo di input del numero di telefono:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Guida di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Numero di telefono: <input type="tel" name="usrtel"><br> <input type="submit"> </form> </body> </html>Prova a vedere ‹/›
Il tipo di input time ti permette di selezionare un'ora.
Definisci un controllore di tempo inputabile (senza fuso orario):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Guida di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Scegli l'ora: <input type="time" name="usr_time"> <input type="submit"> </form> </body> </html>Prova a vedere ‹/›
Il tipo di input URL è utilizzato per campi di input che dovrebbero contenere indirizzi web.
Al submit del modulo, il valore del dominio URL viene verificato automaticamente.
Definisci il campo URL di input:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Guida di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Aggiungi la tua homepage: <input type="url" name="homepage"><br> <input type="submit"> </form> <p><b>Attenzione:</b> Internet Explorer 9 e versioni precedenti non supportano type="url".</p> </body> </html>Prova a vedere ‹/›
Suggerimento: Il browser Safari su iPhone supporta l'inserimento di URL e si adatta al tastierino touch screen (aggiungendo l'opzione .com).
Il tipo week ti permette di scegliere settimana e anno.
Definisci settimana e anno (nessun fuso orario):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Guida di base (oldtoolbag.com)</title> </head> <body> <form action="demo-form.php"> Scegli la settimana: <input type="week" name="year_week"> <input type="submit"> </form> </body> </html>Prova a vedere ‹/›
| Etichetta | Descrizione |
| <input> | Descrizione dell'input |