<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

Gli attributi di questo elemento includono gli attributi globali.

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.

Liste utili

• Attributi
• Attributi globali
• Elementi