[HTML 기초] 기타 다양한 폼 요소들

<button> 태그 - 버튼 넣기

• <input> 태그에서 type을 buttn, submit, reset 를 지정하면 해당 기능을 가진 버튼이 표출됐다. <input> 태그 말고도 <button> 태그를 이용해서 버튼을 표출할 수 있다.

<button [type="submit | reset | button"]> 내용</button>

속성

• submit : 폼을 서버로 전송한다.
• reset : 폼에 입력한 모든 내용을 초기화한다.
• button : 버튼 형태만 만들 뿐 자체 기능은 없다.

 

<output> 태그 - 계산 결과

• <output> 태그는 입력하는 값이 계산 결과라는 것을 브라우저에 알려준다.

<output [속성="속성 값"]>내용</output>

<form oninput="reseult.value=parseInt(num1.value)+parseInt(num2.value)">
	<input type="number" name="num1" value="0" />+
	<input type="number" name="num2" value="0" />=
	<output name="result" for="num"></output>
</form>

• num1.value는 input 태그의 첫 번째 필드에 입력된 값이다.
• num2.value는 input 태그의 두 번째 필드에 입력된 값이다.

 

<progress> 태그 - 진행 상태 보여주기

• <progress> 태그는 작업 진행 상태를 나타낼 때 사용하는 태그다. 작업 시작을 0으로 하고 최종 완료를 최댓값으로 해 얼마나 진척되었는지 숫자로 표현한다.

<progress> 태그 속성

• value : 작업 진행 상태를 나타내며 부동 소수점으로 표현한다. 이 값은 0보다 크거나 같고 max 값보다 작거나 같아야 한다.
• max : 작업이 완료되려면 얼마나 많은 작업을 해야 하는 지 부동 소수점으로 표현한다.

<ul>
	<li>
		<label>10초 남음</label>
		<progress value="50" max="60"></progress>
	<li>
	<li>
		<label>30% 남음</label>
		<progress value="70" max="100"></progress>
	<li>
</ul>

 

<meter> 태그 - 값이 차지하는 크기 표시하기

• <meter> 태그는 <progress>태그를 사용했을 때 결과 화면이 거의 같기 때문에 혼동되기도 한다.
• <meter> 태그는 전체 크기 중에서 얼마나 차지하는 지 표현할 때 사용한다.

<meter value="값" [속성="속성값"]></meter>

<meter> 태그 속성

• min, max : 범위의 최솟값과 최댓값을 나타낸다. 값을 정하지 않으면 0과 1로 간주한다.
• value : 범위 내에서 차지하는 값을 나타낸다.
• low : "이 정도면 낮다"라고 할 정도의 값을 지정한다.
• high : "이 정도면 높다"라고 할 정도의 값을 지정한다.
• optimum : "이 정도면 적당하다"라고 할 정도의 범위를 지정한다.

<ul>
	<li>
		<label>점유율 0.8</label>
		<meter value="0.8"></meter>
	</li>
	<li>
		<label>사용량 64%</label>
		<meter min="0" max="100" value="64"></meter>
	</li>
	<li>
		<label>트래픽 초과</label>
		<meter min="1024" max="10240" low="2048" high="8192" value="9216"></meter>
	</li>
</ul>