<label>의 HTML for =“”속성은 무엇입니까?

Question 1

나는 이것을 jQuery에서 봤다-그것은 무엇을 하는가?

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

Question 2

을 요소 <label>와 연결하려면 an 속성 <input>을 제공해야 합니다. 그런 다음 입력과 동일한 속성이 필요합니다 .<input>id<label>forvalueid

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

for속성은 연관 <label>과 <input>요소; 다음과 같은 몇 가지 주요 이점을 제공합니다.
1. 레이블 텍스트는 해당 텍스트 입력과 시각적으로 만 연관되지 않습니다. 프로그래밍 방식으로도 연결됩니다. 예를 들어 화면 판독기는 사용자가 양식 입력에 집중할 때 레이블을 읽어 보조 기술 사용자가 어떤 데이터를 입력해야하는지 쉽게 이해할 수 있도록합니다.
2. 관련 레이블 을 클릭하여 입력 및 입력 자체에 초점을 맞추거나 활성화 할 수 있습니다 . 이 증가 된 히트 영역 은 터치 스크린 장치를 사용하는 사람을 포함하여 입력을 활성화하려는 모든 사람에게 이점을 제공합니다.

또는를<input> 직접 내부에 중첩 할 수 있습니다. <label>이 경우 연관이 암시 적이므로 for및 id속성이 필요하지 않습니다.

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

참고 :
하나 input는 여러 레이블과 연관 될 수 있습니다.
를 <label>클릭하거나 탭하고 양식 컨트롤과 연결되면 연결된 컨트롤에 대해 결과 클릭 이벤트도 발생합니다.

접근성 문제

레이블 안에 앵커 나 버튼과 같은 상호 작용 요소를 배치하지 마십시오. 이렇게하면 사람들이 레이블과 관련된 양식 입력을 활성화하기가 어렵습니다.

제목

표제 요소를 내부에 배치하면 <label>표제가 일반적으로 탐색 보조 도구로 사용되기 때문에 많은 종류의 보조 기술을 방해합니다. 레이블의 텍스트를 시각적으로 조정해야하는 경우 <label>대신 요소에 적용된 CSS 클래스를 사용하십시오.
양식 또는 양식의 섹션에 제목이 필요한 <legend>경우 <fieldset>.

버튼

선언 및 유효한 값 속성이 있는 <input>요소에는 type="button"연관된 레이블이 필요하지 않습니다. 그렇게하면 실제로 보조 기술이 버튼 입력을 구문 분석하는 방식을 방해 할 수 있습니다. <button>요소 에도 동일하게 적용됩니다 .

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

Question 3

for속성은 라벨에 사용됩니다. 이 레이블이 연결된 요소의 ID를 나타냅니다.

예를 들면 :

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

이제 사용자가 username텍스트를 마우스로 클릭 하면 브라우저가 자동으로 해당 input필드에 포커스를 둡니다 . 이것은 또한 같은 다른 입력 요소로 작동 <textbox>하고 <select>.

사양 에서 인용 :

이 속성은 정의중인 레이블을 다른 컨트롤과 명시 적으로 연결합니다. 존재하는 경우이 속성의 값은 동일한 문서에있는 다른 제어의 id 속성 값과 동일해야합니다. 없으면 정의되는 레이블이 요소의 내용과 연결됩니다.

귀하의 질문에 jQuery 태그가 지정된 이유와 jQuery에서 사용되는 위치에 관해서는 많은 정보를 제공하지 않았기 때문에 대답 할 수 없습니다.

레이블 인스턴스가 주어진 해당 입력 요소를 찾기 위해 jQuery 선택기에서 사용되었을 수 있습니다.

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

Question 4

대답 할 필요가 있다고 느낍니다. 나는 똑같은 혼란을 겪었다.

<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>

스 니펫 확장

'남성'라벨의 for 속성을 여성으로 변경했습니다. 이제 '남성'을 클릭하면 '여성'라디오가 확인됩니다.

그렇게 간단합니다.

Question 5

빠른 예 :

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

for=""당신은뿐만 아니라 라벨을 클릭하면 태그는 입력 초점을 맞출 수 있도록 해드립니다.

Question 6

레이블과 함께 사용하여 두 개체가 함께 속한다고 말합니다.

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

이것은 또한 해당 레이블을 클릭하면 확인란의 값이 변경됨을 의미합니다.

Question 7

<label>요소에 사용됩니다.

라벨 클릭시 선택하기 위해 입력 유형 체크 박스 또는 redio와 함께 사용됩니다.

작업 데모

Question 8

태그 의 for속성은 <label>관련 요소의 id 속성과 같아야 함께 바인딩됩니다.

Question 9

참고로-예를 들어 타이프 스크립트 환경에 있다면

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

htmlFor를 사용해야합니다.

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

Question 10

그것은 <label>html의 텍스트 에서 사용됩니다.

예.

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

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

Question 11

레이블을 입력 요소와 연결합니다. HTML 태그는 다양한 카테고리의 사용자에게 특별한 의미를 전달하기위한 것입니다. 라벨의 의미는 다음과 같습니다.

운동 장애가있는 사람 (일반 마우스 사용자에게도 해당) : 올바르게 사용 된 라벨 태그를 클릭하여 관련 양식 컨트롤에 액세스 할 수 있습니다. 예 : 특히 확인란을 클릭하는 대신 사용자는 더 쉽게 클릭 할 수있는 레이블을 클릭하고 확인란을 전환 할 수 있습니다.
시각 장애가있는 사용자 용 : 시각적으로 도전 사용자는 폼 컨트롤에 초점이 맞춰 때마다 관련 라벨 태그를 읽고 화면 판독기를 사용합니다. 사용자가 다른 방법으로는 볼 수 없었던 레이블을 알 수 있습니다.

라벨링에 대한 추가 정보-> https://www.w3.org/TR/WCAG20-TECHS/H44.html

Question 12

<label>태그 의 속성입니다 . http://www.w3schools.com/tags/tag_label.asp