HTML의 태그에 대한 for 속성에 대한 자세한 분석

이 글은 HTML의 태그에 대한 자세한 분석을 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

freecodecamp HTML 튜토리얼의 라디오 버튼 세트 만들기 섹션에서 다음 단락을 보았습니다. Create a Set of Radio Buttons这一节中，看到这样一段话，

It is considered best practice to set a for attribute on the label element, with a value that matches the value of the id attribute of the input element. This allows assistive technologies to create a linked relationship between the label and the child input element.

大概的意思是：最好的做法，是给label标签，添加for属性，其值与input标签的id

레이블 요소에 for 속성을 값과 함께 설정하는 것이 모범 사례로 간주됩니다. 이는 입력 요소의 id 속성 값과 일치합니다. 이를 통해 보조 기술은 레이블과 하위 입력 요소 사이에 연결된 관계를 생성할 수 있습니다.

아마도 다음을 의미합니다. 레이블을 제공하는 것이 가장 좋습니다. 태그에 for 속성을 ​​추가하세요. 해당 값은 input 태그의 id 속성 값과 동일하므로 label과 입력 그들 사이에 연결을 만듭니다.

동시에 다음과 같은 샘플 코드가 제공됩니다.

<!-- Code 1 -->
<label> 
  <input>Indoor 
</label>

코드에서 label의 for 속성 값은 input의 id 속성 값과 동일합니다. 이 코드에서는 연결 위치가 명확하지 않습니다.

레이블의 for 속성 정의는 다음과 같습니다.

for 속성은 레이블이 바인딩되는 양식 요소를 지정합니다.

번역: for 속성은 레이블이 바인딩되는 폼의 요소를 지정합니다. 샘플 코드:

<!-- Code 2 -->

     Male   
     Female   
     Other   
  

1. 두 코드를 비교해 보면

2. 레이블과 입력 레이블의 포함 관계가 다르다는 것을 어렵지 않게 찾을 수 있습니다. 코드 1의 레이블과 입력은 포괄적 관계에 속하는 반면, 코드 2의 레이블과 입력은 상대적으로 독립적입니다.

3. 레이블과 입력은 페이지에서 다르게 배열됩니다. 코드 1의 실행 결과에서는 라벨 라벨이 입력 라벨을 덮고 있고, 코드 2의 실행 결과에서는 라벨 라벨이 입력 라벨과 병치되어 있는 것을 크롬의 개발자 도구를 통해 찾는 것은 어렵지 않습니다.

레이블은 일대일 입력에 해당합니다. 라벨 내용을 클릭하면 해당 단일 버튼이 선택됩니다.

두 코드에서 label의 for 속성을 삭제하면 이전 포인트 1과 2는 변경되지 않고 그대로 유지되고 변경 사항은 포인트 3이 됩니다. 코드 1의 작업 결과에 대해서는 레이블 내용을 클릭하여 라디오 버튼을 선택할 수 있습니다. 코드 2는 레이블 내용을 클릭하면 라디오 버튼을 선택할 수 없습니다.

코드 실행 결과를 간단하게 비교한 후, 기사 시작 부분에 인용된 단락이 올바른지 확인할 수 있습니다. 레이블에 for 속성을 추가하면 코드 품질이 향상될 수 있습니다.

추천 관련 기사:

html에서 태그 중첩 문제를 해결하는 방법

상위 요소 태그의 기본 동작과 클릭 이벤트 간의 상호 작용

🎜🎜🎜

위 내용은 HTML의 태그에 대한 for 속성에 대한 자세한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!