Tipi di input
Questo capitolo descrive i tipi di ingresso del <input> elemento.
Tipo di ingresso: il testo
<input type="text"> definisce un campo di input di una riga per immissione di testo:
Esempio
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form> Prova tu stesso " Questo è come il codice HTML sopra verrà visualizzato in un browser:
Nome di battesimo:
Cognome:
Tipo di ingresso: la password
<input type="password"> definisce un campo password:
Esempio
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form> Prova tu stesso " Questo è come il codice HTML sopra verrà visualizzato in un browser:
Nome utente:
Password utente:
I caratteri in un campo password vengono mascherati (shown as asterisks or circles) .
Tipo di ingresso: presentare
<input type="submit"> definisce un pulsante per l'invio di input forma ad una forma-handler.
La forma-gestore è tipicamente una pagina del server con uno script per l'elaborazione di dati di input.
La forma-gestore è specificato nel attributo di azione del form:
Esempio
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form> Prova tu stesso " Questo è come il codice HTML sopra verrà visualizzato in un browser:
Nome di battesimo:
Cognome:
Se si omette attributo value del pulsante di invio, il tasto otterrà un testo predefinito:
Esempio
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit">
</form> Prova tu stesso " Tipo di ingresso: radio
<input type="radio"> definisce un radio pulsante.
Radio pulsanti permettono all'utente di selezionare solo uno di un numero limitato di scelte:
Esempio
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form> Prova tu stesso " Questo è come il codice HTML sopra verrà visualizzato in un browser:
Maschio
Femmina
Altro
Tipo di ingresso: checkbox
<input type="checkbox"> definisce una checkbox .
Checkboxes consentire a un utente selezionare zero o più opzioni di un numero limitato di scelte.
Esempio
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form> Prova tu stesso " Questo è come il codice HTML sopra verrà visualizzato in un browser:
Ho una bicicletta
Ho un auto
Tipo di ingresso: button
<input type="button"> definisce un button :
Questo è come il codice HTML sopra verrà visualizzato in un browser:
HTML5 Input Tipi
HTML5 ha aggiunto diversi nuovi input tipi:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Input tipi, non supportati da vecchi browser web, si comporteranno come input tipo di testo.
Input Tipo: number
Il <input type="number"> viene utilizzato per i campi di input che dovrebbe contenere un valore numerico.
È possibile impostare restrizioni sui numeri.
A seconda del supporto del browser, le restrizioni possono applicare al campo di inserimento.
Esempio
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form> Prova tu stesso " Input Restrizioni
Ecco un elenco di alcuni comuni input restrizioni (some are new in HTML5) :
| Attributo | Descrizione |
|---|---|
| disabled | Specifica che un campo di input deve essere disattivata |
| max | Specifica il valore massimo per un campo di introduzione |
| >maxlength | Specifica il numero massimo di caratteri per un campo di introduzione |
| min | Specifica il valore minimo del campo di input |
| pattern | Specifica un'espressione regolare per controllare il valore di ingresso contro |
| readonly | Specifica che un campo di input di sola lettura (cannot be changed) |
| required | Specifica che un campo di input è richiesto (must be filled out) |
| size | Specifica la larghezza (in characters) di un campo di immissione |
| step | Specifica gli intervalli di numero legale per un campo di input |
| value | Specifica il valore predefinito per un campo di introduzione |
Potrete saperne di più su input restrizioni nel prossimo capitolo.
Esempio
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form> Prova tu stesso " Input Tipo: date
Il <input type="date"> è usato per i campi di input che dovrebbe contenere una data.
A seconda del supporto del browser, un selettore di data può apparire nel campo di immissione.
È possibile aggiungere restrizioni al input :
Esempio
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form> Prova tu stesso " Input Tipo: colore
Il <input type="color"> è usato per i campi di input che dovrebbe contenere un colore.
A seconda del supporto del browser, un selettore di colori può apparire nel campo di immissione.
Esempio
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form> Prova tu stesso " Input Tipo: gamma
Il <input type="range"> viene utilizzato per i campi di input che dovrebbe contenere un valore all'interno di un intervallo.
A seconda del supporto del browser, il campo di input può essere visualizzato come un dispositivo di scorrimento.
È possibile utilizzare i following attributi per specificare restrizioni: min, max, step, il valore.
Input Tipo: month
Il <input type="month"> permette all'utente di selezionare un mese e anno.
A seconda del supporto del browser, un selettore di data può apparire nel campo di immissione.
Esempio
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form> Prova tu stesso " Input Tipo: week
Il <input type="week"> permette all'utente di selezionare una settimana e anno.
A seconda del supporto del browser, un selettore di data può apparire nel campo di immissione.
Input Tipo: time
Il <input type="time"> permette all'utente di selezionare una volta (no time zone) .
A seconda del supporto del browser, una raccoglitrice di tempo può presentarsi nel campo di immissione.
Input Tipo: datetime
Il <input type="datetime"> consente all'utente di selezionare una data e ora (with time zone) .
Esempio
<form>
Birthday (date and time):
<input type="datetime" name="bdaytime">
</form> Prova tu stesso "  | Il tipo di input datetime viene rimosso dallo standard HTML. Utilizzare datetime-locale invece. |
|---|
Tipo di ingresso: datetime-local
Il <input type="datetime-local"> consente all'utente di selezionare una data e ora (no time zone) .
A seconda del supporto del browser, un selettore di data può apparire nel campo di immissione.
Esempio
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form> Prova tu stesso " Tipo di ingresso: e-mail
Il <input type="email"> è usato per i campi di input che dovrebbe contenere un indirizzo email.
A seconda del supporto del browser, l'indirizzo di posta elettronica può essere convalidato automaticamente quando viene sottoposto.
Alcuni smartphone riconoscono il tipo di e-mail, e aggiunge ".com" alla tastiera in base all'ingresso e-mail.
Tipo di ingresso: Ricerca
Il <input type="search"> è usato per i campi di ricerca (a search field behaves like a regular text field) .
Tipo di ingresso: tel
Il <input type="tel"> è usato per i campi di input che dovrebbe contenere un numero di telefono.
Il tipo tel è attualmente supportata solo in Safari 8.
Tipo di ingresso: url
Il <input type="url"> è usato per i campi di input che dovrebbe contenere un indirizzo URL.
A seconda del supporto del browser, il campo URL può essere convalidato automaticamente quando viene sottoposto.
Alcuni smartphone riconoscono il tipo di URL, e aggiunge ".com" alla tastiera in modo che corrisponda all'ingresso URL.
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 »