HTML5에서 계산 결과를 표시하는 방법: <output> 태그 완벽 정리

HTML5에서는 <output> 태그를 사용하여 계산 결과나 사용자 작업의 결과를 화면에 표시할 수 있습니다. 이 태그는 주로 폼(form) 내부에서 스크립트로 계산된 값을 실시간으로 보여줄 때 활용됩니다.

<output> 태그의 주요 속성

HTML의 <output> 태그는 다음과 같은 추가 속성을 지원합니다.

속성	값	설명
for	element_id	다른 요소들의 ID 목록을 지정합니다. 즉, 해당 계산에 입력값을 제공한 요소들이 어떤 것인지 나타냅니다.
form	form_id	출력 요소를 문서 내 어느 위치에든 배치할 수 있도록 연결할 폼을 지정합니다.
name	name	해당 요소의 이름을 지정합니다. 자바스크립트나 폼 처리 시 이 값을 참조합니다.

사용 예제

아래 코드를 실행하면 HTML5에서 <output> 태그를 어떻게 구현하는지 직접 확인할 수 있습니다. 이 예제는 세 개의 입력값(슬라이더와 숫자 입력 필드)을 더한 결과를 실시간으로 출력합니다.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Output Tag</title>
   </head>
   <body>
      <form oninput = "sumresult.value = parseInt(z1.value)+parseInt(z2.value)+parseInt(z3.value)">
         <input type = "range" name = "z1" value = "0" /> +
         <input type = "number" name = "z2" value = "30" /> +
         <input type = "number" name = "z3" value = "60" /><br />
         계산 결과: <output name = "sumresult"></output>
      </form>
   </body>
</html>

코드 설명

위 예제에서는 폼 요소에 oninput 이벤트 핸들러를 등록하여, 입력값이 변경될 때마다 z1, z2, z3 세 값의 합이 자동으로 계산됩니다. 계산된 결과는 sumresult라는 이름을 가진 <output> 요소에 즉시 반영되어 사용자에게 실시간으로 표시됩니다.

이처럼 <output> 태그는 별도의 DOM 조작 없이 폼의 oninput 이벤트만으로 간편하게 계산 결과를 화면에 노출할 수 있는 유용한 HTML5 요소입니다.