Tra i tag più importanti all'interno dei form c'è sicuramente <input>, che abbiamo già introdotto nella lezione precedente. Il tag <input> permette di creare diversi tipi di campi e controlli che l'utente può utilizzare per inserire o selezionare dei dati.
Esistono numerosi tipi di <input>, ognuno progettato per gestire un tipo specifico di dato o di interazione. Il tipo di input viene stabilito tramite l'attributo type. Di seguito sono elencati i principali tipi di input disponibili in HTML.
| Tipo | Esempio | Descrizione |
type="button" |
Crea un semplice pulsante che, da solo, non invia il form. Il testo visualizzato può essere impostato tramite l'attributo value. |
|
type="checkbox" |
Crea una casella che l'utente può selezionare o deselezionare. Quando sono presenti più checkbox, l'utente può selezionarne anche più di una contemporaneamente. | |
type="color" |
Permette all'utente di selezionare un colore attraverso il selettore messo a disposizione dal browser. | |
type="date" |
Permette di selezionare una data composta da giorno, mese e anno. | |
type="datetime-local" |
Permette di selezionare una data e un orario, senza specificare il fuso orario. | |
type="email" |
Permette di inserire un indirizzo email. Se l'input è obbligatorio, il browser controlla che il valore inserito abbia un formato compatibile con un indirizzo email prima di inviare il form. | |
type="file" |
Permette all'utente di selezionare un file dal proprio dispositivo. Con l'attributo accept è possibile indicare quali tipi di file possono essere selezionati. |
|
type="hidden" |
Permette di inviare un valore insieme al form senza visualizzare il campo all'utente. Il valore può essere impostato tramite l'attributo value. |
|
type="image" |
Crea un pulsante di invio rappresentato da un'immagine. L'immagine viene indicata tramite l'attributo src. |
|
type="month" |
Permette all'utente di selezionare un mese e un anno. | |
type="number" |
Permette di inserire un valore numerico. È possibile utilizzare gli attributi min, max e step per limitarne e controllarne il valore. |
|
type="password" |
Permette di inserire una password nascondendo visivamente i caratteri digitati. | |
type="radio" |
Permette di scegliere una sola opzione tra più alternative. Per creare un gruppo di pulsanti radio, gli input devono avere lo stesso attributo name. |
|
type="range" |
Permette di scegliere un valore all'interno di un intervallo. Gli attributi min e max possono essere utilizzati per stabilire i limiti. |
|
type="reset" |
Crea un pulsante che ripristina i valori iniziali di tutti i campi del form. Il testo del pulsante può essere impostato tramite l'attributo value. |
|
type="search" |
Crea un campo pensato per l'inserimento di termini di ricerca. È simile a un input di testo, ma è specificamente destinato alle ricerche. | |
type="submit" |
Crea un pulsante che permette di inviare il form. Il testo visualizzato può essere impostato tramite l'attributo value. |
|
type="tel" |
Crea un campo destinato all'inserimento di un numero di telefono. Il browser non impone automaticamente che siano inseriti soltanto numeri. | |
type="text" |
Crea un semplice campo di testo nel quale l'utente può inserire una stringa. | |
type="time" |
Permette all'utente di selezionare un orario, generalmente composto da ore e minuti. | |
type="url" |
Permette di inserire un indirizzo web. Quando il form viene inviato, il browser può controllare che il valore abbia un formato valido per un URL. | |
type="week" |
Permette di selezionare una specifica settimana di un determinato anno. |
Nota: alcuni tipi di input possono avere un aspetto o un comportamento leggermente diverso a seconda del browser e del dispositivo utilizzato. Per questo motivo è consigliabile utilizzare un browser aggiornato.
Questo tipo di input serve per creare un pulsante che, di per sé, non esegue alcuna azione quando viene cliccato. Per stabilire il testo visualizzato all'interno del pulsante si utilizza l'attributo value.
<form>
<input type="button" value="Clicca qui">
</form>
Questo tipo di input permette all'utente di selezionare una o più opzioni. L'elemento <input> visualizza la casella, mentre il testo associato può essere inserito utilizzando il tag <label>.
<h1>Scegli un linguaggio di programmazione</h1>
<form>
<input type="checkbox" name="html" id="linguaggio1">
<lable for="linguaggio1">HTML</label><br/>
<input type="checkbox" name="css" id="linguaggio2">
<lable for="linguaggio2">CSS</label><br/>
<input type="checkbox" name="JavaScript" id="linguaggio3">
<lable for="linguaggio3">JavaScript</label>
</form>
Questo tipo di input permette all'utente di selezionare un colore. È possibile utilizzare l'attributo value="valore" per impostare un colore iniziale.
<h1>Scegli un colore</h1>
<form>
<input type="color" name="colore" id="colore" value="#fff">
</form>
Questo tipo di input permette di selezionare una data composta da giorno, mese e anno. Gli attributi min="valore" e max="valore" possono essere utilizzati per stabilire rispettivamente la data minima e quella massima consentita. Il valore deve essere scritto nel formato aaaa-mm-gg.
<h1>Scegli una data</h1>
<form>
<input type="date" name="data" id="data" min="2021-01-01" max="2022-01-01">
</form>
Questo tipo di input permette di selezionare una data e un orario. La data comprende giorno, mese e anno, mentre l'orario comprende ore e minuti. Gli attributi min="valore" e max="valore" possono essere utilizzati per limitare i valori disponibili. Il formato utilizzato è simile a aaaa-mm-ggT--:--.
<h1>Scegli una data e un orario</h1>
<form>
<input type="datetime-local" name="data" id="data" min="2021-01-01T00:00" max="2022-01-01T12:30">
</form>
Questo tipo di input viene utilizzato per inserire un indirizzo email. Se è presente l'attributo required, il browser verifica che il campo non sia vuoto e che il valore inserito abbia un formato compatibile con un indirizzo email prima di consentire l'invio del form.
<h1>Inserisci la tua email</h1>
<form>
<input type="email" name="email" id="email">
</form>
Questo tipo di input permette all'utente di selezionare un file presente sul proprio dispositivo. L'attributo accept="valore" può essere utilizzato per indicare quali tipi di file possono essere selezionati.
<h1>Scegli un file da inviarci</h1>
<form>
<input type="file" name="file" id="file" accept=".mp4,.png,.mp3,.txt">
</form>
Questo tipo di input viene utilizzato per inserire nel form un valore che non deve essere mostrato direttamente all'utente. Il valore viene impostato tramite l'attributo value="valore" e viene inviato insieme agli altri dati del form.
Un esempio potrebbe essere un identificativo utilizzato dal server per riconoscere una determinata operazione. È importante ricordare che non è un dato segreto: anche se il campo non è visibile nella pagina, l'utente può visualizzarne il valore tramite gli strumenti di sviluppo del browser.
Nota: non inserire password, token o altri dati sensibili in un input type="hidden".
<form>
<input type="hidden" name="id" id="id" value="id-79876764">
</form>
Questo tipo di input crea un pulsante di invio rappresentato da un'immagine. Quando viene cliccato, il form viene inviato come avviene con un input type="submit". L'immagine viene specificata tramite l'attributo src="percorso", mentre l'attributo alt="testo" può fornire un testo alternativo.
<h1>Invia il form</h1>
<form>
<input type="text"> <!-- Contenuto da inviare -->
<input type="image" src="file.png" id="immagine" alt="Invio del form">
</form>
Questo tipo di input permette di selezionare un mese e un anno. Gli attributi min="valore" e max="valore" possono essere utilizzati per limitare l'intervallo disponibile. Il valore segue il formato aaaa-mm.
<h1>Scegli il mese</h1>
<form>
<input type="month" id="data" name="data" min="2020-01" max="2022-01">
</form>
Questo tipo di input permette di inserire un valore numerico. Gli attributi min="valore" e max="valore" possono essere utilizzati per stabilire rispettivamente il valore minimo e massimo.
È inoltre possibile utilizzare l'attributo step="valore" per stabilire di quanto può aumentare o diminuire il valore a ogni passaggio. In molti browser vengono visualizzati anche dei pulsanti che permettono di modificare rapidamente il numero.
<h1>Scegli un numero da 10 a 30</h1>
<form>
<input type="number" id="numero" name="numero" min="10" max="30" step="2">
</form>
Questo tipo di input viene utilizzato per inserire una password all'interno di un form. I caratteri digitati vengono nascosti visivamente, così da non mostrarli direttamente sullo schermo.
Quando si inviano dati sensibili come una password, è importante utilizzare una connessione HTTPS. L'attributo method="valore" del tag <form> può essere impostato su post per evitare di inserire i dati inviati direttamente nell'URL.
<h1>Inserisci la tua password per accedere</h1>
<form method="post">
<input type="password" id="password" name="password">
</form>
Questo tipo di input permette all'utente di scegliere una sola opzione tra quelle disponibili. Per fare in modo che più input radio appartengano allo stesso gruppo, devono avere lo stesso attributo name="valore".
Come per i checkbox, l'elemento <input> visualizza soltanto il controllo. Il testo associato può essere inserito tramite il tag <label>.
<h1>Scegli un solo linguaggio di programmazione</h1>
<form>
<input type="radio" name="html" id="linguaggio1">
<lable for="linguaggio1">HTML</label><br/>
<input type="radio" name="css" id="linguaggio2">
<lable for="linguaggio2">CSS</label><br/>
<input type="radio" name="JavaScript" id="linguaggio3">
<lable for="linguaggio3">JavaScript</label>
</form>
Questo tipo di input permette di selezionare un numero all'interno di un determinato intervallo. Gli attributi min="valore" e max="valore" stabiliscono i limiti dell'intervallo.
È possibile utilizzare anche l'attributo step="valore" per stabilire di quanto deve aumentare o diminuire il valore quando l'utente sposta il cursore.
<h1>Scegli un numero</h1>
<form method="post">
<input type="range" id="numero" name="numero" min="20" max="50" step="5">
</form>
Questo tipo di input crea un pulsante che ripristina i valori iniziali dei campi del form. Il testo visualizzato nel pulsante può essere impostato tramite l'attributo value="valore".
I pulsanti di reset vengono utilizzati poco perché un clic accidentale potrebbe far perdere all'utente i dati appena inseriti. Per questo motivo, nella maggior parte dei casi è preferibile evitarne l'utilizzo.
<h1>Invia il form</h1>
<form>
<input type="text"> <!-- Contenuto da inviare -->
<input type="reset" value="Cancella contenuto">
</form>
Questo tipo di input crea un pulsante che permette all'utente di inviare il form. Quando viene cliccato, il browser esegue i controlli di validazione previsti e, se i dati sono validi, invia il form.
Il testo visualizzato nel pulsante può essere impostato tramite l'attributo value="valore".
<h1>Invia il form</h1>
<form>
<input type="text"> <!-- Contenuto da inviare -->
<input type="submit" value="Invia il form">
</form>
Questo tipo di input è pensato per l'inserimento di un numero di telefono. A differenza di type="number", però, non limita automaticamente i caratteri ai soli numeri, perché i numeri di telefono possono contenere anche simboli come +, spazi o parentesi.
Se vuoi controllare il formato del numero inserito, puoi utilizzare l'attributo pattern="valore". Ad esempio, pattern="[0-9]+" permette di accettare una o più cifre.
<h1>Scegli un numero di telefono</h1>
<form>
<input type="tel" name="telefono" id="telefono" pattern="[0-9]+">
</form>
Questo è il tipo di input più semplice e viene utilizzato per permettere all'utente di inserire una stringa di testo. È adatto, ad esempio, per nomi, titoli, parole o brevi messaggi.
<h1>Inserisci un titolo alla pagina</h1>
<form>
<input type="text" name="testo" id="testo">
</form>
Questo tipo di input permette di selezionare facilmente un orario, generalmente composto da ore e minuti. Gli attributi min="valore" e max="valore" possono essere utilizzati per limitare gli orari selezionabili.
<h1>Scegli un orario per la tua prenotazione</h1>
<form method="post">
<input type="time" id="orario" name="orario" min="10:00" max="20:30">
</form>
Questo tipo di input viene utilizzato per inserire un URL, ad esempio l'indirizzo di una pagina web. Se è presente l'attributo required, il browser controlla il valore inserito prima dell'invio del form.
Il controllo verifica che il valore abbia un formato compatibile con un URL. Non è quindi sufficiente controllare soltanto se il testo inizia con http:// o https://: la validazione viene eseguita dal browser secondo le regole previste per questo tipo di input.
<h1>Inserisci un sito web</h1>
<form method="post">
<input type="url" id="sito" name="sito">
</form>
Questo tipo di input permette di selezionare una settimana specifica di un determinato anno. Il valore segue il formato aaaa-W--, dove la parte numerica finale identifica la settimana.
Gli attributi min="valore" e max="valore" possono essere utilizzati per limitare le settimane disponibili.
<h1>Scegli una settimana</h1>
<form>
<input type="week" name="settimana" id="settimana" min="2022-W01" max="2022-W10">
</form>
Oltre all'attributo type, gli input possono utilizzare numerosi altri attributi per modificare il loro comportamento, impostare valori iniziali o stabilire quali dati possono essere inseriti. In questa lezione vediamo checked, maxlength, minlength, placeholder, readonly, required, size e value.
L'attributo checked permette di indicare che un checkbox o un radio button deve essere selezionato inizialmente. Può essere utilizzato con gli input type="checkbox" e type="radio".
<h1>Scegli un linguaggio di programmazione</h1>
<form>
<input type="checkbox" name="html" id="linguaggio1" checked>
<lable for="linguaggio1">HTML</label><br/>
<input type="checkbox" name="css" id="linguaggio2">
<lable for="linguaggio2">CSS</label><br/>
<input type="checkbox" name="JavaScript" id="linguaggio3">
<lable for="linguaggio3">JavaScript</label>
<input type="submit" value="Invia">
</form>
Gli attributi maxlength="valore" e minlength="valore" permettono di stabilire rispettivamente la lunghezza massima e minima del testo inserito.
Ad esempio, maxlength="10" impedisce di inserire più di 10 caratteri, mentre minlength="3" richiede almeno 3 caratteri quando il valore viene sottoposto a validazione. Questi attributi possono essere utilizzati con gli input di tipo email, password, search, tel, text e url.
<h1>Inserisci un titolo</h1>
<form>
<input type="text" name="testo" maxlength="100" minlength="10">
<input type="submit" value="Invia">
</form>
L'attributo placeholder="valore" permette di visualizzare un testo all'interno del campo quando l'utente non ha ancora inserito alcun valore. Il testo viene generalmente utilizzato come suggerimento per spiegare cosa inserire nel campo.
Il placeholder non deve essere utilizzato al posto di una vera etichetta <label>, perché scompare non appena l'utente inizia a digitare. Può essere utilizzato con gli input email, number, password, search, tel, text e url.
<h1>Accedi al sito web</h1>
<form method="post">
<input type="email" name="email" id="email" placeholder="Inserisci la tua email">
<input type="password" name="password" id="password" placeholder="Inserisci la tua password">
<input type="submit" value="Accedi">
</form>
L'attributo readonly impedisce all'utente di modificare il valore di un input, permettendogli comunque di visualizzarlo e, in generale, di inviarlo insieme agli altri dati del form.
Può essere utilizzato, ad esempio, quando vuoi mostrare un valore che l'utente può leggere ma non deve modificare direttamente. È supportato da input come date, datetime-local, email, month, number, password, search, tel, text, time, url e week.
<h1>Scegli un linguaggio di programmazione</h1>
<form>
<input type="checkbox" name="html" id="linguaggio1" readonly>
<lable for="linguaggio1">HTML</label><br/>
<input type="checkbox" name="css" id="linguaggio2">
<lable for="linguaggio2">CSS</label><br/>
<input type="checkbox" name="JavaScript" id="linguaggio3">
<lable for="linguaggio3">JavaScript</label>
<input type="submit" value="Invia">
</form>
L'attributo required indica che un campo deve essere compilato prima di poter inviare il form. Se l'utente prova a inviare il modulo senza compilare un campo obbligatorio, il browser mostra un messaggio di errore e blocca temporaneamente l'invio.
Questo attributo permette inoltre di attivare i controlli di validazione specifici di alcuni input. Ad esempio, un campo type="email" deve contenere un valore con un formato compatibile con un indirizzo email, mentre un campo type="url" deve contenere un valore con un formato compatibile con un URL.
<h1>Accedi al sito web</h1>
<form method="post">
<input type="email" name="email" id="email" required>
<input type="password" name="password" id="password" required>
<input type="submit" value="Accedi">
</form>
L'attributo size="valore" indica la larghezza visibile di un campo di testo, espressa in numero di caratteri. Non stabilisce quindi quanti caratteri l'utente può inserire: per limitare la quantità di testo bisogna utilizzare maxlength.
L'attributo size può essere utilizzato con gli input email, password, tel, text e url.
<h1>Inserisci un sito web</h1>
<form method="post">
<input type="url" id="sito" name="sito" size="20">
<input type="submit" value="Invia">
</form>
L'attributo value="valore" permette di impostare il valore iniziale di un input. Il suo comportamento dipende dal tipo di input utilizzato.
Ad esempio, può contenere un numero per input come date, datetime-local, month, number, range, time e week; un testo per email, hidden, password, search, text e url; oppure il testo visualizzato all'interno di un pulsante per button, reset e submit.
Per alcuni tipi, come color, il valore deve rispettare il formato previsto dal browser. Il tipo file, invece, ha regole particolari e non può essere utilizzato per impostare arbitrariamente un file iniziale tramite value.
<h1>Inserisci i valori richiesti</h1>
<form>
<input type="range" id="numero" name="numero" min="1" max="100" value="50">
<input type="url" id="sito" name="sito" value="https://">
<input type="hidden" name="id" id="id" value="id-79876764">
<input type="color" name="colore" id="colore" value="#fff">
<input type="submit" value="Invia">
</form>
Nota: questa lezione spiega come creare e configurare i campi di un form, ma non come elaborare i dati dopo il loro invio. Per ricevere, controllare e utilizzare i dati sul server è necessario utilizzare un linguaggio lato server, come Node.js, che puoi imparare su Biadets.