Quali campi del modulo posso utilizzare?
Per offrire la migliore esperienza utente possibile,
assicurati di utilizzare l'elemento e l'elemento type più appropriati per i dati inseriti dall'utente.
Aiuta gli utenti a compilare il testo
Per fornire agli utenti un campo del modulo per l'inserimento di testo, utilizza l'elemento <input>.
È la scelta migliore per parole singole e testi brevi.
Per testo più lungo, utilizza l'elemento <textarea>.
In questo modo si possono inserire più righe di testo e l'utente può vedere più facilmente il testo inserito, dato che l'elemento è scorrevole e ridimensionabile.
Assicurati che gli utenti inseriscono i dati nel formato corretto
Vuoi aiutare gli utenti a inserire un numero di telefono?
Modifica l'attributo type in type="tel" per <input>.
Gli utenti dei dispositivi mobili dispongono di una tastiera sullo schermo adattata, che consente di inserire il numero di telefono in modo più rapido e semplice.
Per un indirizzo email, utilizza type="email".
Viene mostrata di nuovo una tastiera sullo schermo adattata.
Utilizza l'attributo required per rendere obbligatorio il campo del modulo.
Quando il modulo viene inviato, il browser verifica che l'input contenga un valore e che sia valido: in questo caso,
che l'indirizzo email è formattato correttamente.
Scopri di più sui diversi tipi di input. Offrono inoltre funzionalità di convalida integrate.
Aiuta gli utenti a inserire le date
Quando vuoi iniziare il tuo prossimo viaggio?
Per aiutare gli utenti a inserire le date, utilizza type="date".
Alcuni browser mostrano il formato come segnaposto, come 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 di date.
Aiuta gli utenti a selezionare un'opzione
Per assicurarti che gli utenti possano selezionare o deselezionare una possibile opzione, utilizza type="checkbox".
Vuoi offrire più opzioni?
A seconda del caso d'uso, sono disponibili varie alternative.
Innanzitutto, vediamo le possibili soluzioni se gli utenti devono essere in grado di scegliere una sola opzione.
Puoi utilizzare più elementi <input> con type="radio" e lo stesso valore name. Gli utenti possono vedere 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, come la scelta di un intervallo di numeri, <input> di tipo range può essere una buona opzione.
Devi dare la possibilità di selezionare più opzioni?
Utilizza un elemento <select> con l'attributo multiple o più elementi <input> di tipo checkbox.
Puoi anche utilizzare <input> in combinazione con l'elemento <datalist>.
Questo ti fornisce una combinazione di un campo di testo e un elenco di elementi <option>.
Assicurati che gli utenti possano inserire diversi tipi di dati
Esistono altri tipi di input per casi d'uso specifici.
È disponibile un <input> di tipo color per fornire agli utenti un selettore colori nei browser supportati
e ne esistono anche altri tipi. Per assicurarti che gli utenti possano inserire la propria password, usa <input> con type="password". Ogni carattere inserito è oscurato da un asterisco ("*") o da un punto ("•"), per impedire la lettura della password.
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 tipo o elemento integrato è adatto.
Aiutare gli utenti a compilare il modulo
Esistono molti tipi di elementi e tipi di moduli, ma quale dovresti scegliere?
Per alcuni casi d'uso, è facile scegliere l'elemento e il tipo appropriati,
ad esempio <input type="date">. Per gli altri, dipende.
Ad esempio, puoi utilizzare più elementi <input> con un elemento type="checkbox" o <select>.
Scopri di più sulla scelta tra caselle di elenco ed elenchi a discesa.
In generale, assicurati di testare il modulo con utenti reali per trovare l'elemento e il tipo di modulo migliori.
Verifica le tue conoscenze
Verifica la tua conoscenza dei campi dei moduli
È 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 mostrata una tastiera sullo schermo adattata per l'inserimento delle password.type="password", ogni carattere inserito è oscurato da un asterisco (*) o un punto (•).type="password" viene visualizzata un'interfaccia personalizzata per l'inserimento delle password.