Co robi atrybut „for” w znaczniku HTML <label>?

382

Zastanawiam się, jaka jest różnica między następującymi dwoma fragmentami kodu:

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

i

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

Jestem pewien, że robi coś, gdy używasz specjalnej biblioteki JavaScript, ale poza tym, czy weryfikuje HTML lub jest wymagany z innego powodu?

html forms input label Jeff
źródło

Odpowiedzi:

577

<label>Tag pozwala kliknij na etykiecie, a będzie ona traktowana jak kliknięcie na powiązanego elementu wejściowego. Istnieją dwa sposoby utworzenia tego powiązania:

Jednym ze sposobów jest owinięcie elementu etykiety wokół elementu wejściowego:

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

Innym sposobem jest użycie foratrybutu, podając identyfikator powiązanego wejścia:

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

Jest to szczególnie przydatne w przypadku pól wyboru i przycisków, ponieważ oznacza to, że możesz zaznaczyć to pole, klikając powiązany tekst, zamiast naciskać samo pole.

Przeczytaj więcej o tym elemencie w MDN .

Barmar
źródło
106
Zauważ, że atrybut for jest powiązany z danymi wejściowymi przez atrybut id, a atrybut name nie musi być zgodny. <label for = "theinput"> Wpisz tutaj: </label> <input type = 'text' name = 'notmatching' id = 'theinput'> Będzie nadal działać
Glo
4
Kliknięcie etykiety nie zawsze jest traktowane dokładnie tak, jak kliknięcie powiązanego elementu. Na przykład w Chrome i Safari kliknięcie etykiety powiązanej z selectopcją tylko skupia się na zaznaczeniu, zamiast rozszerzać opcje.
Emile Pels,
2
@EmilePels Jeśli chodzi o model zdarzeń przeglądarki, są one równoważne. To, co opisujesz, dotyczy bardziej interfejsu użytkownika zapewnianego przez obsługę menu rozwijanych przez system operacyjny, która jest powiązana z samą myszą.
Barmar
3
Wydaje się ważne, aby wspomnieć, że jest to bardzo istotne z punktu widzenia dostępności i czytników ekranu, dlaczego aktywnie z niego korzystać.
coyotte508
1
Przez ostatnie dwie godziny walczyłem z dwukrotnym podniesieniem kliknięcia ciała za każdym razem, gdy klikam etykietę w formie z atrybutem „for” w polu wejściowym. W końcu rozumiem, dlaczego nawet jeśli używam stopPropagation po kliknięciu etykiety, dlaczego kliknięcie ciała było nadal podnoszone ... z powodu kliknięcia podniesionego przez pole wejściowe zgodnie z opisanym zachowaniem.
Samuel
52

forAtrybut łączy etykietę za pomocą elementu sterującego, zgodnie z opisem labelw HTML 4.01 spec. Oznacza to, między innymi, że kiedy labelelement otrzymuje fokus (np. Przez kliknięcie), przenosi fokus na swoją powiązaną kontrolę. Powiązanie między etykietą a kontrolką może być również używane przez oparte na mowie programy użytkownika, co może dać użytkownikowi możliwość pytania, czym jest powiązana etykieta, podczas obsługi kontrolki. (Powiązanie może nie być tak oczywiste jak w renderowaniu wizualnym).

W pierwszym przykładzie pytania (bez for) użycie labelznaczników nie ma logicznej ani funkcjonalnej implikacji - jest bezużyteczne, chyba że zrobisz coś w CSS lub JavaScript.

Specyfikacje HTML nie nakładają obowiązku kojarzenia etykiet z kontrolkami, ale robią to Wytyczne dotyczące dostępności treści WWW (WCAG) 2.0. Jest to opisane w dokumencie technicznym H44: Używanie elementów etykiet do kojarzenia etykiet tekstowych z kontrolkami formularzy , co wyjaśnia również, że niejawne powiązanie (poprzez zagnieżdżanie np. inputWewnątrz label) nie jest tak szeroko obsługiwane, jak jawne powiązanie poprzez fori idatrybuty,

Jukka K. Korpela
źródło
10
+1 za rozmowę o relacji semantycznej i jej znaczeniu poza relacją kliknięcia funkcjonalnego.
ulty4life
Cześć, Mam dwa elementy o tym samym identyfikatorze, ale w różnych div, dodałem zdarzenie focus za pomocą etykiety dla, ale w drugim elemencie skupia się na pierwszym elemencie. <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

Krótko mówiąc, odnosi się do iddanych wejściowych, to wszystko:

<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
źródło
6
Dodanie for jest ważne, nawet jeśli sąsiadują. Wydaje mi się, że pamiętam, że niektóre czytniki ekranu dla osób niedowidzących mają inne problemy. Więc jeśli chcesz być przyjazny dla tych, którzy używają alternatywnych przeglądarek / czytników ekranu, skorzystaj z tej metody.
bean5
3

Atrybut <label>tagu powinien być równy atrybutowi id powiązanego elementu, aby połączyć je ze sobą.

Rahul Tripathi
źródło
7
Tak, ale co rozumiesz przez „związanie ich ze sobą”? Są już sąsiadami w strukturze HTML. Tego nie rozumiem.
jeff
1
FOR Określa, do którego elementu formularza jest przypisana etykieta
Rahul Tripathi
2
@CengizFrostclaw jsfiddle.net/DmSGh --- spróbuj kliknąć oba teksty „Wprowadź tutaj” i zobacz, co się stanie.
JJJ,
1
@CengizFrostclaw: - Etykietę można powiązać z elementem za pomocą atrybutu „for”
Rahul Tripathi
1
Istnieje kilka ciekawych funkcji, na przykład podczas korzystania z przycisków opcji. Kliknięcie etykiety spowoduje przełączenie przycisku opcji. Jest to miła funkcja, gdy próbujesz użyć przycisków opcji z niestandardowym interfejsem użytkownika.
Alex
0

Atrybut for pokazuje, że ta etykieta oznacza powiązane pole wejściowe lub pole wyboru, przycisk radiowy lub inne powiązane z nim pole wprowadzania danych. na przykład

    <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>
Patena
źródło
0

Etykietuje wszelkie dane wejściowe parametru dla foratrybutu.

<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>
Rozwiń fragment kodu

pythag0ras_
źródło