HTML의 <output> 요소에서 for 속성은 계산 결과와 그 계산에 사용된 요소들 사이의 관계를 지정하는 역할을 합니다. 즉, 어떤 입력 요소들이 결과 값에 영향을 주었는지 명확하게 연결해 줍니다.
for 속성 문법
<output for="id">
여기서 id는 요소의 고유 식별자를 의미합니다. 하나 이상의 요소를 지정할 경우에는 공백으로 구분하여 나열하면 됩니다. 이렇게 지정된 요소들이 계산 결과와 어떤 관계가 있는지 브라우저와 개발자에게 알려주는 것입니다.
for 속성 사용 예제
다음 예제는 슬라이더와 숫자 입력 필드의 값을 더한 결과를 <output> 요소로 실시간 표시하는 코드입니다.
<!DOCTYPE html>
<html>
<body>
<h2>결과</h2>
<form oninput="n.value=parseInt(p.value)+parseInt(q.value)+parseInt(r.value)">0
<input type="range" id="p" value="25">100+<input type="number"
id="q" value="50">+<input type="number" id="r" value="50">
=<output name="n" for="p q r"></output>
</form>
</body>
</html>실행 결과
위 코드를 실행하면 초기값이 화면에 표시됩니다.
슬라이더를 오른쪽으로 움직여 값을 늘리면, 세 입력 요소의 합계가 실시간으로 계산되어 <output> 영역에 자동으로 갱신됩니다.
정리
for 속성은 필수는 아니지만, 계산 결과가 어떤 입력 요소들과 연관되어 있는지 명시적으로 표현할 수 있어 코드의 가독성과 접근성을 높이는 데 유용합니다. 여러 요소를 연결할 때는 공백으로 구분한다는 점을 기억하세요.