HTML의 <output> 태그는 계산 결과나 사용자 작업의 결과를 화면에 표시할 때 사용하는 요소입니다. 이 태그는 HTML5에서 새롭게 도입되었으며, 주로 폼(form) 내부에서 자바스크립트 등으로 계산된 값을 실시간으로 보여주는 용도로 활용됩니다.
<output> 태그의 주요 속성
- for – 계산 결과와 계산에 사용된 요소들 사이의 관계를 지정합니다. 관련 요소들의 id 값을 공백으로 구분하여 나열합니다.
- form – 해당 output 요소가 속한 폼을 지정합니다.
- name – output 요소의 이름을 지정합니다. 폼 제출 시 서버로 값이 전송될 때 참조됩니다.
그럼 <output> 태그를 실제로 구현한 예제를 살펴보겠습니다.
예제 코드
<!DOCTYPE html> <html> <body> <h2>Result</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> 태그에 표시하는 예제입니다. 폼의 oninput 이벤트 덕분에 입력값이 바뀔 때마다 계산이 자동으로 수행됩니다.
슬라이더를 움직여 값을 조정하면 아래와 같이 결과가 즉시 업데이트되어 화면에 표시됩니다.
정리
<output> 태그는 별도의 자바스크립트 DOM 조작 없이도 폼 내에서 계산 결과를 직관적으로 표현할 수 있어, 실시간 견적 계산기나 점수 합계 표시 같은 인터랙티브 UI를 만들 때 매우 유용합니다. for, form, name 속성을 적절히 활용하면 접근성과 데이터 전송 측면에서도 장점을 얻을 수 있습니다.