HTML DOM Label htmlFor 속성 – for 속성 값 가져오기 및 설정하기

HTML DOM의 Label htmlFor 속성은 <label> 요소의 for 속성 값을 반환하거나 설정하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트를 통해 라벨이 연결된 폼 컨트롤을 동적으로 변경할 수 있습니다.

문법(Syntax)

다음은 htmlFor 속성의 기본 문법입니다.

for 속성 값 반환하기

labelObject.htmlFor

for 속성 값 설정하기

labelObject.htmlFor = '값'

예제(Example)

아래 예제는 Label htmlFor 속성을 사용하여 버튼 클릭 시 라벨의 for 속성 값을 동적으로 변경하는 방법을 보여줍니다.

<!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>

코드 설명

위 예제의 동작 방식을 단계별로 살펴보면 다음과 같습니다.

<label> 요소는 처음에 for="editorTwo"로 설정되어 있어 editorTwo 입력 필드와 연결되어 있습니다.
'Change Editor' 버튼을 클릭하면 getEventData() 함수가 실행됩니다.
함수 내부에서 labelSelect.htmlFor 값이 'editorTwo'인지 확인한 후, 조건이 참이면 for 속성 값을 'editorOne'으로 변경하고 안내 문구도 함께 갱신합니다.

출력(Output)

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

'Change Editor' 버튼 클릭 전 −

HTML DOM Label htmlFor 속성 – for 속성 값 가져오기 및 설정하기

'Change Editor' 버튼 클릭 후 −

HTML DOM Label htmlFor 속성 – for 속성 값 가져오기 및 설정하기

버튼을 클릭하면 라벨의 for 속성이 editorTwo에서 editorOne으로 변경되어, 라벨이 다른 입력 필드와 연결되는 것을 확인할 수 있습니다.