HTML <output>
요소는 웹 사이트나 앱에서 계산이나 사용자 행동의 결과를 삽입할 수 있는 컨테이너 요소입니다.
콘텐츠 카테고리 | 플로우 콘텐츠, 구문 콘텐츠, 양식 관련 콘텐츠(나열됨, 레이블 가능, 초기화 가능), 뚜렷한 콘텐츠. |
---|---|
가능한 콘텐츠 | 구문 콘텐츠. |
태그 생략 | None, both the starting and ending tag are mandatory. |
가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
가능한 ARIA 역할 | 모두 |
DOM 인터페이스 | HTMLOutputElement |
특성
이 요소는 전역 특성을 포함합니다.
for
- 스페이스로 구분한, 다른 여러 요소
id
의 목록. 목록에 포함된 요소가 출력 결과에 공헌했거나 영향을 주었음을 나타냅니다. form
<output>
과 연결할<form>
요소("양식 소유자"). 같은 문서에 존재하는<form>
요소의id
특성 값을 사용해야 합니다.form
특성을 지정하지 않았으나 조상 중<form>
요소가 존재하면 해당<form>
과 연결됩니다.form
특성을 사용하면<output>
을<form>
요소에 넣지 않고도 연결할 수 있고, 조상 중<form>
이 있더라도 소유자를 재정의할 수 있습니다.name
- 요소의 이름.
form.elements
API에서 사용합니다.
<output>
의 값, 이름, 콘텐츠는 양식 전송 시 제출되지 않습니다.
예제
<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 | Status | Comment |
---|---|---|
HTML Living Standard The definition of '<output>' in that specification. |
Living Standard | |
HTML5 The definition of '<output>' in that specification. |
Recommendation |
브라우저 호환성
BCD tables only load in the browser