Tipi di input HTML
- Pagina precedente Elementi del modulo HTML
- Pagina successiva Proprietà dell'input HTML
Questo capitolo descrive i tipi di input dell'elemento <input>.
Tipo di input: testo
<input type="text"> Definire perInput di testoIl campo di input a riga singola:
Esempio
<form> Nome:<br> <input type="text" name="firstname"> <br> Cognome:<br> <input type="text" name="lastname"> </form>
Il codice HTML sopra elencato apparirà così nel browser:
Tipo di input: password
<input type="password"> definireCampo password:
Esempio
<form> Nome utente:<br> <input type="text" name="username"> <br> Password utente:<br> <input type="password" name="psw"> </form>
Il codice HTML sopra elencato apparirà così nel browser:
Nota:I caratteri del campo password saranno trattati con mascheramento (visualizzati come asterischi o cerchi solidi).
Tipo di input: submit
<input type="submit"> definireinvioI dati del modulo fino aIl programma di elaborazione dei modulidel pulsante.
Il programma di elaborazione dei moduli (form-handler) è di solito una pagina web del server che contiene script per elaborare i dati di input.
Definisci il programma di elaborazione del modulo (form-handler) nell'attributo action del modulo:
Esempio
<form action="action_page.php"> Nome:<br> <input type="text" name="firstname" value="Mickey"> <br> Cognome:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
Il codice HTML sopra elencato apparirà così nel browser:
Se omitti l'attributo value del pulsante di invio, il pulsante avrà il testo predefinito:
Esempio
<form action="action_page.php"> Nome:<br> <input type="text" name="firstname" value="Mickey"> <br> Cognome:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit"> </form>
Tipo di Input: pulsante radio
<input type="radio"> definisce un pulsante radio.
I pulsanti radio permettono all'utente di selezionare SOLO UNA delle scelte da una lista limitata:
Esempio
<form> <input type="radio" name="sex" value="male" checked>Maschio <br> <input type="radio" name="sex" value="female">Femmina </form>
Il codice HTML sopra elencato apparirà così nel browser:
Tipo di Input: casella di controllo
<input type="checkbox"> definisce una casella di controllo.
Le caselle di controllo permettono all'utente di selezionare zero o più opzioni da una lista limitata.
Esempio
<form> <input type="checkbox" name="vehicle" value="Bike">Ho una bicicletta <br> <input type="checkbox" name="vehicle" value="Car">Ho una macchina </form>
Il codice HTML sopra elencato apparirà così nel browser:
Tipo di Input: pulsante
<input type="button"> definirepulsante。
Esempio
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Il codice HTML sopra elencato apparirà così nel browser:
Tipi di input HTML5
HTML5 ha aggiunto diversi nuovi tipi di input:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Nota:I tipi di input obsoleti non supportati dai browser antichi vengono considerati come tipo di input text.
Tipo di input: number
<input type="number"> Utilizzato per campi di input che dovrebbero contenere valori numerici.
Puoi limitare i numeri.
Secondo la compatibilità del browser, i limiti possono essere applicati ai campi di input.
Esempio
<form> Quantità (tra 1 e 5): <input type="number" name="quantity" min="1" max="5"> </form>
Limiti di input
Ecco alcuni limiti di input comuni (alcuni dei quali sono stati aggiunti in HTML5):
| Proprietà | Descrizione |
|---|---|
| disabled | Definisci se il campo di input deve essere disabilitato. |
| max | Definisci il valore massimo del campo di input. |
| maxlength | Definisci il numero massimo di caratteri del campo di input. |
| min | Definisci il valore minimo del campo di input. |
| pattern | Definisci l'espressione regolare che verifica il valore dell'input. |
| readonly | Definisci il campo di input come sola lettura (non modificabile). |
| required | Definisci se il campo di input è obbligatorio (deve essere compilato). |
| size | Definisci la larghezza del campo di input (in caratteri). |
| step | Definisci l'intervallo numerico legittimo del campo di input. |
| value | Definisci il valore predefinito del campo di input. |
Imparerai di più sui limiti degli input nel capitolo successivo.
Esempio
<form> Quantità: <input type="number" name="points" min="0" max="100" step="10" value="30"> </form>
Tipo di input: date
<input type="date"> Utilizzato per campi di input che dovrebbero contenere una data.
A seconda della compatibilità del browser, il selettore di data apparirà nel campo di input.
Esempio
<form> Compleanno: <input type="date" name="bday"> </form>
Puoi aggiungere limiti all'input:
Esempio
<form> Inserisci una data prima del 01-01-1980: <input type="date" name="bday" max="1979-12-31"><br> Inserisci una data successiva al 2000-01-01: Inserisci una data successiva al 2000-01-02:<br> </form>
Tipo di input: color
<input type="color"> Utilizzato per campi di input che devono contenere un colore.
A seconda della compatibilità del browser, il selettore di colore apparirà nel campo di input.
Esempio
<form> Seleziona il tuo colore preferito: <input type="color" name="favcolor"> </form>
Tipo di input: range
<input type="range"> Utilizzato per campi di input che devono contenere valori entro un intervallo specifico.
A seconda della compatibilità del browser, il campo di input può essere visualizzato come controllo di scorrimento.
Esempio
<form> <input type="range" name="points" min="0" max="10"> </form>
Puoi utilizzare le seguenti proprietà per stabilire limiti: min, max, step, value.
Tipo di input: month
<input type="month"> Permette agli utenti di selezionare mese e anno.
A seconda della compatibilità del browser, il selettore di data apparirà nel campo di input.
Esempio
<form> Data di compleanno (mese e anno): <input type="month" name="bdaymonth"> </form>
Tipo di input: week
<input type="week"> Permette agli utenti di selezionare la settimana e l'anno.
A seconda della compatibilità del browser, il selettore di data apparirà nel campo di input.
Esempio
<form> Seleziona una settimana: <input type="week" name="week_year"> </form>
Tipo di input: time
<input type="time"> Permette agli utenti di selezionare l'ora (senza fuso orario).
A seconda della compatibilità del browser, il selettore di ora apparirà nel campo di input.
Esempio
<form> Seleziona un'ora: <input type="time" name="usr_time"> </form>
Tipo di input: datetime
<input type="datetime"> Permette agli utenti di selezionare data e ora (con fuso orario).
A seconda della compatibilità del browser, il selettore di data apparirà nel campo di input.
Esempio
<form> Data di compleanno (data e ora): <input type="datetime" name="bdaytime"> </form>
Tipo di input: datetime-local
<input type="datetime-local"> Permette agli utenti di selezionare data e ora (senza fuso orario).
A seconda della compatibilità del browser, il selettore di data apparirà nel campo di input.
Esempio
<form> Data di compleanno (data e ora): <input type="datetime-local" name="bdaytime"> </form>
Tipo di input: email
<input type="email"> Utilizzato per i campi di input che dovrebbero contenere un indirizzo email.
Secondo il supporto del browser, l'indirizzo email può essere verificato automaticamente al momento del submit.
Alcuni smartphone riconoscono il tipo email e aggiungono ".com" alla tastiera per abbinare l'inserimento dell'email.
Esempio
<form> E-mail: <input type="email" name="email"> </form>
Tipo di input: search
<input type="search"> Utilizzato per i campi di ricerca (i campi di ricerca si presentano come campi di testo regolari).
Esempio
<form> Cerca su Google: <input type="search" name="googlesearch"> </form>
Tipo di input: tel
<input type="tel"> Utilizzato per i campi di input che dovrebbero contenere un numero di telefono.
Al momento solo Safari 8 supporta il tipo tel.
Esempio
<form> Telefono: <input type="tel" name="usrtel"> </form>
Tipo di input: url
<input type="url"> Utilizzato per i campi di input che dovrebbero contenere un indirizzo URL.
Secondo il supporto del browser, il campo URL può essere verificato automaticamente al momento del submit.
Alcuni smartphone riconoscono il tipo URL e aggiungono ".com" alla tastiera per abbinare l'inserimento dell'URL.
Esempio
<form> Aggiungi la tua homepage: <input type="url" name="homepage"> </form>
- Pagina precedente Elementi del modulo HTML
- Pagina successiva Proprietà dell'input HTML
