Per offrire la migliore esperienza utente possibile, assicurati di utilizzare l'elemento e l'elemento type più appropriati per i dati inseriti dall'utente.
Aiutare gli utenti a compilare il testo
Utilizza l'elemento <input> per fornire un campo del modulo. Un <input> è la scelta migliore
per parole singole, frasi e voci brevi. Per testi più lunghi, utilizza l'elemento <textarea>. Ciò consente di inserire più righe di testo e rende più facile
per l'utente visualizzare il testo inserito, poiché l'elemento è scorrevole e
ridimensionabile.
Assicurarsi che gli utenti inseriscano i dati nel formato corretto
Vuoi aiutare gli utenti a compilare un numero di telefono?
Modifica l'attributo type in type="tel" per <input>.
Gli utenti sui dispositivi mobili visualizzano una tastiera sullo schermo adattata,
che consente di inserire il numero di telefono più rapidamente.
Per un indirizzo email, utilizza type="email".
Anche in questo caso, viene mostrata una tastiera sullo schermo adattata.
Utilizza l'attributo required per rendere obbligatorio il campo del modulo.
Quando il modulo viene inviato, il browser controlla che l'input abbia un valore e che sia valido: in questo caso,
che sia un indirizzo email ben formattato.
Scopri di più sui diversi tipi di input. Questi forniscono anche funzionalità di convalida integrate.
Aiutare gli utenti a compilare le date
Quando vuoi iniziare il tuo prossimo viaggio?
Per aiutare gli utenti a compilare le date, utilizza type="date".
Alcuni browser mostrano il formato come segnaposto, ad esempio yyyy-mm-dd,
per mostrare come inserire la data.
Tutti i browser moderni forniscono interfacce personalizzate per la selezione delle date sotto forma di selettore della data.
Aiutare gli utenti a selezionare un'opzione
Per assicurarti che gli utenti possano selezionare o deselezionare una delle opzioni possibili, utilizza type="checkbox".
Vuoi offrire più opzioni?
A seconda del caso d'uso, esistono varie alternative.
Innanzitutto, dai un'occhiata alle possibili soluzioni se gli utenti devono poter scegliere una sola opzione.
Puoi utilizzare più elementi <input> con type="radio" e lo stesso valore name. Gli utenti vedono tutte le opzioni contemporaneamente, ma possono sceglierne solo una.
Un'altra opzione è utilizzare l'elemento <select>.
Gli utenti possono scorrere un elenco di opzioni disponibili e sceglierne una.
Per alcuni casi d'uso, ad esempio la scelta di un intervallo di numeri,
<input> di tipo range potrebbe essere una buona opzione.
Devi offrire la possibilità di selezionare più opzioni?
Utilizza un elemento <select> con l'attributo multiple o più elementi <input> di tipo checkbox.
Puoi anche utilizzare un <input> in combinazione con l'elemento <datalist>.
In questo modo, avrai a disposizione una combinazione di un campo di testo e un elenco di elementi <option>.
Assicurati che gli utenti possano compilare diversi tipi di dati
Esistono altri tipi di input per casi d'uso specifici.
Esiste un <input> di tipo color per fornire agli utenti un selettore di colori nei browser supportati, ma esistono anche vari altri tipi. Per assicurarti che gli utenti
possano inserire la propria password, utilizza <input> con type="password". Ogni carattere
inserito è oscurato da un asterisco ("*") o da un punto ("•"), per garantire che la password
non possa essere letta.
Vuoi includere un token di sicurezza univoco nei dati del modulo?
Utilizza <input> con type="hidden".
Il valore di un <input> di tipo hidden non può essere visualizzato o modificato dagli utenti.
Per consentire agli utenti di caricare e inviare file, utilizza <input> con type="file".
Puoi anche definire elementi personalizzati se hai un caso d'uso speciale, in cui nessun elemento o tipo integrato è adatto.
Aiutare gli utenti a compilare il modulo
Esistono molti elementi e tipi di moduli, ma quale dovresti scegliere?
Per alcuni casi d'uso, è semplice scegliere l'elemento e il tipo appropriati,
ad esempio <input type="date">. Per altri, dipende.
Ad esempio, puoi utilizzare più elementi <input> con type="checkbox" o un elemento <select>.
Scopri di più su come scegliere tra caselle di riepilogo e elenchi a discesa.
In generale, assicurati di testare il modulo con utenti reali per trovare l'elemento e il tipo di modulo migliori.
Verifica la comprensione
Metti alla prova le tue conoscenze sui campi del modulo
È possibile caricare più file con un controllo modulo?
<input type="files">.<input type="file" multiple>.<input type="multiple-files">.Qual è la differenza tra type="text" e type="password"?
type="password" viene visualizzata una tastiera sullo schermo adattata per l'inserimento delle password.type="password", ogni carattere inserito viene oscurato da un asterisco (*) o da un punto (•).type="password" viene visualizzata un'interfaccia personalizzata per l'inserimento delle password.