<output>: 출력 요소

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

HTML <output> 요소는 웹 사이트나 앱에서 계산이나 사용자 행동의 결과를 삽입할 수 있는 컨테이너 요소입니다.

콘텐츠 카테고리 플로우 콘텐츠, 구문 콘텐츠, 양식 관련 콘텐츠(나열됨, 레이블 가능, 초기화 가능), 뚜렷한 콘텐츠.
가능한 콘텐츠 구문 콘텐츠.
태그 생략 불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.
가능한 부모 요소 구문 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할 모두
DOM 인터페이스 HTMLOutputElement

특성

이 요소는 전역 특성을 포함합니다.

  • for

    • : 스페이스로 구분한, 다른 여러 요소 id의 목록. 목록에 포함된 요소가 출력 결과에 공헌했거나 영향을 주었음을 나타냅니다.

  • form

    • : <output>과 연결할 <form> 요소("양식 소유자"). 같은 문서에 존재하는 <form> 요소의 id 특성 값을 사용해야 합니다. form 특성을 지정하지 않았으나 조상 중 <form> 요소가 존재하면 해당 <form>과 연결됩니다.

    form 특성을 사용하면 <output>을 <form> 요소에 넣지 않고도 연결할 수 있고, 조상 중 <form>이 있더라도 소유자를 재정의할 수 있습니다.

  • name

<output>의 값, 이름, 콘텐츠는 양식 전송 시 제출되지 않습니다.

예제

html
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <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>

접근성 고려사항

많은 브라우저는 <output>을 마치 aria-live 특성이 존재하는 것처럼 구현합니다. 따라서 접근성 기술은 포커스가 바뀌지 않더라도 <output> 내부의 UI 상호작용 결과를 표현할 것입니다.

명세

Specification
HTML Standard
# the-output-element

브라우저 호환성

BCD tables only load in the browser