Il tag <input> è senza dubbio l’elemento più versatile dell’intero HTML. Con oltre 20 tipi diversi disponibili, è il componente fondamentale di qualsiasi modulo web. Ogni tipo di input modifica radicalmente l’aspetto e il comportamento del campo, dalla semplice casella di testo ai selettori di data e colore. In questo articolo esploreremo tutti i tipi di input disponibili, con esempi pratici e indicazioni su quando utilizzare ciascuno.
Input di Testo: text, password, email, tel e url
I tipi di input testuali sono i più comuni nei moduli web. Ogni tipo è ottimizzato per un formato specifico di dato e, sui dispositivi mobili, attiva la tastiera più appropriata.
type="text" è il tipo predefinito e crea un campo di testo generico a riga singola. Accetta qualsiasi carattere e non applica alcuna validazione specifica. È il tipo da utilizzare quando nessun altro tipo specifico è appropriato.
type="password" funziona come un campo di testo ma nasconde i caratteri digitati, visualizzandoli come punti o asterischi. I browser moderni offrono spesso un’icona per mostrare/nascondere la password. I gestori di password riconoscono automaticamente questo tipo di campo per la compilazione automatica.
type="email" è specifico per gli indirizzi email. Il browser valida automaticamente il formato dell’email (verifica la presenza di @ e un dominio). Su mobile, mostra una tastiera con il simbolo @ facilmente accessibile. L’attributo multiple permette l’inserimento di più indirizzi email separati da virgola.
type="tel" è dedicato ai numeri di telefono. Non applica validazione automatica (i formati telefonici variano troppo nel mondo), ma su mobile mostra il tastierino numerico, rendendo l’inserimento molto più rapido. Per la validazione, si usa l’attributo pattern con un’espressione regolare.
type="url" è progettato per gli URL. Valida automaticamente che il valore sia un URL ben formato (con protocollo). Su mobile, mostra una tastiera con tasti dedicati come “/” e “.com”.
Input Numerici: number e range
Il tipo type="number" crea un campo numerico con frecce incremento/decremento (spinner). Accetta solo valori numerici e supporta gli attributi min, max e step per definire l’intervallo e l’incremento validi. Su mobile, attiva il tastierino numerico.
Attenzione: type="number" non è sempre la scelta giusta per dati che contengono cifre. I numeri di carta di credito, i CAP e i numeri di telefono non sono valori numerici nel senso matematico (non si fanno operazioni aritmetiche su di essi). Per questi casi, è preferibile usare type="text" con inputmode="numeric" e un attributo pattern appropriato.
Il tipo type="range" visualizza un cursore scorrevole (slider) per selezionare un valore all’interno di un intervallo definito. È perfetto per impostazioni dove l’utente non ha bisogno di un valore esatto (volume, luminosità, budget approssimativo). Come per number, supporta min, max e step. Per mostrare il valore corrente all’utente, è necessario un piccolo script JavaScript o l’elemento <output>.
Input per Data e Ora: date, time, datetime-local, month, week
HTML5 ha introdotto una serie di tipi di input dedicati alla selezione di date e orari, eliminando la necessità di librerie JavaScript esterne come datepicker per molti casi d’uso.
type="date" mostra un selettore di data nativo del browser con calendario. Il valore viene sempre salvato nel formato ISO YYYY-MM-DD, indipendentemente dalla localizzazione visiva. Gli attributi min e max limitano l’intervallo di date selezionabili.
type="time" visualizza un selettore per l’orario, con formato che varia in base al locale del sistema (12 o 24 ore). Il valore è nel formato HH:MM (o HH:MM:SS con l’attributo step).
type="datetime-local" combina data e orario in un unico campo. Non include il fuso orario (per questo esiste l’attributo step per specificare la granularità). È ideale per la prenotazione di appuntamenti o eventi.
type="month" permette di selezionare un mese e anno, utile per date di scadenza di carte di credito o selezione di periodi. type="week" seleziona una settimana dell’anno, usato in contesti di pianificazione o reportistica settimanale.
Input di Selezione: checkbox, radio, select e datalist
I campi di selezione permettono all’utente di scegliere tra opzioni predefinite.
type="checkbox" crea una casella di controllo che può essere attivata o disattivata. Viene utilizzata per accettazione di termini, preferenze multiple o qualsiasi campo booleano (sì/no). Più checkbox con lo stesso name (ma value diversi) permettono selezioni multiple.
type="radio" crea un pulsante di opzione. I radio button con lo stesso attributo name formano un gruppo in cui è possibile selezionare una sola opzione. Sono ideali per domande a scelta singola come il genere, il metodo di pagamento o la fascia di prezzo.
L’elemento <datalist>, pur non essendo un tipo di input, è strettamente correlato. Si collega a un campo <input> tramite l’attributo list e fornisce un elenco di suggerimenti durante la digitazione. A differenza del <select>, l’utente può anche inserire un valore libero non presente nell’elenco. È perfetto per campi con suggerimenti comuni ma che non devono limitare l’input (come la città o la professione).
Input Speciali: file, color, hidden e submit
type="file" permette all’utente di caricare file dal proprio dispositivo. L’attributo accept limita i tipi di file selezionabili (ad esempio, accept="image/*" per sole immagini, accept=".pdf,.doc" per documenti specifici). L’attributo multiple consente la selezione di più file contemporaneamente. Ricorda che il form deve avere enctype="multipart/form-data" per inviare correttamente i file.
type="color" mostra un selettore di colore nativo del browser. Il valore è un codice colore esadecimale nel formato #RRGGBB. È perfetto per applicazioni di personalizzazione (temi, configuratori di prodotto).
type="hidden" crea un campo invisibile all’utente. Viene utilizzato per inviare dati aggiuntivi con il form, come token CSRF per la sicurezza, ID di riferimento o versioni del form. Il campo non viene visualizzato ma il suo valore viene incluso nell’invio del modulo.
type="submit" crea un pulsante che invia il form. Tuttavia, come discusso nel nostro articolo sui form HTML, è preferibile usare il tag <button type="submit"> per la maggiore flessibilità nel contenuto del pulsante.
Attributi di Validazione e Usabilità
Oltre al tipo, gli input supportano numerosi attributi che ne migliorano l’usabilità e la validazione:
placeholder— Testo di esempio visualizzato quando il campo è vuoto. Non sostituisce mai la label.required— Rende il campo obbligatorio, impedendo l’invio del form se è vuoto.readonly— Il campo è visibile e il suo valore viene inviato con il form, ma l’utente non può modificarlo.disabled— Il campo è disattivato: non è modificabile e il suo valore non viene inviato con il form.autofocus— Il campo riceve automaticamente il focus al caricamento della pagina. Usa con cautela: solo un campo per pagina.autocomplete— Suggerisce al browser il tipo di dato per la compilazione automatica. Valori comename,email,street-addressaiutano l’utente a compilare i form rapidamente.inputmode— Suggerisce il tipo di tastiera su mobile senza modificare la validazione. Valori:numeric,decimal,tel,email,url,search.
La conoscenza approfondita di tutti i tipi di input e dei loro attributi ti permette di creare moduli web professionali, accessibili e ottimizzati per ogni dispositivo. Scegliere il tipo di input corretto non è solo una questione tecnica: migliora concretamente l’esperienza dell’utente e aumenta il tasso di completamento dei tuoi form.
Hai bisogno di aiuto con i moduli e i form del tuo sito web? G Tech Group offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a su*****@********up.it o via WhatsApp al 0465 84 62 45.