Tipi di Input HTML

Questo capitolo descrive i diversi tipi di input che è possibile utilizzare nell’elemento <input> di HTML.

Tipi di Input HTML

Ecco i diversi tipi di input che puoi utilizzare in HTML:

• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">

Input Type Text

<input type="text"> definisce un campo di input di testo a riga singola:

<form>
  <label for="nome">Nome:</label><br />
  <input type="text" id="nome" name="nome" /><br />
  <label for="cognome">Cognome:</label><br />
  <input type="text" id="cognome" name="cognome" />
</form>

Input Type Password

<input type="password"> definisce un campo password:

<form>
  <label for="username">Nome utente:</label><br />
  <input type="text" id="username" name="username" /><br />
  <label for="password">Password:</label><br />
  <input type="password" id="password" name="password" />
</form>

I caratteri in un campo password sono mascherati (mostrati come asterischi o cerchi).

Input Type Submit

<input type="submit"> definisce un pulsante per inviare i dati del modulo a un gestore del modulo.

Il gestore del modulo è tipicamente una pagina del server con uno script per elaborare i dati di input.

Il gestore del modulo è specificato nell’attributo “action” del modulo:

<form action="/action_page.php">
  <label for="nome">Nome:</label><br />
  <input type="text" id="nome" name="nome" value="Luca" /><br />
  <label for="cognome">Cognome:</label><br />
  <input type="text" id="cognome" name="cognome" value="Rossi" /><br /><br />
  <input type="submit" value="Invia" />
</form>

Se si omette l’attributo “value” del pulsante di invio, il pulsante avrà un testo predefinito:

<form action="/action_page.php">
  <label for="nome">Nome:</label><br />
  <input type="text" id="nome" name="nome" value="Luca" /><br />
  <label for="cognome">Cognome:</label><br />
  <input type="text" id="cognome" name="cognome" value="Rossi" /><br /><br />
  <input type="submit" />
</form>

Input Type Reset

<input type="reset"> definisce un pulsante di reset che ripristina tutti i valori del modulo ai loro valori predefiniti:

<form action="/action_page.php">
  <label for="nome">Nome:</label><br />
  <input type="text" id="nome" name="nome" value="Luca" /><br />
  <label for="cognome">Cognome:</label><br />
  <input type="text" id="cognome" name="cognome" value="Rossi" /><br /><br />
  <input type="submit" value="Invia" />
  <input type="reset" />
</form>

Se si modificano i valori di input e quindi si fa clic sul pulsante “Reset”, i dati del modulo verranno ripristinati ai valori predefiniti.

Input Type Radio

<input type="radio"> definisce un pulsante di opzione.

I pulsanti di opzione consentono all’utente di SELEZIONARE SOLO UNA delle opzioni di un numero limitato di scelte:

<p>Scegli il tuo linguaggio Web preferito:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML" />
  <label for="html">HTML</label><br />
  <input type="radio" id="css" name="fav_language" value="CSS" />
  <label for="css">CSS</label><br />
  <input type="radio" id="javascript" name="fav_language" value="JavaScript" />
  <label for="javascript">JavaScript</label>
</form>

Input Type Checkbox

<input type="checkbox"> definisce una casella di controllo.

Le caselle di controllo consentono all’utente di selezionare ZERO o PIÙ opzioni di un numero limitato di scelte.

<form>
  <input type="checkbox" id="veicolo1" name="veicolo1" value="Bicicletta" />
  <label for="veicolo1"> Ho una bicicletta</label><br />
  <input type="checkbox" id="veicolo2" name="veicolo2" value="Automobile" />
  <label for="veicolo2"> Ho una macchina</label><br />
  <input type="checkbox" id="veicolo3" name="veicolo3" value="Barca" />
  <label for="veicolo3"> Ho una barca</label>
</form>

Input Type Button

<input type="button"> definisce un pulsante:

<input type="button" onclick="alert('Ciao Mondo!')" value="Cliccami!" />

Input Type Color

<input type="color"> viene utilizzato per i campi di input che dovrebbero contenere un colore.

A seconda del supporto del browser, può comparire un selettore di colori nel campo di input.

<form>
  <label for="favcolor">Seleziona il tuo colore preferito:</label>
  <input type="color" id="favcolor" name="favcolor" />
</form>

Input Type Date

<input type="date"> viene utilizzato per i campi di input che dovrebbero contenere una data.

A seconda del supporto del browser, può comparire un selettore di date nel campo di input.

<form>
  <label for="compleanno">Compleanno:</label>
  <input type="date" id="compleanno" name="compleanno" />
</form>

È anche possibile utilizzare gli attributi “min” e “max” per aggiungere restrizioni alle date:

<form>
  <label for="datemax">Inserisci una data prima del 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31" /><br /><br />
  <label for="datemin">Inserisci una data dopo il 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02" />
</form>

Input Type Datetime-local

