Tag HTML <input>
Il tag <input> è usato nei moduli HTML per definire il campo in cui l'utente può inserire dati. Descrizione del tag, attributi ed esempi.
Il tag <input> viene utilizzato all'interno dell'elemento <form> e definisce i campi per l'input dell'utente. Il tipo di campo — una casella di testo, una casella di controllo, un pulsante radio, un campo password, un selettore di file e molti altri — è determinato dal valore dell'attributo type. L'elemento è vuoto: non ha contenuto testuale e porta solo attributi.
<input> appartiene al gruppo degli elementi di modulo ed è uno dei tag più utilizzati nelle pagine interattive. Quasi ogni casella di accesso, barra di ricerca e modulo di registrazione è costruito con uno o più elementi <input>.
Per etichettare un campo in modo che gli utenti (e le tecnologie assistive) sappiano a cosa serve, abbinarlo a un tag <label>. Per trasformare l'input in un'azione — invio o reset del modulo — usare un input di tipo submit/reset o l'elemento <button>.
Questa pagina tratta la sintassi, ogni valore di type con esempi eseguibili, come vengono inviati i valori name/value, l'associazione delle etichette e la validazione HTML integrata.
Sintassi
Il tag <input> è vuoto, il che significa che il tag di chiusura non è richiesto. Ma in XHTML, il tag (<input>) deve essere chiuso (<input/>).
Esempio del tag HTML <input>:
Esempio del tag HTML <input>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="get">
<input type="email" name="user_email" placeholder="Enter your email" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Esempio del tag HTML <input> con il tag HTML <label>:
Esempio del tag HTML <input> con il tag HTML <label>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.form-group { margin-bottom: 10px; }
</style>
</head>
<body>
<form action="/form/submit" method="get">
<div class="form-group">
<label for="first_name">Your Name:</label>
<input type="text" id="first_name" name="first_name" />
</div>
<div class="form-group">
<label for="last_name">Your Surname:</label>
<input type="text" id="last_name" name="last_name" />
</div>
<div class="form-group">
<label for="user_email">Enter Your E-Mail:</label>
<input type="email" id="user_email" name="user_email" />
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>Associare un'etichetta a un input
Una casella di input senza etichetta non fornisce all'utente alcuna indicazione su cosa digitare. Il tag <label> risolve questo problema e fa molto più che mostrare del testo:
- I lettori di schermo annunciano l'etichetta quando l'input riceve il focus, in modo che gli utenti di tecnologie assistive sappiano cosa richiede il campo.
- L'area di click si amplia. Facendo clic sul testo dell'etichetta si porta il focus sull'input (e si attiva/disattiva una casella di controllo o un pulsante radio). Questo rappresenta un grande miglioramento dell'usabilità per le caselle di controllo piccole.
Esistono due modi per associare un'etichetta a un input:
1. Esplicito — for corrisponde a id. L'attributo for dell'etichetta deve essere uguale all'id dell'input:
<label for="username">Username:</label>
<input type="text" id="username" name="username" />2. Implicito — incorporare l'input all'interno dell'etichetta. Non è necessario id/for:
<label>
Username:
<input type="text" name="username" />
</label>Preferire la forma esplicita quando il layout CSS separa l'etichetta e il campo. In ogni caso, assegnare un'etichetta a ogni input — l'attributo placeholder non è un sostituto, perché il suggerimento scompare non appena l'utente inizia a digitare.
Attributi
L'attributo principale che determina il tipo di campo di input è type. Se l'attributo è assente, il valore predefinito è "text".
| Attributo | Valore | Descrizione |
|---|---|---|
| accept | audio/* video/* image/* MIME_type | Specifica i tipi di file che è possibile inviare tramite il campo di caricamento file. (Usato con type="file"). |
| align | left right top middle bottom | Definisce il tipo di allineamento dell'immagine. (Usato solo con le immagini). Non supportato in HTML5. |
| alt | text | Definisce il testo alternativo per l'immagine. (Usato solo con le immagini). |
| autocomplete | on off | Abilita/disabilita il completamento automatico. Nuovo attributo in HTML5. |
| autofocus | autofocus | Indica che il campo del modulo deve ricevere il focus dopo il caricamento della pagina. Nuovo attributo in HTML5. |
| checked | checked | Indica che l'elemento deve essere preselezionato al caricamento della pagina. (Usato solo per <input type = "checkbox"> e <input type = "radio">). |
| disabled | disabled | Indica che l'elemento non deve essere disponibile per l'interazione dell'utente. |
| form | form_id | Indica il modulo (specificato dall'elemento <form>) dell'elemento di controllo. Il valore è l'identificatore del modulo (id) nello stesso documento. Nuovo attributo in HTML5. |
| formaction | URL | Specifica l'indirizzo a cui verranno inviati i dati del modulo al clic sul pulsante. (Usato solo per <input type = "image"> e <input type = "submit">). |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | Determina come i dati del modulo vengono codificati prima di inviarli al server. (Usato solo con <input type="image"> e <input type="submit">). Valori: application/x-www-form-urlencoded (predefinito, codifica tutti i caratteri), multipart/form-data (nessuna codifica, usato per il caricamento di file), text/plain (gli spazi diventano +, gli altri caratteri non vengono codificati). |
| formmethod | get post | Indica il metodo di richiesta HTTP che verrà utilizzato per l'invio dei dati del modulo. (Usato solo per <input type = "image"> e <input type = "submit">). get invia i dati del modulo nella barra degli indirizzi. post invia i dati al server per l'elaborazione. |
| formnovalidate | formnovalidate | Indica che non è necessario verificare la correttezza dei dati. (Usato solo per <input type = "submit">). |
| formtarget | _blank _self _parent _top | Specifica dove visualizzare la risposta dopo l'invio del modulo. (Usato solo per <input type = "image"> e <input type = "submit">). |
| height | pixels | Definisce l'altezza dell'elemento (usato solo per <input type = "image">). |
| inputmode | none text decimal numeric tel search email url | Suggerisce quale layout di tastiera virtuale mostrare sui dispositivi touch (ad esempio numeric mostra un tastierino numerico). |
| list | datalist_id | Definisce un elenco di opzioni tra cui l'utente può scegliere. Il valore dell'attributo è l'id dell'elemento <datalist>. |
| max | number date | Imposta il valore massimo per l'inserimento di un numero o una data. |
| maxlength | number | Definisce il numero massimo di caratteri che l'utente può inserire. |
| min | number date | Imposta il valore minimo per l'inserimento di un numero o una data. |
| multiple | multiple | Indica che l'utente può inserire più di un valore nell'elemento (solo per <input type = "file"> e <input type = "email">). |
| name | text | Definisce il nome dell'elemento. (Usato per l'identificazione del modulo). |
| pattern | regular expression | Specifica un'espressione regolare in base alla quale inserire e verificare i dati nel campo del modulo. (Solo per gli elementi di controllo text, search, tel, url, email e password). |
| placeholder | text | Definisce un breve suggerimento che descrive il valore atteso per il campo di input. L'utente vede un hint nel campo di input. Scompare quando l'utente inizia a inserire dati o quando il campo riceve il focus. |
| readonly | readonly | Definisce che il campo di input è abilitato solo per la lettura. L'utente non può apportare modifiche. |
| required | required | Indica che il campo di input deve essere compilato prima di inviare il modulo. |
| size | number | Definisce la larghezza visibile del campo di testo in caratteri. (Solo per text, search, tel, url, email e password). Il valore predefinito è 20 caratteri. |
| src | URL | Indica il percorso dell'immagine usata come pulsante "invia". (Usato solo per <input type = "image">). |
| step | number | Imposta il passo di incremento (valore di incremento) per i campi numerici. Usato con gli attributi min e max che definiscono i valori minimo e massimo. |
| type | button checkbox color date datetime (deprecated) datetime-local email file hidden image month number password radio range reset search submit tel text time url week | Definisce il tipo di campo di input. |
| value | text | Definisce il valore dell'elemento. |
| width | width | Definisce la larghezza dell'elemento (solo per <input type = "image">). |
Il tag <input> supporta anche gli attributi globali e gli attributi evento.
Valori dell'attributo type
| Valore | Descrizione |
|---|---|
| button | Definisce un pulsante attivo. |
| checkbox | Casella di controllo (l'utente può selezionare più di un'opzione). |
| color | Specifica una tavolozza dei colori (l'utente può selezionare valori cromatici in esadecimale). |
| date | Definisce il campo di input per la data del calendario. |
| datetime (deprecated) | Definisce il campo di input per data e ora. (Deprecato in HTML5, usare datetime-local al suo posto.) |
| datetime-local | Definisce il campo di input per data e ora senza fuso orario. |
| Definisce il campo di input per l'e-mail. | |
| file | Imposta il controllo con il pulsante Sfoglia, cliccando sul quale è possibile selezionare e caricare il file. |
| hidden | Definisce un campo di input nascosto. Non è visibile all'utente. |
| image | Indica che al posto di un pulsante viene usata un'immagine per inviare dati al server. Il percorso dell'immagine è indicato dall'attributo src. È possibile utilizzare anche l'attributo alt per specificare un testo alternativo, e gli attributi height e width per specificare altezza e larghezza dell'immagine. |
| month | Definisce il campo per la selezione di un mese, dopodiché i dati saranno visualizzati come anno-mese (ad esempio: 2018-07). |
| number | Definisce il campo di input per i numeri. |
| password | Definisce un campo per l'inserimento di una password (i caratteri inseriti vengono visualizzati come asterischi, punti o altri caratteri). |
| radio | Crea un pulsante radio (selezionando un pulsante radio, tutti gli altri vengono disattivati). |
| range | Crea uno slider per selezionare numeri nell'intervallo specificato. L'intervallo predefinito va da 0 a 100. L'intervallo di numeri è specificato dagli attributi min e max. |
| reset | Definisce un pulsante per il reset delle informazioni. |
| search | Crea un campo di testo per la ricerca. |
| submit | Crea un pulsante per l'invio dei dati del modulo (pulsante "submit"). |
| text | Crea un campo di testo a riga singola. |
| time | Specifica un campo numerico per l'inserimento dell'ora in formato 24 ore (ad esempio, 13:45). |
| url | Crea un campo di input per URL. |
| week | Crea un campo per la selezione della settimana, dopodiché i dati saranno visualizzati come anno-settimana (ad esempio: 2018-W25). |
Esempi dei tipi di input più comuni
Il valore di type cambia sia l'aspetto che il comportamento di un input. Di seguito i tipi che si utilizzano più frequentemente.
Caselle di controllo e raggruppamento con name
Una casella di controllo consente all'utente di attivare o disattivare un'opzione. Usare checked per preselezionarla. Quando più caselle di controllo condividono lo stesso name, formano un gruppo e ciascuna casella selezionata viene inviata separatamente come name=value:
<form>
<label><input type="checkbox" name="topping" value="cheese" checked /> Cheese</label>
<label><input type="checkbox" name="topping" value="bacon" /> Bacon</label>
<label><input type="checkbox" name="topping" value="onion" /> Onion</label>
</form>L'invio con Cheese e Onion selezionati invia topping=cheese&topping=onion.
Pulsanti radio (stesso name)
I pulsanti radio che condividono lo stesso name sono mutuamente esclusivi — selezionarne uno deseleziona gli altri. Impostare sempre un value su ciascuno in modo che il server sappia quale opzione è stata scelta:
<form>
<p>Choose a size:</p>
<label><input type="radio" name="size" value="s" /> Small</label>
<label><input type="radio" name="size" value="m" checked /> Medium</label>
<label><input type="radio" name="size" value="l" /> Large</label>
</form>Caricamento di file
type="file" aggiunge un pulsante Sfoglia. Aggiungere accept per filtrare il selettore di file e multiple per consentire la selezione di più file:
<form>
<label for="avatar">Profile picture:</label>
<input type="file" id="avatar" name="avatar" accept="image/*" />
</form>Numero con min, max e step
type="number" mostra un campo numerico con frecce di scorrimento. min/max definiscono l'intervallo e step imposta l'incremento (usare step="0.01" per la valuta, step="any" per consentire qualsiasi decimale):
<form>
<label for="qty">Quantity (1–10):</label>
<input type="number" id="qty" name="qty" min="1" max="10" step="1" value="1" />
</form>Slider di intervallo
type="range" è uno slider per un valore approssimativo che l'utente non ha bisogno di vedere con precisione. Utilizza gli stessi attributi min, max e step:
<form>
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="5" value="50" />
</form>Password
type="password" nasconde i caratteri digitati. Il valore viene comunque inviato in testo normale, quindi il modulo dovrebbe essere inviato tramite HTTPS:
<form>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd" minlength="8" required />
</form>Come vengono inviati name e value
Quando un modulo viene inviato, il browser costruisce una query string di coppie name=value dai suoi controlli. Il ruolo di value dipende dal tipo di input:
- Campi di tipo testo (
text,email,url,password,number,search,tel):valueè il testo predefinito mostrato nella casella; ciò che l'utente digita lo sostituisce e viene inviato. - Radio e checkbox:
valueè il dato inviato solo quando quel controllo è selezionato. Una casella non selezionata non invia nulla. Ecco perché ogni opzione ha bisogno del propriovalue. - Submit e button:
valueè l'etichetta stampata sul pulsante. Un pulsante submit con nome invia anche la sua coppianame=value, il che consente al server di identificare quale pulsante è stato premuto.
Un input senza name non viene mai inviato — può essere comunque utile per gli script lato client, ma il server non lo vede mai.
Validazione dei moduli
I browser possono validare gli input prima dell'invio del modulo, senza JavaScript. Se un campo non supera la verifica, il browser blocca l'invio e mostra un messaggio. Gli strumenti principali sono:
required— il campo non deve essere vuoto.type="email"/type="url"— il valore deve essere un indirizzo e-mail o URL sintatticamente valido.pattern— un'espressione regolare a cui il valore deve corrispondere (funziona su text, search, tel, url, email, password).min/max/step— limiti di intervallo per numeri e date.minlength/maxlength— limiti di lunghezza della stringa.
Questo esempio li combina. Provare a inviarlo vuoto, poi con dati errati:
<!DOCTYPE html>
<html>
<head>
<title>Form validation</title>
<style>
.form-group { margin-bottom: 10px; }
label { display: block; }
</style>
</head>
<body>
<form action="/form/submit" method="post">
<div class="form-group">
<label for="email">Email (required):</label>
<input type="email" id="email" name="email" required />
</div>
<div class="form-group">
<label for="site">Website (must start with https://):</label>
<input type="url" id="site" name="site" pattern="https://.*" placeholder="https://example.com" />
</div>
<div class="form-group">
<label for="zip">ZIP code (5 digits):</label>
<input type="text" id="zip" name="zip" pattern="[0-9]{5}" maxlength="5" required />
</div>
<div class="form-group">
<label for="age">Age (18–99):</label>
<input type="number" id="age" name="age" min="18" max="99" step="1" required />
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>Per saltare questo controllo integrato per un particolare pulsante di invio, aggiungere formnovalidate. Per selezionare un campo con CSS, le pseudo-classi :valid, :invalid e :required corrispondono allo stato di validazione. Per ulteriori informazioni sulla configurazione dei moduli e il loro invio, consultare il tag <form>.