HTML <output> tag 정리, 한글 설명

HTML <output> element

mdn, W3C 정리 & 한국어 설명

 

자료 수집 : 2022년 3월

 

output 태그란?

계산이나 사용자의 행동에 의한 결과를 나타낼 때 사용한다. JavaScript 사용이 필요하다.

 

 

output 태그를 언제 사용할까?

• 복잡한 계산 (환율 계산)

 

 

output 태그의 속성

for="element_id1 element_id2" : 계산 결과와 계산에 사용되는 요소 사이의 관계를 명시

form="form_id"

name="name" : output 요소의 이름을 명시

 

 

주의사항

• output을 위해 input 태그를 사용할 때 반드시 type="number"를 명시해주어 사용자가 숫자만 입력하도록 해야 한다. (숫자가 아닌 다른 것을 form에 전송하면 NaN을 리턴받아 output에 출력된다.)

 

 

output 태그의 사용 예제

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
   <input type="range" id="a" value="50">100 +
   <input type="number" id="b" value="25"> =
   <output name="x" for="a b"></output>
 </form>

 

 

기타사항

• output 요소는 HTML5에서 추가되었다.
• 가능한 ARIA role : all
• 요즘에는 국제적으로 output 태그를 권장하지 않는다. (<output> is not supported internationally.)

 

 

출처

W3schools, W3docs, MDN, TCPschool