Esplorando i Diversi Tipi di Input in HTML
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 attributiminLengthemaxLengthper impostare i requisiti di lunghezza della password.
index.html
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.
index.html
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.
index.html
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.
index.html
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.
index.html
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.
index.html
index.js
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:
index.html
Nota
Per uno stile coerente su diversi dispositivi, vengono spesso utilizzate soluzioni pronte all'uso per i calendari popup e gli input di tempo.
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Can you explain more about how browser validation works for these input types?
What are some best practices for using these different input types in forms?
Can you show examples of how to use these input types in an HTML form?
Awesome!
Completion rate improved to 2.56Esplorando i Diversi Tipi di Input in HTML
Scorri per mostrare il menu
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 attributiminLengthemaxLengthper impostare i requisiti di lunghezza della password.
index.html
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.
index.html
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.
index.html
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.
index.html
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.
index.html
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.
index.html
index.js
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:
index.html
Nota
Per uno stile coerente su diversi dispositivi, vengono spesso utilizzate soluzioni pronte all'uso per i calendari popup e gli input di tempo.
Grazie per i tuoi commenti!
