HTML <output>: 출력 요소

HTML <output> 요소는 웹 사이트나 앱이 사용자 동작과 계산의 결과 등을 주입할 때 사용할 수 있는 컨테이너 요소입니다.

특성

전역 특성을 포함합니다.

for

출력 결과에 영향을 준 요소들의 id입니다. 공백으로 구분한 리스트입니다.

form

이 <output>을 양식 소유자(<form> 요소)와 연결합니다. 같은 문서 상에 존재하는 <form>의 id 값을 지정하세요. 이 특성이 존재하지 않으면 <output>의 양식 소유자는 가장 가까운 조상 <form>이 됩니다.

form 특성을 사용하면 <output>이 <form>의 자손이 아니어도 연결할 수 있으며, form 특성이 가리키는 <form>이 조상 <form>보다 우선합니다.

<output>의 value 특성, 이름, 내용은 양식 제출 시에 전송되지 않습니다.

예제

기본 예제

이 예제에서는 0에서 100의 값을 지정 가능한 슬라이더 하나와, 사용자가 직접 숫자를 입력하는 칸 하나를 배치한 양식을 준비했습니다. 두 컨트롤의 값이 바뀔 때마다, 둘의 값을 더해서 <output> 요소에 출력합니다.

<form>
  <input type="range" id="b" name="b" value="50" /> + <input type="number" id="a" name="a" value="10" /> =
  <output name="result" for="a b">60</output>
</form>

document.querySelector('form').addEventListener('input', function () {
  this.result.value = Number(this.a.value) + Number(this.b.value)
})

접근성 고려사항

많은 브라우저에서는 <output>을 aria-live 영역으로서 구현합니다. 따라서 <output>에 나타나는 내용이 바뀌면, 사용자가 컨트롤에서 포커스를 바꾸지 않아도 보조 기술이 자동으로 바뀐 내용을 알립니다.

명세

HTML Living Standard

브라우저 호환성