도입 된 내용은 html5에서 <라벨> 태그의 특성의 사용 방법에 대한 자세한 분석입니다. 이 웹 사이트에는이 기사에서 <label> 태그의 for 속성 사용 방법에 대한 자세한 분석이 포함되어 있으며 기사의 속성 기술 및 지식에 대한 관련 HTML5 레이블 태그를 설명합니다. 이와 관련하여 도움을주고 도움을 주시면 오신 것을 환영합니다! 다음은 세부 사항입니다.
도입 된 내용은 html5에서 <라벨> 태그의 특성의 사용 방법에 대한 자세한 분석입니다.
Freecodecamp에서 HTML 튜토리얼의 Create a Set of Radio Buttons 에서이 구절을 보았습니다.
입력 요소의 ID 속성 값과 일치하는 값으로 레이블 요소의 속성에 대한 A를 설정하는 것이 모범 사례로 간주됩니다. 이를 통해 보조 기술은 레이블과 하위 입력 요소 사이에 연결된 관계를 만들 수 있습니다.
대략 의미는 다음과 같습니다. 가장 좋은 방법은 label 태그에 대한 for 을 추가하는 것입니다. 그 값은 input 태그의 id 속성 값과 동일합니다.
동시에 다음과 같이 샘플 코드가 제공됩니다.
<!-코드 1-> <라벨에 대한 = 실내> <입력 ID = 실내 유형 = 무선 이름 = 실내 아웃 도어> 실내 </label>
코드에서 레이블의 특성 값은 입력의 ID 속성 값과 동일합니다. 이 코드에서는 협회가 어디에 있는지 알 수 없습니다.
레이블의 특성의 정의는 다음과 같습니다.
for 속성은 레이블이 바인딩되는 형태 요소를 지정합니다.
번역 : for 속성은 양식의 어떤 요소가 바인딩되는지 지정합니다.
샘플 코드 :
<!-코드 2-> <form action =/action_page.php> <입력 유형 = radio name = gender id = male value = male> <label for = male> male> male> <br> <입력 유형 = 무선 이름 = gender id = 여성> <레이블에 대한 = 여자> <br> <input type = radio name = ganpor <elouth> <ooth> </label> 유형 = 제출 값 = 제출> </form>
두 코드를 비교하면 알아내는 것은 어렵지 않습니다.
레이블과 입력 태그 사이의 포함 관계는 다릅니다. 코드 1의 레이블과 입력은 포함 관계에 속하며 코드 2의 레이블과 입력은 비교적 독립적입니다.
라벨과 입력은 페이지에 다르게 배열됩니다. Chrome의 개발자 도구를 통해 코드 1, 레이블 태그의 실행 결과가 입력 태그, 코드 2의 실행 결과, 레이블 태그 및 입력 태그가 평행 한 것을 찾는 것은 어렵지 않습니다.
레이블 및 입력은 하나씩 해당합니다. 레이블의 내용을 클릭하면 해당 단일 끝 버튼이 선택됩니다.
두 코드에서 레이블의 특성을 삭제하면 이전 점 1과 포인트 2는 변경되지 않은 상태로 유지되며 변경 사항은 지점 3입니다. 코드 1의 작동 결과는 레이블의 내용을 클릭하면 여전히 라디오 버튼을 선택할 수 있습니다. 코드 2는 다릅니다. 레이블의 내용을 클릭하면 라디오 버튼을 선택할 수 없습니다.
코드 실행 결과를 간단하게 비교 한 후, 기사의 시작 부분에서 인용 된 구절이 올바른지 확인할 수 있습니다. 레이블에 속성을 추가하는이 관행은 코드의 품질을 향상시킬 수 있습니다.
html5에서 <라벨> 태그의 for 속성 사용 방법에 대한 자세한 분석이 여기에 있습니다. 이 페이지의 URL을 북마크 할 수 있습니다. http://www.vevb.com/web/a/2018090496006.shtml 다음에 액세스 할 수 있습니다.