HTML
결과 표시 태그 (output)
결과값을 표시하는 할 땐 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>
결과는 바로 아래에서 확인할 수 있습니다.
