Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML

<label> 요소의 for 속성은 라벨을 특정 폼 요소와 연결할 때 사용합니다. 이 속성에 연결하려는 입력 요소의 id 값을 지정하면, 해당 입력 필드에 라벨이 적용되어 접근성과 사용자 편의성이 크게 향상됩니다.

문법(Syntax)

for 속성의 기본 문법은 다음과 같습니다.

<label for="id">

여기서 id는 라벨과 연결하고자 하는 요소의 id 값입니다.

예제(Example)

이제 <label> 요소의 for 속성을 실제로 구현한 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h2>Last Semester Results</h2>
<form>
<fieldset>
<legend>Result</legend>
<label for="stinfo">Student:</label>
<input type="text" id ="stinfo" value="Jack"><br>
<label for="sub">Subject:</label>
<input type="text" value="Maths"><br>
<label for="rank">Rank:</label>
<input type="number" value="8"><br>
</fieldset>
</form>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML label 태그의 for 속성 완벽 정리 – 폼 요소와 라벨 연결하기

코드 설명

위 예제에서는 여러 개의 입력 필드를 포함하는 폼을 구성했습니다.

<form>
<fieldset>
<legend>Result</legend>
<label for="stinfo">Student:</label>
<input type="text" id ="stinfo" value="Jack"><br>
<label for="sub">Subject:</label>
<input type="text" value="Maths"><br>
<label for="rank">Rank:</label>
<input type="number" value="8"><br>
</fieldset>
</form>

<label> 요소의 for 속성을 사용해 각 필드에 라벨을 지정했습니다. 예를 들면 다음과 같습니다.

<label for="stinfo">Student:</label>
<input type="text" id ="stinfo" value="Jack"><br>

여기서 for 속성의 값이 stinfo로 설정되었기 때문에, id가 stinfo인 텍스트 입력 필드에는 "Student"라는 라벨이 연결됩니다.

<label for="stinfo">Student:</label>

for 속성 사용 시 장점

  • 접근성 향상: 스크린 리더 사용자가 어떤 라벨이 어떤 입력 필드에 해당하는지 정확히 인식할 수 있습니다.
  • 클릭 영역 확대: 라벨을 클릭하면 연결된 입력 필드에 자동으로 포커스가 이동하여 사용 편의성이 좋아집니다.
  • 폼 구조 명확화: 라벨과 입력 요소의 관계가 코드상으로도 명확해져 유지보수가 쉬워집니다.