Tag HTML <label>
Il tag HTML <label>: associazione esplicita (for/id) e implicita, accessibilità e usabilità, confronto con ARIA e placeholder. Con W3docs.
Il tag HTML <label> definisce una didascalia per un controllo di modulo come un <input>, <select> o <textarea>. L'etichetta e il controllo sono collegati, così il browser sa che il testo appartiene a quel campo specifico.
Questa pagina tratta i due modi per associare un'etichetta a un controllo, perché le etichette sono importanti per l'accessibilità e l'usabilità, e come <label> si confronta con gli attributi di etichettatura ARIA e il placeholder.
Perché le etichette sono importanti
Un'etichetta non è solo testo visibile accanto a un campo — è programmaticamente collegata a un controllo. Questa associazione offre tre vantaggi concreti:
- Accessibilità. Quando il controllo riceve il focus, uno screen reader annuncia la sua etichetta, così l'utente sa cosa digitare. Senza etichetta, il campo viene annunciato solo per tipo (ad esempio "campo di testo") senza alcun contesto.
- Un'area cliccabile più grande. Fare clic o toccare l'etichetta porta il focus (e per le caselle di controllo/pulsanti radio, attiva/disattiva) al controllo. Questo è particolarmente utile per le piccole caselle di controllo e i pulsanti radio, dove la casella stessa è difficile da toccare con precisione su touchscreen.
- Maggiore usabilità. Gli utenti capiscono immediatamente quale didascalia appartiene a quale campo, riducendo gli errori nei moduli.
I due modi per associare un'etichetta
Esistono due modi per collegare un <label> al suo controllo: l'associazione esplicita tramite l'attributo for, e l'associazione implicita racchiudendo il controllo.
Associazione esplicita (for + id)
Assegna un id al controllo, quindi imposta l'attributo for dell'etichetta sullo stesso valore. Il valore di for deve corrispondere esattamente all'id del controllo, e l'id deve esistere nel documento.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="lfname">First name:</label>
<input id="lfname" name="fname" type="text" />
</form>
</body>
</html>L'etichettatura esplicita è l'approccio più flessibile: l'etichetta e il controllo possono trovarsi in qualsiasi punto del markup, il che è utile quando il layout (ad esempio una griglia CSS o una tabella) separa la didascalia dal campo.
Associazione implicita (racchiudendo il controllo)
Posiziona il controllo all'interno dell'elemento <label>. Non è necessaria la coppia id/for — l'annidamento crea l'associazione automaticamente.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label>Name
<input name="Name" type="text" />
</label>
</form>
</body>
</html>Entrambi i metodi producono lo stesso risultato. L'annidamento è conciso e garantisce l'associazione anche se si dimentica un id; il for esplicito è la scelta quando la struttura del markup separa l'etichetta dal controllo.
Regole e avvertenze
- Un solo controllo per etichetta. Un singolo
<label>è associato esattamente a un controllo di modulo. Se si racchiudono due input in un'unica etichetta, solo il primo viene associato. - Un controllo può avere più etichette. Lo stesso input può essere referenziato da più di un
<label for="...">, e tutti porteranno il focus o attiveranno il controllo quando vengono cliccati. fordeve puntare a unidreale. Se il valore difornon corrisponde a unidesistente, l'associazione fallisce silenziosamente — l'etichetta diventa testo semplice.- Solo i controlli di modulo possono avere etichette.
<label>può fare da didascalia a<input>(eccettotype="hidden"),<button>,<meter>,<output>,<progress>,<select>e<textarea>. Non etichetta un<div>,<span>o un'intestazione. - Evita contenuto interattivo all'interno di un'etichetta. Non inserire un altro controllo (un secondo input, un pulsante o un link) all'interno di un
<label>, poiché compete con il controllo etichettato per i clic.
Caselle di controllo e pulsanti radio
Le etichette sono più importanti in questo contesto, perché la casella cliccabile è piccola. Con un'etichetta appropriata, l'intera didascalia diventa parte dell'area cliccabile.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="barca">Barcelona</label>
<input type="radio" name="team" id="barca" value="Barcelona" />
<br />
<label for="real">Real Madrid</label>
<input type="radio" name="team" id="real" value="Real Madrid" />
<br />
</form>
</body>
</html>Etichettare senza un <label> visibile: ARIA e placeholder
A volte un'etichetta visibile non si adatta al design. Un <label> visibile dovrebbe comunque essere la scelta predefinita — avvantaggia tutti gli utenti, non solo quelli che usano screen reader — ma esistono le seguenti opzioni per i casi eccezionali.
aria-label
Usa aria-label per fornire un nome accessibile direttamente sul controllo quando non c'è testo visibile a cui fare riferimento (ad esempio un campo di ricerca con solo un'icona a lente di ingrandimento).
<input type="search" aria-label="Search the site" />aria-labelledby
Usa aria-labelledby quando il testo di denominazione esiste già altrove nella pagina. Fa riferimento a uno o più id di elementi e, a differenza di for, consente di costruire un'etichetta da più parti di testo.
<span id="billing">Billing</span>
<span id="name">Name</span>
<input type="text" aria-labelledby="billing name" />Quando sono presenti sia un <label> che aria-labelledby, vince aria-labelledby.
Il placeholder non è un'etichetta
Un placeholder è un testo di esempio, non un'etichetta. Scompare non appena l'utente digita, offre scarso contrasto di colore nella maggior parte dei browser e non viene annunciato in modo affidabile come nome del campo dalla tecnologia assistiva. Abbina sempre un input a un vero <label> — non fare mai affidamento solo sul placeholder.
<!-- Not accessible: no label, only a placeholder -->
<input type="email" placeholder="Email" />
<!-- Accessible: real label, placeholder is an optional hint -->
<label for="email">Email</label>
<input id="email" type="email" placeholder="[email protected]" />Esempio del tag HTML <label> con le proprietà font CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 20px;
}
label {
font-size: 20px;
font-weight: 700;
color: #1c87c9;
}
input {
width: 50%;
height: 28px;
padding: 4px 10px;
border: 1px solid #666;
background: #cce6ff;
color: #1c87c9;
font-size: 16px;
}
</style>
</head>
<body>
<form>
<label for="user">Your Name:</label>
<input id="user" name="Name" type="text" />
</form>
</body>
</html>Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
accesskey | accesskey | Definisce una scorciatoia da tastiera per portare il focus all'elemento di modulo associato (non naviga né vi salta). |
for | element\_id | Imposta l'ID dell'elemento a cui l'etichetta deve essere collegata. |
form | form\_id | Specifica il/i modulo/i a cui l'etichetta sarà associata. Questo attributo consente di posizionare i tag in una posizione arbitraria nel documento, e non solo come discendente dell'elemento <form>. |
L'elemento <label> supporta anche gli Attributi Globali e gli Attributi Evento.
Esempio dell'attributo form:
L'attributo form consente all'etichetta di trovarsi all'esterno del <form> a cui appartiene. Il controllo utilizza comunque la normale associazione for/id.
<form id="myForm">
<input id="username" type="text" name="username" />
</form>
<label for="username" form="myForm">Username:</label>Argomenti correlati
- Tag HTML
<input>— il controllo più spesso etichettato. - Tag HTML
<form>— il contenitore che raggruppa etichette e controlli. - Attributo HTML
id— come viene costruito il collegamentofor/id.