결과값을 표시하는 할 땐 output 태그
결과값을 표시하는 태그로 output태그가 있습니다.
인간에게는 p태그든 b태그든 어떤 태그에 결과를 넣더라도 보기에는 별다를게 없지만
봇들에게는 이곳이 어떠한 결과를 표시하는 곳이구나 라고 알려줄 때 사용합니다.
output 사용 방법
<output name='서버에서 인식할 값' for='계산과 관련한 태그의 id속성의 값'></output>
for 속성에는 id속성의 값을 적습니다.id속성은 태그에 적용할 수 있으며 해당 태그를 구분하고자 이름을 붙여주는것이라고 생각하면 됩니다.
id속성은 동일한 값을 여러 태그가 가질 수 없습니다. 오직 한번만 사용할 수 있습니다.
예를 들어 id 속성의 값을 a 로 이미 사용했다면 다른 태그에 id 속성의 값으로 a 를 적용하면 안됩니다.
즉, 다음과 같은 코드를 사용하면 안됩니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>id 속성 잘못 사용 예</title> </head> <body> <h1 id='a'>안녕</h1> <h1 id='a'>그래, 안녕</h1> </body> </html>
위와 같이 동일한 id속성값을 사용하면 안됩니다.
output태그를 사용하기 위해 간단한 예제를 만들어 보겠습니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>output 태그</title> </head> <body> <h1>계산</h1> <form name="해당 폼의 이름" action="값을 보낼 주소" method="post"> <input type='number' id='num1' name='num1' value='5'/> + <input type='number' id='num2' name='num2' value='22'/> = <output for='num1, num2' name='result'>27</output> </form> </body> </html>
위 코드의 결과
심심하니까 값을 입력하면 계산하는 스크립트를 적용해 볼게요. 스크립트는 그냥 편하게 보기만 하세요 나중에 다 학습하니까요.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>output 태그</title> </head> <body> <h1>계산</h1> <form name="해당 폼의 이름" action="값을 보낼 주소" method="post" oninput="result.value=parseInt(num1.value)+parseInt(num2.value)"> <input type='number' id='num1' name='num1' value='0'/> + <input type='number' id='num2' name='num2' value='0'/> = <output for='num1, num2' name='result'></output> </form> </body> </html>