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 inserire il testo
Per fornire agli utenti un campo del modulo per l'inserimento del testo, utilizza l'elemento <input>.
È la scelta migliore per parole singole e testi brevi.
Per un testo più lungo, utilizza l'elemento <textarea>.
Ciò consente di inserire più righe di testo,
e consente all'utente di vedere più facilmente il testo inserito, in quanto l'elemento è scorrevole e ridimensionabile.
Assicurati che gli utenti inseriscano 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.
assicurandosi di poter inserire il numero di telefono in modo più rapido e semplice.
Per un indirizzo email, usa 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 contenga un valore e che sia valido: in questo caso,
che si tratta di un indirizzo email ben formattato.
Scopri di più sui diversi tipi di input. Inoltre, offrono funzionalità di convalida integrate.
Aiuta gli utenti a compilare le date
Quando vuoi iniziare il tuo prossimo viaggio?
Per aiutare gli utenti a inserire le date, usa type="date".
Alcuni browser mostrano il formato come segnaposto, ad esempio yyyy-mm-dd,
che mostra come inserire la data.
Tutti i browser moderni offrono interfacce personalizzate per la selezione delle date sotto forma di selettore date.
Aiuta gli utenti a selezionare un'opzione
Per assicurarti che gli utenti possano selezionare o deselezionare una possibile opzione, utilizza type="checkbox".
Offrire più opzioni?
A seconda del caso d'uso, ci sono diverse alternative.
Innanzitutto, esaminiamo le possibili soluzioni se gli utenti debbano essere in grado di 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 l'elenco delle opzioni disponibili e sceglierne una.
Per alcuni casi d'uso, come 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 <input> in combinazione con l'elemento <datalist>.
In questo modo otterrai una combinazione di un campo di testo e un elenco di elementi <option>.
Assicurati che gli utenti possano inserire diversi tipi di dati
Esistono più 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 password, usa <input>
con type="password". Ogni carattere inserito è oscurato da un asterisco ("*") o da un punto ("•")
per assicurarti che la password non possa essere letta.
Vuoi includere un token di sicurezza univoco nei dati del modulo?
Usa <input> con type="hidden".
Il valore di un elemento <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 non sono adatti tipi o elementi integrati.
Aiutare gli utenti a compilare il modulo
Esistono molti 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 altri, dipende.
Ad esempio, puoi utilizzare più elementi <input> con un elemento type="checkbox" o <select>.
Scopri di più sulla scelta tra caselle di riepilogo 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 le tue conoscenze dei campi dei moduli
È possibile caricare più file con un controllo del 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 viene oscurato da un asterisco (*) o da un punto (•).type="password" viene visualizzata un'interfaccia personalizzata per l'inserimento delle password.