HTML fornisce vari elementi <input> che ti permettono di catturare diversi tipi di dati dagli utenti. Esploriamo alcuni tipi di input comunemente usati:

email e password

• type="email": utilizzato per i campi di input email che richiedono un indirizzo email valido. Il browser convalida automaticamente l'indirizzo email, invitando l'utente a correggere le voci non valide;

• type="password": utilizzato per i campi password dove il testo inserito è mascherato per sicurezza. Puoi anche specificare gli attributi minLength e maxLength per impostare i requisiti di lunghezza della password.

numero

type="number": utilizzato per l'input numerico. È possibile definire un intervallo specifico con gli attributi min e max e impostare un valore di passo specifico con l'attributo step.

telefono

type="tel": destinato all'inserimento di numeri di telefono, ma non esegue alcuna validazione sull'input. Spetta allo sviluppatore convalidare l'input e assicurarsi che sia un numero di telefono valido.

checkbox

type="checkbox": consente all'utente di selezionare una o più opzioni tra le scelte predefinite. L'attributo checked rende una casella di controllo selezionata per impostazione predefinita.

radio

type="radio": crea un insieme di opzioni in cui può essere selezionata solo un'opzione. Un pulsante di opzione rappresenta ciascuna opzione e la scelta di una deseleziona automaticamente le altre. Ogni pulsante di opzione dovrebbe avere un attributo value univoco per identificarlo.

range

type="range": crea un controllo a cursore che consente agli utenti di selezionare un valore all'interno di un intervallo specifico. È possibile applicare gli attributi min, max, step e value per definirne il comportamento.

Nota

JavaScript non è il focus di questo corso, quindi la logica dietro verrà saltata.

data e ora

• type="date": consente agli utenti di selezionare una data da un popup del calendario;

• type="time": consente agli utenti di inserire un'ora in formato 24 ore;

• type="datetime-local": combina input di tempo e data.

Esempio:

Nota

Per uno stile coerente su diversi dispositivi, vengono spesso utilizzate soluzioni pronte all'uso per i calendari popup e gli input di tempo.