development

HTML 레이블의 "For"속성 관련

big-blog 2020. 9. 3. 23:27
반응형

HTML 레이블의 "For"속성 관련


이 질문에 이미 답변이 있습니다.

다음 두 줄의 코드를 고려하십시오 (w3schools.com> "HTML <label> for Attribute"에서 복사).

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

위 레이블의 "for"속성의 정확한 목적을 찾는 데 문제가 있습니다. 보시다시피 현재 "male"로 설정되어 있습니다 (입력 컨트롤의 ID와 일치).

지금까지 내가 읽은 것은 위의 코드가 입력 컨트롤과 레이블을 '연결'하고 '바인딩'한다는 것입니다. 제 질문은 이것이 정확히 무엇을 의미합니까?

레이블을 입력 컨트롤에 연결 한 결과는 정확히 무엇입니까?
이 '연관'의 결과로 레이블 및 / 또는 입력에 새로운 동작이 있습니까?


label통해 제어와 관련된 그 for클릭 할 것이다. 클릭하면 컨트롤이 선택됩니다. 특히 라디오 / 체크 박스에 매우 유용합니다. 또한 시각 장애인을위한 스크린 리더의 접근성에 영향을 미칩니다.


(남성) 라벨 을 클릭하면 라벨을 사용하지 않는 경우 라디오에서 불가능한 것을 체크합니다. 라벨은 모바일과 같은 소형 장치를 개발할 때도 유용합니다.

따라서 다음과 같은 경우에 유용합니다.

  • 접근성 이유
  • 모바일 등과 같은 소형 장치
  • 특히 라디오 버튼과 확인란에 유용합니다.

레이블을 양식 요소에 연결 label하면 액세스 키 를 할당 할 수 있다고 생각 합니다. 그러면 그와 관련된 양식 요소에 초점을 맞출 수 있습니다.

다른 사람들이 언급했듯이 또한를 클릭 label하여 양식 요소에 초점을 맞출 수 있습니다.

for 속성 label을 사용하면 html의 의미 상 다른 영역에 및 요소 를 배치 하고 연관성을 유지할 수 있습니다. (두 테이블 또는 두 개의 다른 div처럼). 예제와 같이 두 가지를 모두 함께 넣는 경우 레이블에 양식 요소를 묶고 for속성을 무시하는 것도 정확 합니다.


예, 웹 페이지, 특히 라디오 버튼이나 체크 박스가있는 양식을 채울 때 양식 제어 또는 확인 메커니즘의 역할을한다고 생각합니다. 레이블을 클릭하면 올바른 정보를 입력해야하는 양식의 영역을 사용자가 직접 가리 킵니다. 예를 들어, "텍스트". 또는 사용자가 true 또는 false, 남성 또는 여성과 같은 일부 옵션 중에서 선택해야하는 경우.

참고 URL : https://stackoverflow.com/questions/3142884/regarding-the-html-labels-for-property

반응형