Cosa fa l'attributo "for" nel tag <label> HTML?

382

Mi chiedo quale sia la differenza tra i seguenti due frammenti di codice:

<label>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

e

<label for='theinput'>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

Sono sicuro che fa qualcosa quando si utilizza una libreria JavaScript speciale, ma a parte questo, convalida l'HTML o richiesto per qualche altro motivo?

— jeff
fonte

578

Il <label>tag consente di fare clic sull'etichetta e verrà trattato come facendo clic sull'elemento di input associato. Esistono due modi per creare questa associazione:

Un modo è avvolgere l'elemento etichetta attorno all'elemento input:

<label>Input here:
    <input type='text' name='theinput' id='theinput'>
</label>

L'altro modo è usare l' forattributo, dandogli l'ID dell'input associato:

<label for="theinput">Input here:</label>
<input type='text' name='whatever' id='theinput'>

Ciò è particolarmente utile per l'uso con caselle di controllo e pulsanti, poiché significa che puoi selezionare la casella facendo clic sul testo associato invece di dover premere la casella stessa.

Ulteriori informazioni su questo elemento in MDN .

— Barmar
fonte

107

Si noti che l'attributo for è associato all'input dall'attributo id e che l'attributo name non deve corrispondere. <label for = "theinput"> Inserisci qui: </label> <input type = 'text' name = 'notmatching' id = 'theinput'> Funzionerà ancora

— Glo

4

Un clic sull'etichetta non viene sempre trattato esattamente come un clic sull'elemento associato. In Chrome e Safari, ad esempio, facendo clic su un'etichetta che è associata si selectfocalizza solo sulla selezione anziché espandere le opzioni.

— Emile Pels

2

@EmilePels Per quanto riguarda il modello di eventi del browser, sono equivalenti. Quello che stai descrivendo riguarda maggiormente l'interfaccia utente fornita dalla gestione dei menu a discesa del sistema operativo, che è legata al mouse stesso.

— Barmar,

3

Sembra importante ricordare che è molto rilevante per l'accessibilità e gli screen reader, perché utilizzarlo attivamente.

— coyotte508,

1

Ho avuto difficoltà nelle ultime due ore con il clic del corpo sollevato due volte ogni volta che faccio clic su un'etichetta in un modulo con l'attributo "for" in un campo di input. Finalmente capisco perché anche se uso stopPropagation sul clic dell'etichetta, perché il clic del corpo è stato ancora generato ... a causa del clic generato dal campo di input in seguito al comportamento che hai descritto.

— Samuel,

53

L' forattributo associa l'etichetta a un elemento di controllo, come definito nella descrizione labelnella specifica HTML 4.01. Ciò implica, tra le altre cose, che quando l' labelelemento riceve lo stato attivo (ad esempio facendo clic su), passa lo stato attivo al controllo associato. L'associazione tra un'etichetta e un controllo può essere utilizzata anche da agenti utente basati sulla sintesi vocale, che possono offrire all'utente un modo per chiedere quale sia l'etichetta associata, quando si tratta di un controllo. (L'associazione potrebbe non essere così ovvia come nel rendering visivo.)

Nel primo esempio nella domanda (senza for), l'uso del labelmarkup non ha implicazioni logiche o funzionali - è inutile, a meno che tu non faccia qualcosa con esso in CSS o JavaScript.

Le specifiche HTML non obbligano ad associare le etichette ai controlli, ma lo fanno le WCAG (2.0 Content Accessibility Guidelines) 2.0. Questo è descritto nel documento tecnico H44: L'uso di elementi di etichetta per associare etichette di testo a controlli di modulo , il che spiega anche che l'associazione implicita (nidificando ad esempio inputall'interno label) non è ampiamente supportata come l'associazione esplicita tramite fore idattributi,

— Jukka K. Korpela
fonte

10

+1 per parlare della relazione semantica e di cosa significhi al di là della relazione di clic funzionale.

— ulty4life,

Ciao, ho due elementi con lo stesso ID ma in div diversi, ho aggiunto l'evento focus usando l'etichetta per ma nel secondo elemento si sta concentrando sul primo elemento. <html> <body> <div id = "first_div"> <label for = "name"> Name </label> <input type = "text" id = "name"> </div> <div id = "second_div "> <label for =" name "> Name </label> <input type =" text "id =" name "> </div> </body> </html>

— LoveToCode

14

In poche parole, ciò che fa è fare riferimento idall'input, tutto qui:

<label for="the-id-of-the-input">Input here:</label>
<input type="text" name="the-name-of-input" id="the-id-of-the-input">

— Uwe Keim
fonte

6

L'aggiunta di un for è importante, anche se sono adiacenti. Mi sembra di ricordare di aver sentito che alcuni screen reader per i non vedenti hanno problemi altrimenti. Quindi, se vuoi essere amichevole con coloro che stanno forse usando browser / screen reader alternativi, usa questo metodo.

— bean5,

3

L'attributo for del <label>tag deve essere uguale all'attributo id dell'elemento correlato per collegarli insieme.

— Rahul Tripathi
fonte

7

Sì, ma cosa intendi con "legali insieme"? Sono già vicini nella struttura HTML. Questo è quello che non capisco.

— Jeff

1

FOR Specifica a quale elemento della forma è associata un'etichetta

— Rahul Tripathi,

2

@CengizFrostclaw jsfiddle.net/DmSGh --- prova a fare clic su entrambi i testi "Inserisci qui" e guarda cosa succede.

— JJJ

1

@CengizFrostclaw: - Un'etichetta può essere associata a un elemento utilizzando l'attributo "for"

— Rahul Tripathi

1

Ci sono alcune belle funzioni, ad esempio quando si usano i pulsanti di opzione. Facendo clic sull'etichetta si attiva o disattiva il pulsante di opzione. Questa è una bella funzionalità quando si tenta di utilizzare i pulsanti di opzione con un'interfaccia utente personalizzata.

— Alex

0

L'attributo for indica che questa etichetta indica il campo di input correlato, la casella di controllo o il pulsante di opzione o qualsiasi altro campo di immissione dei dati ad esso associato. per esempio

    <li>
<label>{translate:blindcopy}</label>
            <a class="" href="#" title="{translate:savetemplate}" onclick="" ><i class="fa fa-list" class="button" ></i></a> &nbsp 
            <input type="text" id="BlindCopy" name="BlindCopy" class="splitblindcopy" />
    </li>

— pace
fonte

0

Indica qualsiasi input sia il parametro per l' forattributo.

<input id='myInput' type='radio'>
<label for='myInput'>My 1st Radio Label</label>
<br>
<input id='input2' type='radio'>
<label for='input2'>My 2nd Radio Label</label>
<br>
<input id='input3' type='radio'>
<label for='input3'>My 3rd Radio Label</label>

Espandi frammento

— pythag0ras_
fonte