L'elemento <label> viene utilizzato per associare un'etichetta a un campo di input in un modulo. Questa associazione aiuta gli utenti a comprendere le informazioni richieste nel campo del modulo. Quando un utente fa clic sull'etichetta, si concentra automaticamente sul campo di input corrispondente.

Ci sono due modi per collegare gli elementi label e input:

Wrapping

Innestando un elemento del modulo, come un campo <input/>, all'interno di un elemento <label>, il browser stabilisce automaticamente un collegamento tra l'etichetta e il campo di input. Ad esempio:

In questo esempio, cliccando sul testo dell'etichetta "Name" si focalizzerà automaticamente sul campo di input corrispondente.

Utilizzo dell'attributo id

Quando un elemento del modulo non è nidificato all'interno di un elemento <label>, li colleghi manualmente utilizzando l'attributo id dell'elemento input e l'attributo for dell'etichetta label. Il valore dell'attributo for e dell'attributo id deve essere lo stesso. Ad esempio:

In questo caso, l'etichetta è associata al campo di input utilizzando l'attributo for sull'etichetta e l'attributo id sul campo di input. Cliccando sul testo dell'etichetta "Name" si focalizzerà anche sul campo di input corrispondente.

Nota

Utilizzando questi metodi, stabilisci una connessione visiva e semantica tra l'etichetta label e il campo di input input. Tuttavia, potrebbero esserci situazioni in cui avvolgere l'elemento input all'interno dell'etichetta label è impossibile a causa di vincoli di stile o logica del sito web. In tali casi, si fa comunemente affidamento sulle connessioni degli attributi per mantenere la flessibilità nell'applicazione degli stili e nell'implementazione della logica di background.

Esaminiamo la differenza tra i due approcci esaminando il codice nell'immagine.

Nota

Dal punto di vista del browser, l'approccio scelto per stabilire la connessione è irrilevante. Entrambi i metodi ottengono lo stesso risultato di collegare l'etichetta e il campo di input insieme per una migliore usabilità e accessibilità.