Come abbiamo visto in precedenza, l'elemento più potente di un modulo è l'input. Questo elemento si aspetta dati dall'utente. Concentratiamo la nostra attenzione su di esso.

Tipi di Input

Campo di testo

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

<input type="text" />

Campo password

Utilizzato per l'inserimento di password, dove i caratteri vengono mascherati per motivi di sicurezza. Garantisce la privacy nascondendo i caratteri inseriti.

<input type="password" />

Campo email

Utilizzato per la raccolta di indirizzi email dagli utenti. Esegue una validazione lato client per assicurare che il valore inserito sia conforme al formato email.

<input type="email" />

Input Telefono

Utilizzato per raccogliere numeri di telefono dagli utenti. Consente l'inserimento di numeri telefonici in vari formati, inclusi quelli internazionali.

<input type="tel" />

Input Numerico

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

<input type="number" />

Checkbox

Consente agli utenti di selezionare una o più opzioni da un elenco di scelte. Adatto a 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 (Radio Button)

Consente agli utenti di selezionare un'opzione da un elenco di scelte mutuamente esclusive. Adatto a scenari in cui deve essere selezionata una sola 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, ora e data/ora

Consente agli utenti di inserire date, orari o entrambi. Fornisce interfacce intuitive per la selezione di date e orari. Utile per acquisire date di nascita, orari di appuntamenti o pianificazioni di eventi.

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

Esempio: Inserire qualcosa nei campi e verranno suggerite diverse opzioni. Nessuna preoccupazione; nessun dato verrà raccolto.

Si può notare che compilare il modulo non è molto comodo quando non si comprende cosa viene richiesto in ciascun campo. Per questo motivo le etichette ci vengono in aiuto.

Etichette

Le etichette (<label>) sono fondamentali per collegare i testi descrittivi agli elementi di input dei moduli, migliorando l'accessibilità e la facilità d'uso. È essenziale che l'attributo for del tag <label> corrisponda all'attributo id dell'elemento input associato.
Esempio:

<label for="username">Username:</label>
<input type="text" id="username" />

Nell'esempio sopra:

• Facendo clic sull'etichetta Username:, il campo di input corrispondente verrà automaticamente selezionato;
• L'elemento label e l'elemento input sono collegati tramite gli attributi for e id rispettivamente;
• Entrambi gli attributi for e id hanno lo stesso valore (username).

Rendiamo la compilazione del modulo più semplice aggiungendo le etichette agli input dell'esempio precedente.
Esempio:

Video tutorial