Collegare etichette e campi: id, for e accessibilità in HTML

Introduzione

Quando si lavora con gli elementi di base di HTML, non è sufficiente inserire tag uno dopo l’altro. È importante anche stabilire relazioni corrette tra gli elementi. Un esempio concreto riguarda i moduli, nei quali un’etichetta deve essere associata chiaramente al campo che descrive.

Gli attributi id e for permettono di creare questo collegamento. L’attributo id identifica in modo univoco un elemento della pagina, mentre l’attributo for dell’elemento <label> contiene lo stesso valore dell’id del campo associato.

Questa tecnica migliora l’accessibilità, perché i lettori di schermo possono comunicare correttamente il significato del campo. Inoltre, permette all’utente di fare clic sull’etichetta per attivare il campo, rendendo l’interazione più comoda anche su dispositivi mobili.

Codice completo

<form action="/iscrizione" method="post">
  <fieldset>
    <legend>Dati personali</legend>

    <div>
      <label for="nome">Nome completo</label>
      <input
        type="text"
        id="nome"
        name="nome"
        autocomplete="name"
        required
      >
    </div>

    <div>
      <label for="email">Indirizzo email</label>
      <input
        type="email"
        id="email"
        name="email"
        autocomplete="email"
        required
      >
    </div>

    <div>
      <label for="piano">Piano preferito</label>
      <select id="piano" name="piano">
        <option value="">Seleziona un´opzione</option>
        <option value="base">Base</option>
        <option value="pro">Professionale</option>
      </select>
    </div>

    <div>
      <input type="checkbox" id="privacy" name="privacy" required>
      <label for="privacy">
        Accetto l´informativa sulla privacy
      </label>
    </div>

    <button type="submit">Invia iscrizione</button>
  </fieldset>
</form>

Spiegazione

La relazione tra `label` e campo

Nel primo esempio, il valore nome compare in due punti diversi:

nell’attributo id="nome" dell’elemento input;
nell’attributo for="nome" dell’elemento label.

Questa corrispondenza crea un legame esplicito. Se l’utente seleziona il testo “Nome completo”, il cursore viene portato automaticamente nel campo corrispondente. Lo stesso principio funziona con input, select e textarea.

Perché `id` deve essere univoco

Un id identifica un solo elemento all’interno del documento. Non bisogna assegnare lo stesso valore a due campi diversi, perché il browser e le tecnologie assistive potrebbero non capire quale elemento associare all’etichetta.

È invece normale che un determinato elemento abbia più attributi. Ad esempio, l’input dell’indirizzo email possiede type, id, name, autocomplete e required. Ogni attributo svolge un compito specifico:

type indica il tipo di controllo e abilita comportamenti adeguati;
id crea l’identificatore utilizzato dal label;
name definisce il nome inviato al server;
autocomplete aiuta il browser a compilare il campo;
required impedisce l’invio se il valore è mancante.

Raggruppare i controlli

Gli elementi fieldset e legend descrivono un gruppo di controlli collegati. In questo caso, tutti i campi appartengono alla sezione “Dati personali”. Non si tratta solo di una scelta estetica: la struttura fornisce informazioni utili agli utenti che navigano con tecnologie assistive.

La gerarchia è quindi leggibile: il form contiene un fieldset, il quale contiene legend e diversi gruppi div. Ogni gruppo contiene un’etichetta e il relativo controllo.

Best practice

Usa un valore id descrittivo, breve e unico, ad esempio data-nascita o numero-telefono.
Fai corrispondere sempre esattamente for e id, rispettando maiuscole e minuscole.
Non usare il testo segnaposto come sostituto del label: il placeholder scompare quando l’utente inizia a digitare.
Usa name anche quando il campo possiede già un id: i due attributi hanno scopi diversi.
Per i gruppi di radio button e checkbox collegati, valuta l’uso di fieldset e legend.
Non duplicare gli id, nemmeno quando elementi simili compaiono in sezioni diverse.
Testa il modulo usando solo la tastiera: il tasto Tab dovrebbe seguire un ordine logico.
Usa tipi appropriati come email, tel e date per offrire controlli e tastiere adeguati.

Riepilogo

Gli attributi non servono soltanto a personalizzare l’aspetto o il comportamento degli elementi HTML. Possono anche descrivere relazioni importanti tra gli elementi. La coppia label-input, basata sulla corrispondenza tra for e id, è una tecnica semplice ma fondamentale per creare moduli comprensibili e accessibili.

Una struttura ben organizzata combina gerarchia, attributi coerenti e tag adatti al loro scopo. Applicando queste regole, il codice diventa più facile da mantenere e l’interfaccia risulta più chiara per tutti gli utenti.

Approfondisci con risorse ufficiali

Add as preferred source on Google