Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Impara Esplorando i Diversi Tipi di Input in HTML | Moduli HTML e Input Utente
HTML Definitivo

bookEsplorando 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 attributi minLength e maxLength per impostare i requisiti di lunghezza della password.
index.html

index.html

copy

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

index.html

copy

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

index.html

copy

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

index.html

copy

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

index.html

copy

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.html

index.js

index.js

copy

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

index.html

copy

Nota

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

question mark

Qual è la principale differenza tra i campi di input type="email" e type="password"?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 5. Capitolo 5

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Suggested prompts:

Can you provide examples of each input type in HTML?

What are some best practices for using these input types in forms?

How can I validate user input for these different input types?

Awesome!

Completion rate improved to 2.56

bookEsplorando 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 attributi minLength e maxLength per impostare i requisiti di lunghezza della password.
index.html

index.html

copy

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

index.html

copy

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

index.html

copy

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

index.html

copy

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

index.html

copy

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.html

index.js

index.js

copy

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

index.html

copy

Nota

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

question mark

Qual è la principale differenza tra i campi di input type="email" e type="password"?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 5. Capitolo 5
some-alt