Co to jest atrybut For w tagu HTML?

Question

<label id="label1" for="txtTextBox"> 

Jaki jest wpływ etykiety 1, jeśli umieściłem tam atrybut for?

Answer 1

Umożliwia utworzenie etykiety dołączonej do konkretnego elementu w DOM. Gdy etykieta otrzyma zdarzenie "mouse down", skupia element, do którego jest dołączona.

<label for="username">Username:</label> 
<input type="text" id="username" name="username" /> 

Po kliknięciu przez użytkownika tekstu "Nazwa użytkownika:" pole ostrości zostanie zaznaczone.

Jest to również dobre dla ułatwień dostępu, ponieważ czytniki ekranu odczytują wewnętrzny kod HTML etykiety przed odczytaniem pola wejściowego, niezależnie od fizycznej kolejności, w jakiej występują w DOM.

Answer 2

Dotyczy on elementu id (a nie name!) Elementu formularza (input, select, textarea, option, etc.), który jest etykietowany. Sugeruje to, że użycie for pozwala kliknąć etykietę i skupić się na pokrewnym elemencie formularza.

Answer 3

Według W3C

atrybutu może być określony w celu wskazania sterowania kształtowego z których podpis ma być związany. Jeśli atrybut jest określony, wartość atrybutu musi być identyfikatorem elementu nadającego się do etykietowania w tym samym dokumencie, co element etykiety.

Jeśli atrybut jest określony i istnieje element w dokumencie, którego identyfikator jest równy wartości atrybutu for, a pierwszy taki element jest elementem nadającym się do etykietowania, to ten element jest etykietowanym elementem etykiety.

https://dev.w3.org/html5/spec-preview/the-label-element.html#attr-label-for

Jedną z jego zalet jest kliknięcie na etykiecie będzie przywiązywać elementu input focus,

W przypadku pola wyboru lub przycisk opcji, kliknięcie na etykiecie sprawdzi, CheckBox/radio, ale to nie robi pokrywa przestrzeń pomiędzy treścią etykiety i wyboru/radio

<input type="radio" name="gender" id="male" value="male"> 
<label for="male">Male</label> 

<input type="radio" name="gender" id="female" value="female"> 
<label for="female">Female</label> 

yo u można osiągnąć przez samo robi tak:

<label><input type="radio" name="gender" id="male" value="male"> Male </label> 
    <label><input type="radio" name="gender" id="female" value="female"> Female</label> 

ale praktyka ta jest dyskusyjna, wolę sekund dla Checkbox/Radio ponieważ obejmuje również przestrzeń pomiędzy etykietą i checkbox/radio.

Answer 4

Wydaje faktycznie HTML5 specs deffines 2 sposoby < label> użycia znacznika i wszystkich głównych przeglądarek obsługuje zarówno rozszerzenie klikalny obszar do etykiety i skupiając się kontrolki.

a) sterowania jest zagnieżdżona wewnątrz etykiety

b) Etykieta jest połączony z sterowania dla & ID przypisuje

<!-- Method a: nested --> 
 
<p> 
 
    <label> 
 
     Username1: 
 
     <input type="text" id="name_user" name="nameuser" /> 
 
    </label> 
 
</p> 
 

 
<!-- Method b: linked --> 
 
<p> 
 
    <label for="user_name">Username2: </label> 
 
    <input type="text" id="user_name" name="username" /> 
 
</p>

Jedyną różnicą, którą znalazłem między obiema metodami jest to, że Łączenie etykiety z kontrolą (Metoda b) umożliwia oddzielenie etykiety i kontrolki w układzie, na przykład w dwóch różnych komórkach tabeli.