HTML의 for 속성은 <label> 요소를 특정 폼 요소와 연결하는 역할을 합니다. 구체적으로 말하면, for 속성의 값과 동일한 id를 가진 첫 번째 라벨 가능(labelable) 요소에 <label>이 바인딩됩니다.
이 속성을 활용하면 사용자가 라벨 텍스트를 클릭했을 때 해당 입력 필드(input)에 자동으로 포커스가 이동하므로, 접근성과 사용자 경험을 크게 향상시킬 수 있습니다.
문법(Syntax)
for 속성의 값을 가져오는 기본 문법은 다음과 같습니다.
labelObject.htmlFor
예제(Example)
아래 예제는 for 속성을 실제로 활용하는 방법을 보여줍니다. 버튼을 클릭하면 자바스크립트가 htmlFor 값을 확인하고, 조건에 따라 라벨의 연결 대상을 다른 입력 필드로 변경합니다.
<!DOCTYPE html>
<html>
<head>
<title>Label htmlFor</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Label-htmlFor</legend>
<label id="CurrentEditor" for="editorTwo">Current Editor:</label><br>
<input type="text" id="editorOne" placeholder="editorOne">
<input type="text" id="editorTwo" placeholder="editorTwo">
<input type="button" onclick="getEventData()" value="Change Editor">
<div id="divDisplay">Label for attribute set as editor two</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var labelSelect = document.getElementById("CurrentEditor");
function getEventData() {
if(labelSelect.htmlFor === 'editorTwo'){
divDisplay.textContent = 'Label for attribute set as editor one';
labelSelect.htmlFor = 'editorOne';
}
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면을 확인할 수 있습니다.
1) 'Change Editor' 버튼을 클릭하기 전 −
2) 'Change Editor' 버튼을 클릭한 후 −
정리
for 속성은 <label>과 폼 컨트롤을 연결하는 핵심 도구입니다. 이 예제에서처럼 자바스크립트의 htmlFor 프로퍼티를 사용하면 런타임에 연결 대상을 동적으로 변경할 수도 있습니다. 스크린 리더 사용자에게 어떤 입력 필드인지 명확히 알려주기 때문에, 웹 접근성을 고려한 폼 작성 시 반드시 활용하는 것이 좋습니다.