Tra i tag più importanti all’interno dei form c’è sicuramente <input>, che abbiamo già accennato nella lezione precedente.
Tutte le tipologie di input
Ci sono tanti tipi di input che si possono utilizzare all’interno di un form. Eccoli in ordine alfabetico:
| Tag | Esempio | Descrizione |
| Un pulsante. Inserire l’attributo value per visualizzare il testo del pulsante. | ||
| Permette di selezionare o deselezionare la casella. In una serie di caselle, l’utente può sceglierne più di una. | ||
| Permette di selezionare un colore all’utente. | ||
| Permette di selezionare una data all’utente, composta soltanto da giorno, mese e anno. | ||
| Permette di selezionare una data, composta da giorno, mese, anno, ore e minuti. | ||
| Permette all’utente di inserire un’email. Prima dell’invio del form, l’input viene controllato con i requisiti di una email: deve essere scritta testo+@+testo (solo se l’input contiene l’attributo required) | ||
| Permette di inserire un file all’utente. Con ’attributo accept, si può indicare quali estensioni sono accettate. | ||
| L’input non è visualizzato dall’utente, ma arriva al server quando il form viene inviato. | ||
| Un pulsante che permette l’invio del form, ma sottoforma di immagine. Si utilizza l’attributo src per indicare il percorso dell’immagine. | ||
| Permette di inserire all’utente di inserire il mese e l'anno. | ||
| Permette di inserire un numero all’utente. Non sono permessi altri caratteri nell’input. | ||
| Permette di inserire una password. I caratteri saranno coperti. | ||
| Permette di selezionare o deselezionare la casella. In una serie di caselle, l’utente può sceglierne solo una. Se c’è soltanto una scelta, la casella non sarà deselezionabile. | ||
| Permette di scegliere un numero all’interno di un range indicato con gli attributi min e max. | ||
| Pulsante che resetta tutto il contenuto del form inserito dall’utente. Inserire l’attributo value per impostare un testo nel pulsante. | ||
| Input usata come campo di ricerca. È molto simile ad un input di testo. | ||
| Pulsante che invia il form al server. Inserire l’attributo value per impostare un testo nel pulsante. | ||
| Input per inserire un numero di telefono. Permette tutti i caratteri. Con l’attributo pattern si possono scegliere quali caratteri sono consentiti. | ||
| Semplice casella di testo. Permette di inserire un testo all’utente. | ||
| Permette all’utenti di inserire un orario formato da ora e minuti. | ||
| Input utilizzato per inserire un url. Quando il form viene inviato, l’input viene controllato (solo se l’input contiene l’attributo required). | ||
| Permette all’utenti di inserire la settimana di un anno. |
Nota: alcuni di questi attributi potrebbero non funzionare in alcuni browser non aggiornati.
Input type="button"
Questo tipo di input serve per creare un pulsante. Con l’attributo value si può scegliere il testo visualizzato nel pulsante.
<form>
<input type="button" value="Clicca qui">
</form>
Input type="checkbox"
Questo tipo di input è utilizzato per far scegliere all’utente una o più opzioni tra quelle presenti. Questi input visualizzano solo la casella, il testo si può inserire tramite 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>
Input type="color"
Questo tipo di input serve per poter inserire un colore. Si può utilizzare l’attributo value per scegliere il colore preimpostato.
<h1>Scegli un colore</h1>
<form>
<input type="color" name="colore" id="colore" value="#fff">
</form>
Input type="date"
Questo tipo di input può essere utilizzato per poter inserire una data formata da giorno, mese e anno. Si possono utilizzare gli attributi min e max per limitare l’intervallo di tempo. Bisogna utilizzare la forma 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>
Input type="datetime-local"
Questo tipo di input permette l’inserimento di una data, con giorno, mese e anno, e un orario, con ora e minuti. Si possono utilizzare gli attributi min e max per limitare l’intervallo di tempo. Bisogna utilizzare la forma 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>
Input type="email"
Questo tipo di input si utilizza per l’inserimento di un'email. Il testo viene controllato quando viene inviato il form cliccando sull’input type="submit" (solo se l’input contiene l’attributo required).
<h1>Inserisci la tua email</h1>
<form>
<input type="email" name="email" id="email">
</form>
Input type="file"
Questo tipo di input permette all’utente di inserire un file dal proprio dispositivo. Con l’attributo accept si possono scegliere quali estensioni sono accettate.
<h1>Scegli un file da inviarci</h1>
<form>
<input type="file" name="file" id="file" accept=".mp4,.png,.mp3,.txt">
</form>
Input type="hidden"
Questo tipo di input viene utilizzato per inserire un valore che l’utente non deve vedere. Ad esempio, l’ID dell’account che sta inviando il form. Il valore deve essere inserito con l’attributo value e verrà inviato al server una volta cliccato l’input di submit.
Nota: non inserire dati sensibili in type="hidden", perché gli utenti potrebbero visualizzarli tramite “Ispeziona” del browser.
<form>
<input type="hidden" name="id" id="id" value="id-79876764">
</form>
Input type="image"
Questo tipo di input può essere utilizzato per inserire un pulsante sottoforma di immagine che, se cliccato, invierà il contenuto del browser al server. Si può utilizzare l’attributo src per trovare l’immagine. Se non è disponibile, verrà visualizzato il testo contenuto in alt.
<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>
Input type="month"
Questo tipo di input permette di inserire una data composta dall’anno e dal mese. Si possono utilizzare gli attributi min e max per limitare l’intervallo di tempo. Bisogna utilizzare la forma aaaa-mm.
<h1>Scegli il mese</h1>
<form>
<input type="month" id="data" name="data" min="2020-01" max="2022-01">
</form>
Input type="number"
Questo tipo di input crea un input di testo che consente l’inserimento soltanto di caratteri numerici. Si possono utilizzare gli attributi min e max per limitare il valore del numero inserito. Nella maggior parte dei casi, i browser visualizzano delle frecce per aumentare o diminuire il numero inserito. Si può utilizzare l’attributo step per indicare di quanto deve crescere o diminuire 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>
Input type="password"
Questo tipo di input è utilizzato per inserire una password all’interno di un form. I caratteri inseriti saranno coperti. Se nel form è richiesta una password, bisogna inserire l’attributo method="post" nel tag <form>. Spesso i browser avvisano gli utenti che il sito non è sicuro se ne è sprovvisto.
<h1>Inserisci la tua password per accedere</h1>
<form method="post">
<input type="password" id="password" name="password">
</form>
Input type="radio"
Questo tipo di input permette all’utente di scegliere solo una tra le opzioni proposte. Questi input visualizzano solo la casella, il testo si può inserire 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>
Input type="range"
Questo tipo di input serve per specificare un numero compreso in un determinato range, indicati dagli attributi min e max. Si può utilizzare l’attributo step per specificare di quanto deve crescere o diminuire il numero.
<h1>Scegli un numero</h1>
<form method="post">
<input type="range" id="numero" name="numero" min="20" max="50" step="5">
</form>
Input type="reset"
Questo tipo di input è utilizzato per cancellare tutto il contenuto del form inserito dall’utente. Si può utilizzare l’attributo value per specificare il testo all’interno del pulsante. Non viene molto utilizzato (e non è consigliato utilizzarlo), perché l’utente potrebbe cliccarlo per errore.
<h1>Invia il form</h1>
<form>
<input type="text"> <!-- Contenuto da inviare -->
<input type="reset" value="Cancella contenuto">
</form>
Input type="submit"
Questo tipo di input permette all’utente di inviare il form. Si può utilizzare l’attributo value per specificare il testo all’interno del pulsante.
<h1>Invia il form</h1>
<form>
<input type="text"> <!-- Contenuto da inviare -->
<input type="submit" value="Invia il form">
</form>
Input type="tel"
Questo tipo di input serve per inserire un numero di telefono. Però, accetta qualsiasi tipo di carattere. Per limitare il testo soltanto all’inserimento di caratteri numerici, utilizza pattern="[0-9]+".
<h1>Scegli un numero di telefono</h1>
<form>
<input type="tel" name="telefono" id="telefono" pattern="[0-9]+">
</form>
Input type="text"
Questo tipo di input permette all’utente di inserire un testo qualsiasi.
<h1>Inserisci un titolo alla pagina</h1>
<form>
<input type="text" name="testo" id="testo">
</form>
Input type="time"
Questo tipo di input è utile per inserire facilmente un orario, composto da ora e minuti. Si possono utilizzare gli attributi min e max per limitare l’intervallo di tempo.
<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>
Input type="url"
Questo tipo di input serve per poter inserire un url. Dopo aver cliccato sull’input di submit, il contenuto verrà controllato (solo se l’input contiene l’attributo required). Deve essere inserito un testo che inizia con “http://” o “https://”.
<h1>Inserisci un sito web</h1>
<form method="post">
<input type="url" id="sito" name="sito">
</form>
Input type="week"
Questo tipo di input può essere utilizzato per poter inserire una data formata da anno e numero della settimana. Si possono utilizzare gli attributi min e max per limitare l’intervallo di tempo. Bisogna utilizzare la forma aaaa-W--.
<h1>Scegli una settimana</h1>
<form>
<input type="week" name="settimana" id="settimana" min="2022-W01" max="2022-W10">
</form>
Attributi degli input
Possiamo personalizzare ancora di più gli input tramite alcuni attributi: checked, maxlength, minlength, placeholder, readonly, required, size, value.
Attributo checked
L’attributo checked permette di indicare quali opzioni sono selezionate per impostazione predefinita. Si può utilizzare questo attributo con gli input di radio e checkbox.
<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>
Attributi maxlength e minlength
Gli attributi maxlength="valore" e minlength="valore" specificano quale deve essere lunghezza dell’input. Con maxlength si indica la lunghezza massima, con minlength quella minima. Ovviamente, se ne può usare soltanto uno dei due. Questo attributo può essere utilizzato con gli input di testo, quindi: email, password, search, tel, text, url.
<h1>Inserisci un titolo</h1>
<form>
<input type="text" name="testo" maxlength="100" minlength="10">
<input type="submit" value="Invia">
</form>
Attributo placeholder
L’attributo placeholder="valore" serve per visualizzare un testo visibile prima che l’utente inserisca l’input di testo. Questa scritta appare più chiara di un testo normale. Di norma è utilizzata per spiegare cosa inserire all’interno dell’input. Questo attributo può essere utilizzato con gli input email, number, password, search, tel, text, 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>
Attributo readonly
L’attributo readonly serve per bloccare la modifica di un input e permetterne soltanto la lettura. Questo attributo può essere utilizzato con la maggior parte degli input, quindi: date, datetime-local, email, month, number, password, search, tel, text, time, url, 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>
Attributo required
L’attributo required permette di controllare se l’input è stato inserito prima che il modulo venga inviato. Se l’input risulta vuoto, l’utente visualizzerà un popup di avviso. Questo attributo permette anche di bloccare l’invio del form se il testo inserito non rispetta i requisiti di, ad esempio, l’input email o url. Può essere utilizzato con tutti gli input, che non siano pulsanti, quindi: checkbox, date, datetime-local, email, file, month, number, password, radio, search, tel, text, time, url, week.
<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>
Attributo size
L’attributo size="valore" indica la lunghezza di un input. Il valore dell’attributo deve essere il numero di lettere che deve contenere l’input. Può essere utilizzato con gli input email, password, tel, text, 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>
Attributo value
L’attributo value="valore" permette di inserire il valore iniziale e predefinito. Si può utilizzare con tutti i tipi di input e può essere: un numero per gli input date, datetime-local, month, number, range, tel, time, week; un testo per gli input email, hidden, password, search, text, url; un testo all’interno di un pulsante per button, reset, submit; un altro valore per color, file.
<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 non insegna come i dati devono essere elaborati dopo l’invio di un modulo. Per farlo serve il linguaggio PHP, che puoi imparare su Biadets.
| Prossima lezione |