<label>: l'elemento "Etichetta di input"

L' elemento HTML <label> rappresenta una didascalia per un elemento in un'interfaccia utente.

Associare un <label> con un elemento <input> offre alcuni importanti vantaggi:

• Il testo dell'etichetta non è solo visivamente associato al corrispondente input di testo; è anche programmaticamente associato ad esso. Ciò significa che, ad esempio, uno screen reader leggerà l'etichetta quando l'utente è concentrato sull'input del modulo, rendendo più facile per un utente di tecnologia assistiva capire quali dati devono essere inseriti.
• Quando un utente fa clic o tocca/tocca un'etichetta, il browser passa lo stato attivo all'input associato (l'evento risultante viene generato anche per l'input). Quell'area colpita aumentata per focalizzare l'input offre un vantaggio a chiunque tenti di attivarlo, compresi quelli che utilizzano un dispositivo touch-screen.

Per associare il <label> con un elemento <input>, devi dare all'elemento <input> un attributo id. Dopodiché <label> ha bisogno di un attributo for il cui valore sia lo stesso dell'id dell'elemento <input>.

In alternativa, puoi annidare <input> direttamente all'interno di <label>, nel qual caso gli attributi for e id non sono necessari perché l'associazione è implicita:

<label>Ti piace la pizza?
                <input type="checkbox" name="pizza">

Gli elementi che possono essere associati a un elemento <label> includono <button>, <input>(tranne type="hidden" ) , <meter>, <output>, <progress>, <select> e <textarea>.

Attributi

for

Il valore dell'attributo for deve essere un singolo id per un elemento correlato al modulo etichettabile nello stesso documento dell'elemento <label>. Pertanto, qualsiasi elemento <label> può essere associato a un solo controllo modulo.

Il primo elemento nel documento con un attributo id che corrisponde al valore dell'attributo for è il controllo etichettato per questo elemento label, se l'elemento con quell'id è effettivamente un elemento etichettabile . Se non è un elemento etichettabile, l'attributo for non ha effetto. Se sono presenti altri elementi che corrispondono anche al valore id, più avanti nel documento, non vengono considerati.

A più elementi <label> può essere assegnato lo stesso valore per il loro attributo for; in questo modo il controllo del modulo associato (il controllo del modulo a cui forfa riferimento il valore) avrà più etichette.