Tipi di input HTML

Questo capitolo descrive il tipo di input dell'elemento <input>.

Tipo di input: testo

<input type="text"> Definisce 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>

Prova personalmente

Il codice HTML sopra elencato apparirà così nel browser:

Nome:


Cognome:

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>

Prova personalmente

Il codice HTML sopra elencato apparirà così nel browser:

Nome utente:


Password utente:

Nota:I caratteri del campo password saranno trattati con mascheramento (visualizzati come asterischi o cerchi solidi).

Tipo di input: submit

<input type="submit"> definireInvioDati del modulo aProgramma di elaborazione dei modulidel pulsante.

Il programma di elaborazione dei moduli (form-handler) è solitamente una pagina web del server che contiene script per elaborare i dati di input.

Specificare nel attributo action del modulo il gestore del modulo (form-handler):

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>

Prova personalmente

Il codice HTML sopra elencato apparirà così nel browser:

Nome:


Cognome:


Se omitti l'attributo value del pulsante di invio, questo 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>

Prova personalmente

Tipo di Input: pulsante radio

<input type="radio"> definisce il pulsante radio.

I pulsanti radio permettono all'utente di selezionare SOLO UNA delle scelte da un numero limitato di opzioni:

Esempio

<form>
<input type="radio" name="sex" value="male" checked>Maschio
<br>
<input type="radio" name="sex" value="female">Femmina
</form>

Prova personalmente

Il codice HTML sopra elencato apparirà così nel browser:

Maschio

Femmina

Tipo di Input: casella di selezione

<input type="checkbox"> definisce la casella di selezione.

Le caselle di selezione permettono all'utente di selezionare zero o più opzioni da un numero limitato di opzioni.

Esempio

<form>
<input type="checkbox" name="vehicle" value="Bike">Ho una bicicletta
<br>
<input type="checkbox" name="vehicle" value="Car">Ho una macchina 
</form>

Prova personalmente

Il codice HTML sopra elencato apparirà così nel browser:

Ho una bicicletta

Ho una macchina

Tipo di Input: pulsante

<input type="button"> definirepulsante。

Esempio

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

Prova personalmente

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
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Nota:I tipi di input obsoleti non supportati dai browser vecchi vengono trattati come tipo di input text.

Tipo di input: number

<input type="number"> Utilizzato per campi di input che dovrebbero contenere un valore numerico.

Puoi limitare i numeri.

A seconda della 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>

Prova personalmente

Limiti di input

Ecco una lista di 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 i valori di input.
readonly Definisci il campo di input come sola lettura (non modificabile).
required Definisci se il campo di input è obbligatorio (da compilare).
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>

Prova personalmente

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>

Prova personalmente

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-01:<br>
</form>

Prova personalmente

Tipo di input: color

<input type="color"> Utilizzato per campi di input che devono contenere colori.

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>

Prova personalmente

Tipo di input: range

<input type="range"> Utilizzato per campi di input che devono contenere valori all'interno di un intervallo.

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>

Prova personalmente

Puoi utilizzare le seguenti proprietà per definire i 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 nascita (mese e anno):
  <input type="month" name="bdaymonth">
</form>

Prova personalmente

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>

Prova personalmente

Tipo di input: time

<input type="time"> Permette agli utenti di selezionare l'orario (senza fuso orario).

A seconda della compatibilità del browser, il selettore di orario apparirà nel campo di input.

Esempio

<form>
  Seleziona un orario:
  <input type="time" name="usr_time">
</form>

Prova personalmente

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 e ora del compleanno (data e ora):
  <input type="datetime" name="bdaytime">
</form>

Prova personalmente

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 e ora del compleanno (data e ora):
  <input type="datetime-local" name="bdaytime">
</form>

Prova personalmente

Tipo di input: email

<input type="email"> Campo di input per l'indirizzo email.

In base alla compatibilità 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 di email.

Esempio

<form>
  E-mail:
  <input type="email" name="email">
</form>

Prova personalmente

Tipo di input: search

<input type="search"> Campo di ricerca (il campo di ricerca si presenta come un campo di testo regolare).

Esempio

<form>
  Cerca su Google:
  <input type="search" name="googlesearch">
</form>

Prova personalmente

Tipo di input: tel

<input type="tel"> Campo di input per il numero di telefono.

Al momento, solo Safari 8 supporta il tipo tel.

Esempio

<form>
  Telefono:
  <input type="tel" name="usrtel">
</form>

Prova personalmente

Tipo di input: url

<input type="url"> Campo di input per l'indirizzo URL.

In base alla compatibilità 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 URL.

Esempio

<form>
  Aggiungi la tua homepage:
  <input type="url" name="homepage">
</form>

Prova personalmente