HTML label: collegare for e id e ampliare l’area cliccabile

HTML <label> associa il nome di un controllo del modulo al suo testo visibile e alle tecnologie assistive. Collega l’attributo for dell'etichetta all’attributo id del controllo, oppure posiziona il controllo all'interno dell'etichetta. Cliccando sul testo associato è possibile focalizzare un input o attivare/disattivare una casella di controllo.

Collega i controlli esplicitamente con for e id

L'attributo for prende l’identificatore id del controllo di destinazione nello stesso documento, non il suo name. Un id deve essere unico all'interno del documento, mentre name identifica un campo nei dati inviati. Anche se il layout separa label e input, la loro relazione di denominazione può rimanere intatta quando for e id coincidono.

Salva il seguente documento come labels.html e aprilo in un browser. L'input di testo utilizza for; la checkbox utilizza un'etichetta di contenimento. Questo è un esercizio di interfaccia che non invia dati a un server.

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Confrontare le associazioni di label</title>
</head>
<body>
  <h1>Nomi dei controlli del modulo</h1>
  <p>
    <label for="reader-name">Nome visualizzato</label>
    <input id="reader-name" name="reader" type="text"
           aria-describedby="name-help" placeholder="es. Cielo">
  </p>
  <p id="name-help">Inserisci il soprannome da visualizzare sullo schermo.</p>
  <p>
    <label>
      <input type="checkbox" name="tips" value="yes">
      Ricevere aggiornamenti per imparare
    </label>
  </p>
</body>
</html>

1. Clicca su Nome visualizzato per mettere il cursore nell'input. Dopo aver digitato, il segnaposto scompare, ma l'etichetta rimane visibile.
2. Fai clic sul testo Ricevere aggiornamenti per imparare per selezionare la casella di controllo, quindi fai di nuovo clic per deselezionarla. Non è necessario mirare con precisione alla piccola casella.
3. Usa Tab per spostarti tra i controlli e Spazio per attivare/disattivare la casella di controllo, verificando anche l'interazione con la tastiera.

Le etichette che racchiudono i controlli e le descrizioni supplementari hanno ruoli diversi

Posizionare un input all'interno di label crea un'associazione implicita senza for. Includi solo il controllo associato all'interno di un'etichetta e non annidare un'altra etichetta al suo interno. È inoltre possibile utilizzare id e for con un'etichetta di contenimento, ma for deve riferirsi al controllo contenuto. Vale la pena considerare un'associazione esplicita for/id per la compatibilità con le tecnologie assistive e gli strumenti esterni.

L'etichetta è il nome che indica ai lettori cosa inserire. Inserisci istruzioni supplementari o messaggi di errore in un paragrafo separato e associali a aria-describedby. Nell'esempio, Inserisci il soprannome da visualizzare sullo schermo. integra il nome; il segnaposto non deve essere utilizzato come sostituto dell'etichetta.

Quando l'associazione o il clic non funziona

Controlla errori di battitura e differenze di maiuscole/minuscole in for, valori duplicati id e il tipo dell’elemento target. Puntare for a un elemento che non può essere etichettato, come un input hidden, non lo farà funzionare come un input normale. Le etichette funzionano anche con select e textarea; denomina gruppi di scelte correlate con fieldset e legend.

Mettere link o pulsanti separati all’interno di un’etichetta può rendere poco chiaro se cliccare dovrebbe navigare o selezionare un controllo. Posiziona link extra all’esterno e spiega prima il contesto. Stila l’etichetta con CSS anziché inserire un elemento heading solo per ingrandirla. Le regole e i controlli supportati sono descritti nel riferimento MDN per label.