<output> 태그의 정의 및 사용법

<output> 태그는
웹 애플리케이션이 수행한 계산 결과나,
사용자의 웹 양식 관련 컨트롤을 통한 다양한 상호작용의 결과에 대한 출력(output)을 나타냅니다.

주로 계산 결과 출력이나 양식 입력에 대한 실시간 피드백으로 결과를 보여줄 때 사용됩니다.

<samp> 태그는 프로그램이나 시스템에서 실행되는 샘플이나 결과의 인용을 나타낸다는 점이 대조적입니다.

예제

다음의 예제는 사용자가 범위 슬라이더(<input type="range">)를 조작할 때, 선택한 값이 실시간으로 <output> 태그로 표시되는 것을 보여줍니다.

HTML 
<label for="volume">볼륨</label>
<input type="range" id="volume" min="0" max="100">

<!-- 사용자가 조작한 슬라이더 값이 실시간으로 표시될 위치 -->
<output for="volume" id="volume-output" style="color: red;"></output>

코드 부연설명
<label> 태그는 사용자 인터페이스를 제공하는 컨트롤 요소들의 이름표(label, 레이블)를 나타냅니다.
이 태그는 컨트롤 요소들과 함께 사용하며, 가독성과 웹 접근성을 높이는 역할을 합니다.

실제 적용된 모습 슬라이더를 움직이면 바로 옆에 현재 값이 빨간색으로 표시됩니다.

아래의 자바스크립트 코드는 <output> 태그로 표시되는 값을 실시간으로 업데이트하여, 사용자가 선택한 값을 즉시 볼 수 있도록 구현했습니다.

JavaScript 
const value = document.querySelector("#volume-output");
const input = document.querySelector("#volume");
value.textContent = input.value;
input.addEventListener("input", (event) => {
  value.textContent = event.target.value;
});

관련 속성 사용하기

<output> 태그는 모든 글로벌 속성을 사용할 수 있습니다.
그리고, <output>에서 사용되는 관련 속성이 있습니다. 다음의 속성을 추가로 지원합니다.

output 태그의 관련 속성
속성설명
for <output> 태그로 나타낸 계산 결과와 그 계산에 사용된 값이나 영향을 미친 다른 요소들의 id를 값으로 지정하여 이들 간의 관계를 명확하게 설정합니다.
form <output> 태그가 속해 있는 <form> 태그의 id의 값으로 지정하여 이들 간의 관계를 명확하게 설정합니다.
중요한 점은 이 속성으로 <output> 태그를 특정 <form> 태그와 연결하더라도, 양식이 제출될 때 <output> 태그의 값은 제출되지 않는다는 것입니다.
name <output> 태그의 이름을 나타냅니다. 양식이 제출되더라도 이 속성은 사용되지는 않지만, 자바스크립트에서 해당 <output>을 참조할 때 사용됩니다.

for 속성

<output> 태그로 나타낸 계산 결과와 그 계산에 사용된 값이나 영향을 미친 다른 요소들의 id를 값으로 지정하여 이들 간의 관계를 명확하게 설정합니다.
여러 개의 요소가 있을 경우, for 속성 값에 띄어쓰기로 구분하여 여러 개의 id를 지정할 수 있습니다.

하나의 id를 지정
HTML 
<label for="volume">볼륨</label>
<input type="range" id="volume" min="0" max="100">
<output for="volume" id="volume-output"></output>

코드 부연설명
값을 실시간으로 업데이트하기 위한 자바스크립트 코드 예제는 생략했습니다.

여러 개의 id를 지정
HTML 
<label for="num1">숫자 1:</label>
<input type="number" id="num1" value="10">
<br>

<label for="num2">숫자 2:</label>
<input type="number" id="num2" value="20">
<br>

<!-- 계산 결과를 출력할 부분 -->
<label for="result">계산 결과:</label>
<output for="num1 num2" id="result"></output>

코드 부연설명
<input> 태그의 type="number"는 숫자 입력 필드를 나타냅니다.
이 필드는 숫자만 입력하거나 선택할 수 있도록 구성되어 있으며, 숫자가 아닌 입력을 거부하는 유효성 검사 기능이 내장되어 있습니다.

코드 부연설명
값을 실시간으로 업데이트하기 위한 자바스크립트 코드 예제는 생략했습니다.

form 속성

<output> 태그가 속해 있는 <form> 태그의 id의 값으로 지정하여 이들 간의 관계를 명확하게 설정합니다.

중요한 점은 이 속성으로 <output> 태그를 특정 <form> 태그와 연결하더라도, 양식이 제출될 때 <output> 태그의 값은 제출되지 않는다는 것입니다.

HTML 
<form id="volume-form">
    <label for="volume">볼륨</label>
    <input type="range" id="volume" min="0" max="100" step="10">
    <output for="volume" id="volume-output" form="volume-form"></output>
</form>

name 속성

<output> 태그의 이름을 나타냅니다. 양식이 제출되더라도 이 속성은 사용되지는 않지만, 자바스크립트에서 해당 <output>을 참조할 때 사용됩니다.

자바스크립트에서 form.elements API를 통해 name 속성을 기준으로 <output> 태그를 식별(참조)하고 다룰 수 있습니다.

HTML 
<form>
    <label for="price">가격</label>
    <input type="number" id="price" value="1000">
    <br>
    <label for="discount">할인율</label>
    <input type="number" id="discount" min="0" max="100" value="10">
    <br>
    <label for="total">총 가격</label>
    <output id="total-price" name="total" for="price discount"></output>
</form>
JavaScript 
const form = document.querySelector("form");
const priceInput = form.elements["price"];
const discountInput = form.elements["discount"];

/* form.elements API를 사용하여 <output> 태그를 참조 */
const totalOutput = form.elements["total"];

function calculateTotal() {
const price = parseFloat(priceInput.value);
const discount = parseFloat(discountInput.value);
const total = price - (price * discount / 100);
totalOutput.textContent = total.toFixed(2);
}

calculateTotal();
priceInput.addEventListener("input", calculateTotal);
discountInput.addEventListener("input", calculateTotal);
실제 적용된 모습

브라우저 호환성

output 태그와 관련 속성의 브라우저 호환성
태그와 속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<output> 10 18 4 7
for 10 18 4 7
form 10 18 4 7
name 10 18 4 7

명세서

output 태그의 명세서 사양
명세서 사양
<output> HTML Standard
#the-output-element

참고문헌

같이 보기