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

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

html

index.html

copy
<form onsubmit="return false">
<!-- Email input -->
<label for="mail">Email</label>
<input type="email" id="mail" />
<!-- Password input -->
<label for="password">Password</label>
<input type="password" id="password" />
<button type="submit">Submit</button>
</form>

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.

html

index.html

copy
<form onsubmit="return false">
<label for="year">Year of birth</label>
<input type="number" min="1900" max="2023" id="year" />

<label for="height">Height with 0.1 step</label>
<input type="number" id="height" step="0.1" min="0.1" max="10.0" />

<button type="submit">Submit</button>
</form>

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.

html

index.html

copy
<form onsubmit="return false">
<label for="phone">Phone number:</label>
<input type="tel" id="phone" />

<button type="submit">Submit</button>
</form>

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.

html

index.html

copy
<form onsubmit="return false">
<p>What is your favorite season?</p>
<label>
Winter
<input type="checkbox" name="winter" value="winter" checked />
</label>
<label>
Spring
<input type="checkbox" name="spring" value="spring" />
</label>
<label>
Summer
<input type="checkbox" name="summer" value="summer" />
</label>
<label>
Fall
<input type="checkbox" name="fall" value="fall" />
</label>
</form>

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.

html

index.html

copy
<form onsubmit="return false">
<p>What is your favorite food?</p>
<label>
<input type="radio" name="dish" value="pasta" checked />
Pasta
</label>
<label>
<input type="radio" name="dish" value="pizza" />
Pizza
</label>
<label>
<input type="radio" name="dish" value="burger" />
Burger
</label>
<label>
<input type="radio" name="dish" value="steak" />
Steak
</label>
</form>

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.

html

index.html

js

index.js

copy
<form onsubmit="return false">
<label for="day">Day of the week</label>
<input id="day" type="range" value="5" min="1" max="7" step="1" />
</form>
<p>Selected value: <span class="selected-value">5</span></p>
<script src="index.js"></script>

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:

html

index.html

copy
<form onsubmit="return false">
<!-- Date input -->
<label for="date">Date</label>
<input type="date" min="1970-01-01" max="2070-01-01" id="date" />

<!-- Time input -->
<label for="time">Time</label>
<input type="time" id="time" />

<!-- Date and Time input -->
<label for="full-time">Date and Time</label>
<input type="datetime-local" min="1900-01-01T00:00" max="2000-01-01T00:00" id="full-time" />
</form>

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
ChatGPT

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

some-alt