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.
Aiutare 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 singole parole e testi brevi.
Per un testo più lungo, utilizza l'elemento <textarea>.
In questo modo è possibile inserire più righe di testo e l'utente può vedere più facilmente il testo inserito, poiché l'elemento è scorrevole e ridimensionabile.
Assicurati 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 che utilizzano dispositivi mobili ricevono una tastiera sullo schermo adattata,
in modo da poter inserire il numero di telefono più velocemente e facilmente.
Per un indirizzo email, usa type="email".
Anche in questo caso viene visualizzata 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 si tratti di un indirizzo email ben formattato.
Scopri di più sui diversi tipi di input. Forniscono inoltre funzionalità di convalida integrate.
Aiutare gli utenti a inserire 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 possibile opzione, utilizza type="checkbox".
Vuoi offrire più opzioni?
A seconda del caso d'uso, sono disponibili varie alternative.
Innanzitutto, esaminiamo le 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 una sola.
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 ottieni 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 password, utilizza <input>
con type="password". Ogni carattere inserito viene 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 tipi ed elementi di modulo, ma quale scegliere?
Per alcuni casi d'uso, è facile scegliere l'elemento e il tipo appropriati, come <input type="date">. mentre per altri dipende.
Ad esempio, puoi utilizzare più elementi <input> con type="checkbox" o un elemento <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 il tipo e l'elemento di modulo migliori.
Verificare di aver compreso
Verifica le tue conoscenze sui 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 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.