Per rendere interattivo un modulo, devi aggiungere elementi del modulo. Sono presenti controlli per inserire e selezionare dati, elementi che descrivono i controlli, elementi che raggruppano i campi e pulsanti per inviare un modulo.
Cosa sono gli elementi del modulo?
Vedrai due elementi <input>, <input type="text"> e <input type="file">. Perché hanno un aspetto diverso?
In base al nome dell'elemento e all'attributo type, i browser mostrano interfacce utente diverse, utilizzano regole di convalida diverse e forniscono molte altre funzionalità. L'utilizzo del controllo modulo appropriato ti aiuta a creare moduli migliori.
Etichette per gli elementi del modulo
Supponiamo che tu voglia aggiungere un input in cui l'utente possa inserire il suo colore preferito.
A questo scopo, devi aggiungere un elemento <input>
al modulo. Ma come fa l'utente a sapere che deve inserire il suo
colore preferito?
Per descrivere i controlli modulo, utilizza un <label> per ogni controllo modulo.
<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">
L'attributo for nell'elemento etichetta corrisponde all'attributo id nell'input.
Acquisire l'input dell'utente
Come suggerisce il nome, l'elemento <input> viene utilizzato per raccogliere l'input degli utenti.
<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">
Come accennato in precedenza, l'attributo id collega <input> a <label>.
Che dire dell'attributo nome e tipo in questo esempio?
L'attributo nome
Utilizza l'attributo name per identificare i dati inseriti dall'utente con il controllo.
Se invii il modulo, questo nome viene incluso nella richiesta.
Supponiamo che tu abbia chiamato un controllo del modulo mountain e che l'utente abbia inserito Gutenberg,
la richiesta includerà queste informazioni come mountain=Gutenberg.
Prova a modificare
il nome del controllo modulo in hill.
Se esegui questa operazione correttamente e invii il modulo, hill è visibile nell'URL.
Il tipo di input
Esistono diversi
tipi di controlli dei moduli,
tutti con utili funzionalità integrate che funzionano su browser e
piattaforme diversi. In base all'attributo type, il browser esegue il rendering di interfacce utente diverse, mostra tastiere sullo schermo diverse, utilizza regole di convalida diverse e altro ancora. Scopri come modificare il tipo.
Utilizzando type="checkbox", il browser ora esegue il rendering di una casella di controllo anziché di un campo di testo.
La casella di controllo è dotata anche di attributi aggiuntivi.
Puoi impostare l'attributo checked in modo che venga visualizzato come selezionato.
Puoi scegliere tra vari altri tipi. Esamineremo questo aspetto in dettaglio in un modulo successivo.
Consenti più righe di testo
Supponiamo che ti serva un campo in cui un utente possa scrivere un commento.
Per questo, non sarebbe fantastico se potessero inserire più righe di testo?
Questo è lo scopo dell'elemento <textarea>.
<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>
Scegliere da un elenco di opzioni
Come si fornisce agli utenti un elenco di opzioni tra cui scegliere?
Per farlo, puoi utilizzare un elemento <select>.
<label for="color">Color</label>
<select id="color" name="color">
<option value="orange">Orange</option>
<option value="pink">Pink</option>
</select>
Innanzitutto, aggiungi un elemento <select>.
Come per tutti gli altri controlli del modulo, lo colleghi a un <label> con l'attributo id
e gli assegni un nome univoco utilizzando l'attributo name.
Tra il tag di inizio e di fine dell'elemento <select>,
puoi aggiungere più elementi <option>, ognuno dei quali rappresenta una selezione.
Ogni opzione ha un attributo value univoco, quindi puoi distinguerle durante l'elaborazione dei dati del modulo.
Il testo all'interno dell'elemento option è il valore leggibile.
Se invii il modulo utilizzando questo <select> senza modificare la selezione,
la richiesta includerà color=orange. Ma come fa il browser a sapere quale opzione deve essere utilizzata?
Il browser utilizza la prima opzione dell'elenco, a meno che:
- Un elemento
<option>ha l'attributoselected. - L'utente sceglie un'altra opzione.
Preselezionare un'opzione
Con l'attributo selected puoi preselezionare un'opzione. Questo diventa il valore predefinito, indipendentemente dall'ordine in cui vengono definiti gli elementi <option>.
Controlli modulo di gruppo
A volte è necessario raggruppare i controlli del modulo. A questo scopo, puoi utilizzare l'elemento <fieldset>.
<fieldset>
<legend>What is your favorite web technology</legend>
<label for="html">HTML</label>
<input type="radio" name="webfeature" value="html" id="html">
<label for="css">CSS</label>
<input type="radio" name="webfeature" value="css" id="css">
</fieldset>
Hai notato l'elemento <legend> all'interno dell'elemento <fieldset>? Per cosa pensi che venga utilizzato?
Se la tua risposta è "per descrivere il gruppo di controlli del modulo", hai ragione.
Ogni elemento <fieldset> richiede un elemento <legend>,
proprio come ogni controllo del modulo necessita di un elemento <label> associato.
<legend> deve essere anche il primo elemento di <fieldset>.
Dopo l'elemento <legend>, puoi definire i controlli del modulo che devono far parte del gruppo.
Inviare un modulo
Dopo aver imparato ad aggiungere i controlli del modulo e a raggrupparli, potresti chiederti come un utente può inviare un modulo.
La prima opzione è utilizzare un elemento <button>.
<button>Submit</button>
Dopo che un utente ha fatto clic sul pulsante Invia,
il browser invia una richiesta all'URL specificato nell'<form>
dell'attributo action
con tutti i dati dei controlli del modulo.
Puoi anche utilizzare un elemento <input> con type="submit" anziché un elemento <button>. L'input ha l'aspetto e il comportamento di un <button>.
Anziché utilizzare un elemento <label> per descrivere <input>, utilizza
l'attributo value.
<input type="submit" value="Submit">
Inoltre, un modulo può essere inviato anche utilizzando il tasto Enter quando un campo del modulo è attivo.
Verifica la comprensione
Metti alla prova le tue conoscenze sugli elementi del modulo
Come si collega un <label> a un controllo modulo?
for='color' il giorno <label> e name='color' il giorno <input>.for='color' il giorno <label> e id='color' il giorno <input>.id='color' il giorno <label> e for='color' il giorno <input>.name='color' il giorno <label> e for='color il giorno <input>.Cosa utilizzi per un controllo modulo multilinea?
<input> con type='multi-line'.<text>.<textarea>.<input> con type='long'.Come si invia un modulo?
<button>.Enter.<input> con type='submit'.