L'elemento HTML <input> rappresenta il componente cardine per l'acquisizione di dati utente all'interno dei moduli web.
Tipi di Input
Tipi Testuali e Semantici
| Tipo | Descrizione |
|---|---|
text |
Testo semplice su riga singola |
password |
Campo protetto per password |
email |
Indirizzo email con convalida automatica |
url |
Inserimento di URL assoluto |
tel |
Numero di telefono (tastierino numerico su mobile) |
search |
Campo di ricerca con pulsante di cancellazione |
Tipi Numerici e Quantitativi
| Tipo | Descrizione |
|---|---|
number |
Campo numerico a incrementi (min, max, step) |
range |
Cursore per selezione di valore approssimativo |
Tipi di Data e Ora
| Tipo | Descrizione |
|---|---|
date |
Selettore data (anno, mese, giorno) |
time |
Selettore ora (ore, minuti) |
datetime-local |
Data e ora locali senza fuso orario |
month |
Selettore di anno e mese |
week |
Selettore di anno e numero settimana ISO |
Selezione e Azioni
| Tipo | Descrizione |
|---|---|
checkbox |
Casella di controllo o selezione multipla |
radio |
Opzione a scelta singola in un gruppo |
color |
Tavolozza di selezione colore |
file |
Caricamento file (accept, multiple) |
hidden |
Valore nascosto inviato con il modulo |
submit |
Pulsante di invio del modulo |
reset |
Ripristina i valori predefiniti del modulo |
button |
Pulsante generico programmabile |
Attributi Principali di Validazione
| Attributo | Comportamento |
|---|---|
required |
Impedisce l'invio se il campo e vuoto |
pattern="[A-Za-z0-9]+" |
Espressione regolare richiesta per il valore |
min="1" max="100" |
Limiti minimi e massimi per numeri o date |
step="0.5" |
Intervallo di incremento consentito |
minlength="5" maxlength="20" |
Lunghezza minima e massima dei caratteri |
placeholder="..." |
Testo segnaposto indicativo |
readonly |
Impedisce la modifica ma invia il valore |
disabled |
Disabilita il campo e non invia il valore |
autofocus |
Assegna il focus al caricamento della pagina |
Esempio Completo di Modulo
<form action="/api/submit" method="POST">
<label for="user-email">Indirizzo Email:</label>
<input type="email" id="user-email" name="email" required placeholder="[email protected]" />
<label for="user-password">Password (almeno 8 caratteri):</label>
<input type="password" id="user-password" name="password" required minlength="8" />
<label for="user-age">Età:</label>
<input type="number" id="user-age" name="age" min="18" max="120" step="1" />
<label>
<input type="checkbox" name="terms" required />
Accetto i termini e condizioni
</label>
<input type="submit" value="Registrati" />
</form>