Gli input dei moduli rappresentano il principale metodo attraverso cui gli utenti inseriscono informazioni. HTML offre numerosi tipi di input diversi a seconda dei dati richiesti.

Tipi di input comuni

Input di testo

Progettato per l'inserimento di dati testuali brevi, come nomi utente, indirizzi email o messaggi concisi.

<input type="text" />

Input Password

Utilizzato per l'inserimento di password, dove i caratteri sono mascherati per motivi di sicurezza.

<input type="password" />

Input Email

Utilizzato per la raccolta di indirizzi email dagli utenti. Esegue una validazione lato client per garantire che il valore inserito sia in un formato email valido.

<input type="email" />

Input Telefono

Utilizzato per la raccolta di numeri di telefono dagli utenti.

<input type="tel" />

Input Numerico

Utilizzato per raccogliere dati numerici dagli utenti. Fornisce una tastiera numerica sui dispositivi mobili.

<input type="number" />

Casella di Selezione

Consente agli utenti di selezionare una o più opzioni da un elenco di scelte. Adatto per scenari in cui sono consentite selezioni multiple, come la selezione di più elementi da un elenco o l'accettazione di termini e condizioni.

<input type="checkbox" />

Pulsante di Opzione

Consente agli utenti di selezionare un'opzione da un elenco di scelte mutuamente esclusive. Adatto per scenari in cui deve essere selezionata solo una opzione, come la selezione del genere o la scelta di un metodo di pagamento.

<input type="radio" />

Input File

Consente agli utenti di caricare file dal proprio dispositivo, selezionandoli dal filesystem locale e inviandoli insieme ai dati del modulo. Questa funzionalità è particolarmente utile per allegare documenti o immagini.

<input type="file" />

Input Data, Input Ora e Input Data/Ora

Consente agli utenti di inserire date, orari o entrambi. Fornisce interfacce intuitive per la selezione di date e orari.

<input type="date" />
<input type="time" />
<input type="datetime-local" />

Inserire un valore nei campi per visualizzare diverse opzioni suggerite. Nessun dato verrà raccolto.

Potresti aver notato che compilare il modulo non è molto comodo quando non si comprende cosa viene richiesto in ciascun campo. Ecco perché le etichette ci vengono in aiuto.