Aiuta gli utenti a inserire i dati nei moduli

Per rendere interattivo un modulo, devi aggiungere elementi del modulo. Ci sono controlli per inserire e selezionare dati, elementi che descrivono controlli, elementi che raggruppano 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, usano regole di convalida, e offre molte altre funzionalità. L'utilizzo del controllo modulo appropriato ti aiuta a creare moduli migliori.

Etichette per gli elementi del modulo

Supponiamo di voler aggiungere un input in cui l'utente può inserire il proprio colore preferito. Per farlo, 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 del modulo, utilizza un valore <label> per ciascun controllo.

<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 dell'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>. 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 assegnato un nome a 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 modulo in hill. Se invii il modulo correttamente e invii il modulo, hill sarà visibile nell'URL.

Il tipo di input

Esistono diversi tipi di controlli modulo, con utili funzionalità integrate che funzionano su diversi browser e piattaforme. In base a: type il browser mostra interfacce utente diverse, mostra tastiere sullo schermo diverse, usa regole di convalida diverse e altro ancora. Vediamo come si cambia il tipo.

Utilizzando type="checkbox", il browser mostra ora una casella di controllo invece di un campo di testo. La casella di controllo include anche attributi aggiuntivi. Puoi impostare l'attributo checked in modo che venga visualizzato come selezionato.

Puoi scegliere tra vari altri tipi. Parleremo più nel dettaglio in un modulo successivo.

Consenti più righe di testo

Ad esempio, hai bisogno di un campo in cui un utente può scrivere un commento. In questo caso, 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 offri agli utenti un elenco di opzioni tra cui scegliere? A questo scopo, 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 con tutti gli altri controlli del modulo, lo colleghi a <label> con l'attributo id e assegnale un nome univoco utilizzando l'attributo name.

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

Ogni opzione ha un attributo value univoco, che 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 dovrebbe essere utilizzata?

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

  • Un elemento <option> ha l'attributo selected.
  • L'utente sceglie un'altra opzione.

Preseleziona un'opzione

Con l'attributo selected puoi preselezionare un'opzione. Questa diventa l'impostazione predefinita, indipendentemente dall'ordine in cui sono definiti gli elementi <option>.

Raggruppamento dei controlli dei moduli

A volte devi raggruppare i controlli del modulo. Per farlo, 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 che cosa pensi che sia usato?

Se la tua risposta è "per descrivere il gruppo di controlli del modulo", hai ragione.

Ogni elemento <fieldset> richiede un elemento <legend>, così come ogni controllo modulo richiede 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.

Invio di un modulo

Dopo aver imparato ad aggiungere e raggruppare controlli modulo, potresti chiederti in che modo un utente può inviare un modulo.

La prima opzione prevede l'utilizzo di un elemento <button>.

<button>Submit</button>

Dopo che l'utente fa clic sul pulsante Invia, Il browser invia una richiesta all'URL specificato nel campo<form> attributo azione 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é usare un elemento <label> per descrivere <input>, usa invece l'attributo value.

<input type="submit" value="Submit">

Inoltre, è possibile inviare un modulo utilizzando la chiave Enter quando è attivo un campo del modulo.

Verifica le tue conoscenze

Verifica le tue conoscenze degli elementi del modulo

Come si collega 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 si usa per un controllo modulo su più righe?

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

Come si invia un modulo?

Facendo clic su un elemento <button>.
Esatto, questa è un'opzione.
Utilizzo del tasto Enter.
Esatto, questa è un'opzione.
Clic su un elemento <input> con type='submit'.
Esatto, questa è un'opzione.
Tutte le risposte precedenti.
Esatto, tutte le risposte sono possibili opzioni per inviare un modulo.

Risorse