Per rendere interattivo un modulo, devi aggiungere elementi. Esistono controlli per inserire e selezionare dati, elementi che descrivono i controlli, elementi che raggruppano campi e pulsanti per inviare un modulo.
Cosa sono gli elementi del modulo?
Vedi 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 offrono molte altre funzionalità. L'utilizzo di un controllo appropriato dei moduli consente di 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.
Per farlo, devi aggiungere un elemento <input> al modulo.
Ma come fa l'utente a sapere che deve riempire 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.
Acquisizione dell'input 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 prima, l'attributo id collega <input> a <label>.
E per quanto riguarda gli attributi name e type in questo esempio?
L'attributo del nome
Utilizza l'attributo name per identificare i dati che l'utente inserisce con il controllo.
Se invii il modulo, questo nome viene incluso nella richiesta.
Supponiamo che tu abbia denominato un controllo modulo mountain e che l'utente abbia inserito Gutenberg,
la richiesta include queste informazioni come mountain=Gutenberg.
Prova a modificare
il nome del controllo del modulo in hill.
Se esegui questa operazione correttamente e invii il modulo, hill sarà visibile nell'URL.
Il tipo di input
Esistono diversi tipi di controlli dei moduli, tutti con utili funzionalità integrate che funzionano su diversi browser e piattaforme. In base all'attributo type, il browser esegue il rendering di diverse interfacce utente, mostra tastiere diverse sullo schermo, utilizza regole di convalida diverse e altro ancora. Vediamo come si cambia tipo.
Con type="checkbox" il browser ora visualizza una casella di controllo anziché un campo di testo.
La casella di controllo include anche attributi aggiuntivi.
Puoi impostare l'attributo checked per mostrarlo come selezionato.
Puoi scegliere tra vari altri tipi. Analizzeremo in dettaglio in un modulo successivo.
Consenti più righe di testo
Supponiamo che tu abbia bisogno di 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>
Scegli da un elenco di opzioni
In che modo fornisci agli utenti un elenco di opzioni tra cui scegliere?
Puoi usare un elemento <select> per raggiungere questo obiettivo.
<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, puoi collegarlo a un elemento <label> con l'attributo id
e assegnargli un nome univoco utilizzando l'attributo name.
Tra il tag di inizio e di fine dell'elemento <select>, puoi aggiungere più elementi <option>, ciascuno dei quali rappresenta una selezione.
Ogni opzione ha un attributo value univoco, che ti consente di distinguerle durante l'elaborazione dei dati del modulo.
Il testo all'interno dell'elemento opzione è 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 utilizzare?
Il browser utilizza la prima opzione dell'elenco, a meno che:
- Un elemento
<option>ha l'attributoselected. - L'utente sceglie un'altra opzione.
Preseleziona un'opzione
Con l'attributo selected puoi preselezionare un'opzione.
Questo valore diventa l'impostazione predefinita, indipendentemente dall'ordine in cui sono definiti gli elementi <option>.
Raggruppamento dei controlli del modulo
A volte è necessario raggruppare i controlli dei moduli. Per farlo, puoi usare 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 venga utilizzato?
Se la tua risposta è "descrivere il gruppo di controlli del modulo", hai ragione.
Ogni elemento <fieldset> richiede un elemento <legend>, proprio come a ogni controllo modulo richiede un elemento <label> associato.
Inoltre, <legend> deve essere il primo elemento in <fieldset>.
Dopo l'elemento <legend>, puoi definire i controlli del modulo che devono far parte del gruppo.
Invio di un modulo
Dopo aver imparato ad aggiungere e raggruppare i controlli del modulo, ti potresti chiedere in che modo un utente può inviare un modulo.
La prima è utilizzare un elemento <button>.
<button>Submit</button>
Dopo che un utente fa clic sul pulsante Invia, il browser invia una richiesta all'URL specificato nell'attributo azione dell'elemento <form> inserendo tutti i dati provenienti dai controlli del modulo.
Puoi anche utilizzare un elemento <input> con type="submit" anziché un elemento <button>.
L'input ha un aspetto e un comportamento simile a quello di un <button>. Anziché usare un elemento <label> per descrivere
<input>, usa l'attributo value.
<input type="submit" value="Submit">
Inoltre, un modulo può essere inviato utilizzando la chiave Enter quando un campo del modulo è attivo.
Verifica le tue conoscenze
Verifica la tua conoscenza degli elementi dei moduli
Come si collega un <label> a un controllo modulo?
for='color' il <label> e name='color' il <input>.for='color' il <label> e id='color' il <input>.id='color' il <label> e for='color' il <input>.name='color' il <label> e for='color il <input>.Che cosa si utilizza per un controllo modulo su più righe?
<input> con type='multi-line'.<text>.<textarea>.<input> con type='long'.Come si invia un modulo?
<button>.Enter.<input> con type='submit'.