Corso di HTML / Collegare correttamente label e input
Un input riceve il valore da un utente; un label mostra all'utente a cosa serve il campo. Un'associazione esplicita affidabile dà al campo un id e assegna all'etichetta un corrispondente valore for.
Collegare un'etichetta a un campo di input
<form method="get">
<label for="visitor-name">Nome</label>
<input id="visitor-name" name="name" type="text">
<button type="submit">Controllare</button>
</form>Inserite questo codice nel body di un file HTML e apritelo in un browser. Un clic su “Nome” dovrebbe mettere a fuoco il campo. Posizionare semplicemente del testo accanto a un campo non lo collega automaticamente. Un id deve essere unico nel documento; ID duplicati possono fare in modo che un'etichetta punti al campo sbagliato.
Premete anche Tab per accedere al campo e verificare che l'elemento a fuoco sia visibile. L'etichetta è il nome del controllo, non solo testo decorativo. Le tecnologie assistive devono poter riconoscere quale campo è a fuoco.
id e name svolgono la stessa funzione?
L'attributo id identifica un elemento nel documento e può collegarlo a un'etichetta, un frammento o uno script. name è la chiave utilizzata quando il modulo invia il valore. Qui visitor-name è l'obiettivo dell'etichetta, mentre name è la chiave di invio. Controllate i nomi inviati e i metodi di richiesta con l'esercizio sulle liste di dati in Struttura del modulo e GET vs. POST.
Se un clic sull'etichetta non produce alcun effetto, confrontate for con id. Se l'inserimento funziona, ma l'URL della richiesta GET non contiene il valore, verificate name. Potete modificare id="visitor-name" in id="person-name", a condizione di aggiornare for dell'etichetta; name="name" può rimanere invariato se il server continua ad aspettarsi questa chiave.
Riparare un'etichetta separata
<!-- Sbagliato: for corrisponde al nome invece che all'id -->
<label for="full_name">Nome</label>
<input id="person-name" name="full_name">
<!-- Corretto: for corrisponde all'identificativo del campo -->
<label for="person-name">Nome</label>
<input id="person-name" name="full_name">Provate i frammenti in file separati. Nella versione corretta, un clic sul nome dovrebbe spostare il focus su person-name, mentre la chiave trasmessa rimane full_name. Non combinate entrambi gli esempi in un unico documento: ciò duplicherebbe l'ID e renderebbe il confronto non valido.
Un testo segnaposto non sostituisce un'etichetta
Un placeholder fornisce un suggerimento o un breve esempio e scompare quando l'utente digita. Non può sostituire un nome di campo permanente. Mantenete un'etichetta visibile e aggiungete l'esempio separatamente. Per istruzioni permanenti associate a un campo, consultate Aggiungere un testo segnaposto ai campi del modulo.
<label for="email">Indirizzo e-mail</label>
<input id="email" name="email" type="email"
placeholder="name@example.com">Anche se un design copre visivamente un'etichetta, il campo deve comunque avere un nome accessibile. Caselle di controllo e pulsanti di opzione possono essere anche annidati all'interno di un'etichetta, come in <label><input type="checkbox" name="agree"> Accetto</label>. Fate clic sul testo dell'etichetta per verificare che la casella di controllo cambi. Scegliete formulazioni chiare prima di adattare l'aspetto. Consultate la documentazione MDN alle etichette per i metodi di associazione.
