Co to jest atrybut HTML for = „” w <label>?

Widziałem to w jQuery - co to robi?

<label for="name"> text </label>
<input type="text" name="name" value=""/>

Aby skojarzyć <label>z <input>elementem, trzeba dać <input>się idatrybut. <label>Następnie potrzebuje foratrybutu, którego valuejest taka sama jak wprowadzić na id:

<label for="username">Click me</label>
<input type="text" id="username">

forAtrybut asocjację <label>z <input>elementem; co ma kilka głównych zalet:
1. Tekst etykiety jest nie tylko wizualnie powiązany z odpowiednim tekstem wprowadzanym; jest też z nim programowo powiązany. Oznacza to, że na przykład czytnik ekranu odczyta etykietę, gdy użytkownik skupi się na wprowadzaniu formularza, co ułatwi użytkownikowi technologii wspomagającej zrozumienie, jakie dane należy wprowadzić.
2. Możesz kliknąć skojarzoną etykietę, aby zaznaczyć / aktywować wejście, a także samo wejście. Ten zwiększony obszar uderzenia zapewnia przewagę każdemu, kto próbuje aktywować wejście, w tym osobom korzystającym z urządzenia z ekranem dotykowym.

Alternatywnie możesz zagnieździć <input>bezpośrednio wewnątrz elementu <label>, w którym to przypadku atrybuty fori idnie są potrzebne, ponieważ skojarzenie jest niejawne:

<label>Click me <input type="text"></label>

Uwagi:
Jedna inputmoże być powiązana z wieloma etykietami.
Gdy <label>zostanie kliknięty lub dotknięty i jest skojarzony z kontrolką formularza, wynikowe zdarzenie kliknięcia jest również zgłaszane dla skojarzonej kontrolki.

Kwestie dostępności

Nie umieszczaj elementów interaktywnych, takich jak kotwice lub przyciski, wewnątrz etykiety. Takie postępowanie utrudnia ludziom aktywowanie danych wejściowych związanych z etykietą.

Nagłówki

Umieszczanie elementów nagłówka w <label>tagu koliduje z wieloma rodzajami technologii wspomagających, ponieważ nagłówki są powszechnie używane jako pomoc w nawigacji. Jeśli tekst etykiety wymaga wizualnego dostosowania, użyj <label>zamiast tego klas CSS zastosowanych do elementu.
Jeśli formularz lub sekcja formularza wymaga tytułu, użyj <legend>elementu umieszczonego w <fieldset>.

guziki

<input>Pierwiastek z type="button"deklaracji i atrybutu value ważnego nie potrzebuje etykiety z nim związane. Może to faktycznie wpłynąć na sposób, w jaki technologia wspomagająca analizuje dane wprowadzane przez przycisk. To samo dotyczy <button>elementu.

Odniesienie: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

forAtrybut jest używany w etykietach. Odnosi się do identyfikatora elementu, z którym jest powiązana ta etykieta.

Na przykład:

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

Teraz, gdy użytkownik kliknie myszą na usernametekście, przeglądarka automatycznie ustawi fokus w odpowiednim inputpolu. Działa to również z innymi elementami wejściowymi, takimi jak <textbox>i <select>.

Cytat ze specyfikacji :

Ten atrybut jawnie wiąże definiowaną etykietę z inną kontrolką. Jeśli występuje, wartość tego atrybutu musi być taka sama, jak wartość atrybutu id innego elementu sterującego w tym samym dokumencie. Gdy jej nie ma, definiowana etykieta jest powiązana z zawartością elementu.

Jeśli chodzi o to, dlaczego twoje pytanie jest oznaczone tagiem jQuery i gdzie widzisz, że jest używane w jQuery, nie mogę odpowiedzieć, ponieważ nie podałeś zbyt wielu informacji.

Być może został użyty w selektorze jQuery do znalezienia odpowiedniego elementu wejściowego dla danej instancji etykiety:

var label = $('label');
label.each(function() {
    // get the corresponding input element of the label:
    var input = $('#' + $(this).attr('for'));
});

Czuję potrzebę odpowiedzi na to pytanie. Miałem to samo zamieszanie.

<p>Click on one of the text labels to toggle the related control:</p>

<form action="/action_page.php">
  <label for="female">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>

Zmieniłem atrybut for na etykiecie „mężczyzna” na kobietę. Teraz, jeśli klikniesz „mężczyzna”, „żeńskie” radio zostanie sprawdzone.

Proste.

szybki przykład:

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

for=""tag puszczeniu skupić wejście po kliknięciu etykiety, jak również.

Używasz go z etykietami, aby powiedzieć, że dwa obiekty należą do siebie.

<input type="checkbox" name="remember" id="rememberbox"/>
<label for="rememberbox">Remember your details?</label>

Oznacza to również, że kliknięcie tej etykiety zmieni wartość pola wyboru.

FYI - jeśli jesteś w środowisku maszynopisu z np

<label for={this.props.inputId}>{this.props.label}</label>

musisz użyć htmlFor

<label htmlFor={this.props.inputId}>{this.props.label}</label>

jest używany do <label>elementu

jest używany z polem wyboru typu wejścia lub ponownym wybieraniem po kliknięciu etykiety

działające demo

forAtrybutem <label>znacznik powinien być równy atrybutu id powiązanego elementu wiąże je razem.

jest używany w <label>tekście dla html

na przykład.

<label for="male">Male</label>

<input type="radio" name="sex" id="male" value="male"><br>

Wiąże etykietę z elementem wejściowym. Tagi HTML mają na celu nadanie specjalnego znaczenia użytkownikom różnych kategorii. Oto, do czego służy etykieta:

1. Dla osób niepełnosprawnych ruchowo (także dla zwykłych użytkowników myszy) : Prawidłowo używane znaczniki etykiet można kliknąć, aby uzyskać dostęp do powiązanej kontrolki formularza. Na przykład. Zamiast szczególnie klikać pole wyboru, użytkownik może kliknąć łatwiejszą do kliknięcia etykietę i przełączyć pole wyboru.
2. Dla użytkowników z upośledzeniem wzroku: Użytkownicy z upośledzeniem wzroku używają czytników ekranu, które odczytują skojarzony znacznik etykiety za każdym razem, gdy fokus jest na kontrolce formularza. Pomaga użytkownikom poznać etykietę, która w innym przypadku byłaby dla nich niewidoczna.

Więcej o etykietowaniu -> https://www.w3.org/TR/WCAG20-TECHS/H44.html

To atrybut <label>tagu: http://www.w3schools.com/tags/tag_label.asp