1. Selezione multipla e liste
I moduli HTML offrono molte opzioni per l'interazione degli utenti con la pagina web. Oltre ai campi di testo e ai pulsanti, i moduli supportano elementi di selezione multipla e liste, che permettono di creare interfacce più flessibili e utili per l'inserimento dei dati. Oggi li esploreremo.
In HTML, i moduli offrono diversi modi per creare elementi con selezione da una lista. Gli
elementi più comuni per questi scopi sono <select> e <option>,
così come i checkbox e i radio button.
Lista a discesa: <select> e
<option>
Il tag <select> crea una lista a discesa, mentre
<option> viene utilizzato per aggiungere opzioni all'interno della lista.
L'utente può scegliere una o più opzioni dalla lista.
Scelta singola: Di default,
<select> permette di selezionare solo una
opzione.
<label for="country">Scegli il paese:</label>
<select id="country" name="country">
<option value="ru">Russia</option>
<option value="us">USA</option>
<option value="de">Germania</option>
</select>
<label for="country">Scegli il paese:</label>
<select id="country" name="country">
<option value="ru">Russia</option>
<option value="us">USA</option>
<option value="de">Germania</option>
</select>
Selezione multipla: Se si aggiunge l'attributo
multiple, l'utente può selezionare più opzioni,
tenendo premuto il tasto Ctrl (su Windows) o Cmd (su Mac) mentre
clicca.
<label for="languages">Scegli le lingue:</label>
<select id="languages" name="languages" multiple>
<option value="ru">Russo</option>
<option value="en">Inglese</option>
<option value="de">Tedesco</option>
</select>
<label for="languages">Scegli le lingue:</label>
<select id="languages" name="languages" multiple>
<option value="ru">Russo</option>
<option value="en">Inglese</option>
<option value="de">Tedesco</option>
</select>
In questo caso, i dati provenienti da più elementi selezionati vengono inviati al server come un array di valori.
Checkbox: <input type="checkbox">
I checkbox sono elementi che permettono all'utente di scegliere una o più opzioni da una lista
proposta. Ogni checkbox è creato con il tag
<input type="checkbox">.
<label><input type="checkbox" name="interests" value="sports"> Sport</label>
<label><input type="checkbox" name="interests" value="music"> Musica</label>
<label><input type="checkbox" name="interests" value="travel"> Viaggi</label>
<label><input type="checkbox" name="interests" value="sports"> Sport</label>
<label><input type="checkbox" name="interests" value="music"> Musica</label>
<label><input type="checkbox" name="interests" value="travel"> Viaggi</label>
Se tutti i checkbox hanno lo stesso attributo name,
al momento dell'invio dei dati, quelli selezionati saranno inviati come array.
Radio button: <input type="radio">
I radio button permettono all'utente di scegliere una sola opzione in un gruppo. I radio button
con lo stesso valore dell'attributo name vengono raggruppati, e l'utente può
selezionare solo un'opzione tra quelle disponibili nel gruppo.
<p>Scegli il genere:</p>
<label><input type="radio" name="gender" value="male"> Maschile</label>
<label><input type="radio" name="gender" value="female"> Femminile</label>
<p>Scegli il genere:</p>
<label><input type="radio" name="gender" value="male"> Maschile</label>
<label><input type="radio" name="gender" value="female"> Femminile</label>
I radio button sono ideali per la selezione di una sola opzione tra più opzioni fisse, come "Sì" o "No", genere, gruppi d'età ecc.
2. Elementi modulo di diversi tipi
In HTML esistono molti tipi di <input>, che forniscono diverse funzionalità
per l'inserimento dei dati. Oltre a quelli che abbiamo già visto, ci sono altri tipi utili per
migliorare l'interazione con i moduli e raccogliere dati più precisi.
Telefono (type="tel")
Campo per l'inserimento di numeri di telefono. Questo tipo permette di inserire numeri di telefono e, a seconda del dispositivo, può attivare una tastiera numerica sugli smartphone.
<label for="phone">Telefono:</label>
<input type="tel" id="phone" name="phone" placeholder="+39 (123) 456-7890">
<label for="phone">Telefono:</label>
<input type="tel" id="phone" name="phone" placeholder="+39 (123) 456-7890">
GO TO FULL VERSION