<input type="datetime-local"> specifica un campo di input data e ora, senza fuso orario.

A seconda del supporto del browser, può comparire un selettore di date e orario nel campo di input.

<form>
  <label for="oraCompleanno">Compleanno (data e ora):</label>
  <input type="datetime-local" id="oraCompleanno" name="oraCompleanno" />
</form>

Input Type Email

<input type="email"> viene utilizzato per i campi di input che dovrebbero contenere un indirizzo e-mail.

A seconda del supporto del browser, l’indirizzo e-mail può essere convalidato automaticamente durante l’invio.

Alcuni smartphone riconoscono il tipo di e-mail e aggiungono “.com” alla tastiera per abbinare l’input dell’e-mail.

<form>
  <label for="email">Inserisci la tua email:</label>
  <input type="email" id="email" name="email" />
</form>

Input Type Image

<input type="image"> definisce un’immagine come pulsante di invio.

Il percorso dell’immagine è specificato nell’attributo “src”.

<form>
  <input type="image" src="img_submit.png" alt="Invia" width="48" height="48" />
</form>

Input Type File

<input type="file"> definisce un campo di selezione file e un pulsante “Sfoglia” per il caricamento dei file.

<form>
  <label for="myfile">Seleziona un file:</label>
  <input type="file" id="myfile" name="myfile" />
</form>

Input Type Hidden

<input type="hidden"> definisce un campo di input nascosto (non visibile all’utente).

Un campo nascosto consente agli sviluppatori Web di includere dati che non possono essere visualizzati o modificati dagli utenti quando viene inviato un modulo.

Spesso un campo nascosto memorizza quale record del database deve essere aggiornato quando viene inviato il modulo.

Sebbene il valore non sia visualizzato all’utente nel contenuto della pagina, è visibile (e può essere modificato) utilizzando gli strumenti per sviluppatori di qualsiasi browser o la funzionalità “Visualizza sorgente”. Non utilizzare input nascosti come forma di sicurezza!

<form>
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" /><br /><br />
  <input type="hidden" id="customID" name="customID" value="3487" />
  <input type="submit" value="Invia" />
</form>

Input Type Month

<input type="month"> consente all’utente di selezionare un mese e un anno.

A seconda del supporto del browser, può comparire un selettore di date nel campo di input.

<form>
  <label for="meseCompleanno">Compleanno (mese e anno):</label>
  <input type="month" id="meseCompleanno" name="meseCompleanno" />
</form>

Input Type Number

<input type="number"> definisce un campo di input numerico.

È anche possibile impostare restrizioni su quali numeri sono accettati.

Il seguente esempio mostra un campo di input numerico, in cui è possibile inserire un valore da 1 a 5:

<form>
  <label for="qta">Quantità (tra 1 e 5):</label>
  <input type="number" id="qta" name="qta" min="1" max="5" />
</form>

Input Type Range

<input type="range"> definisce un controllo per inserire un numero il cui valore esatto non è importante (come un controllo a cursore). Il range predefinito è da 0 a 100. Tuttavia, è possibile impostare restrizioni su quali numeri sono accettati con gli attributi “min”, “max” e “step”:

<form>
  <label for="vol">Volume (tra 0 e 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50" />
</form>

Input Type Search

<input type="search"> è utilizzato per i campi di ricerca (un campo di ricerca si comporta come un normale campo di testo).

<form>
  <label for="gsearch">Cerca su Google:</label>
  <input type="search" id="gsearch" name="gsearch" />
</form>

Input Type Tel

<input type="tel"> è utilizzato per i campi di input che dovrebbero contenere un numero di telefono.

<form>
  <label for="phone">Inserisci il tuo numero di telefono:</label>
  <input
    type="tel"
    id="phone"
    name="phone"
    pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" />
</form>

Input Type Time

<input type="time"> consente all’utente di selezionare un’ora (senza fuso orario).

A seconda del supporto del browser, può comparire un selettore di orario nel campo di input.

<form>
  <label for="appt">Seleziona un orario:</label>
  <input type="time" id="appt" name="appt" />
</form>

Input Type Url

<input type="url"> è utilizzato per i campi di input che dovrebbero contenere un indirizzo URL.

A seconda del supporto del browser, il campo URL può essere convalidato automaticamente durante l’invio.

Alcuni smartphone riconoscono il tipo di URL e aggiungono “.com” alla tastiera per abbinare l’input dell’URL.

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

Input Type Week

<input type="week"> consente all’utente di selezionare una settimana e un anno.

A seconda del supporto del browser, può comparire un selettore di date nel campo di input.

<form>
  <label for="week">Seleziona una settimana:</label>
  <input type="week" id="week" name="week" />
</form>

Con questo abbiamo coperto tutti i tipi di input che è possibile utilizzare nell’elemento <input> di HTML. Spero che questo sia stato utile per te! Se hai altre domande o hai bisogno di ulteriori informazioni, sentiti libero di chiedere.