Aiuta gli utenti a inserire i dati nei moduli

Per rendere un modulo interattivo, devi aggiungere elementi del modulo. Sono disponibili controlli per inserire e selezionare i dati, elementi che descrivono i controlli, elementi che raggruppano i campi e pulsanti per inviare un modulo.

Che 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 tale 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 label corrisponde all'attributo id nell'input.

Acquisizione dell'input utente

Come suggerisce il nome, l'elemento <input> viene utilizzato per raccogliere input dagli 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 name e type in questo esempio?

L'attributo name

Utilizza l'attributo name per identificare i dati inseriti dall'utente con il controllo. Se invii il modulo, questo nome verrà incluso nella richiesta. Supponiamo che tu abbia denominato un controllo del modulo mountain e che l'utente abbia inserito Gutenberg. la richiesta include queste informazioni come mountain=Gutenberg.

Prova a cambiare 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 funzionalità integrate utili 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. Vediamo come modificare il tipo.

Con l'utilizzo di type="checkbox", il browser ora mostra una casella di controllo anziché 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.

Consente più righe di testo

Supponiamo che tu abbia bisogno di un campo in cui un utente possa scrivere un commento. A questo scopo, 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 fornisci 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 dei moduli, devi collegarlo a un <label> con l'attributo id e assegnare un nome univoco utilizzando l'attributo name.

Tra il tag di inizio e quello di fine dell'elemento <select>, puoi aggiungere più elementi <option>, ciascuno dei quali rappresenta una selezione.

Ogni opzione ha un attributo value univoco, in modo da poterle distinguere 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 utilizzare?

Il browser utilizza la prima opzione nell'elenco, a meno che:

  • Un elemento <option> ha l'attributo selected.
  • 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 sono definiti gli elementi <option>.

Raggruppare i controlli dei moduli

A volte è necessario raggruppare i controlli dei moduli. A tale 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>? Secondo te a cosa serve?

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 richiede un elemento <label> associato. Inoltre, <legend> deve essere il primo elemento di <fieldset>. Dopo l'elemento <legend>, puoi definire i controlli del modulo che devono far parte del gruppo.

Invio di un modulo

Dopo aver appreso come aggiungere i controlli dei moduli e raggrupparli, potresti chiederti come un utente può inviare un modulo.

La prima opzione è 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 action dell'elemento <form> 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 ha il focus.

Verificare di aver compreso

Metti alla prova le tue conoscenze sugli elementi dei moduli

Come faccio a collegare un <label> a un controllo modulo?

for='color' il giorno <label> e name='color' il giorno <input>.
Riprova.
for='color' il giorno <label> e id='color' il giorno <input>.
Esatto!
id='color' il giorno <label> e for='color' il giorno <input>.
Riprova.
name='color' il giorno <label> e for='color il giorno <input>.
Riprova.

Che cosa utilizzi per un controllo del modulo multiriga?

Elemento <input> con type='multi-line'.
Riprova.
L'elemento <text>.
Riprova.
L'elemento <textarea>.
🎉
Elemento <input> con type='long'.
Riprova.

Come puoi inviare un modulo?

Fai clic su un elemento <button>.
Esatto, questa è un'opzione.
Utilizzando la chiave Enter.
Esatto, questa è un'opzione.
Fai clic su un elemento <input> con type='submit'.
Esatto, questa è un'opzione.

Risorse