[HTML 입문] 기타 폼 요소

1. <button> 태그 - 버튼 넣기

<input> 태그말고도 <buttone> 태그를 이용해도 폼을 전송하거나 리셋하기 위한 버튼을 삽입할 수 있습니다.

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

<button> 태그를 사용하면 화면 낭독기에서 이 부분에는 버튼이 있다는 것을 정확히 전달할 수 있고, CSS를 이용해 원하는 형태로 꾸밀 수도 있습니다.

2. <output> 태그 - 계산 결과

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

<form oninput="result.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>

3. <progress> 태그 - 진행 상태

<progress value="값" [max="값"]></progress>

<progress> 태그에서 사용할 수 있는 속성은 다음과 같습니다.

속성	설명
value	작업 진행 상태를 나타내며 부동 소수점으로 표현한다. 이 값은 0보다 크거나 같고 max 값보다 작거나 같아햐 한다. 만약 max 값이 지정되지 않았다면 이 값은 1.0보다 작아야 한다.
max	작업이 완료되려면 얼마나 많은 작업을 해야 하는지 부동 소수점으로 표현한다. 이 값은 0보다 커야 한다.

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

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

<meter> 태그에서 사용할 수 있는 속성은 다음과 같습니다.

속성	설명
min, max	범위의 최솟값과 최댓값을 나타낸다. 값을 정하지 않으면 0과 1로 간주한다.
value	범위 내에서 차지하는 값을 나타낸다.
low	낮은 정도의 값을 지정한다.
high	높은 정도의 값을 지정한다.
optimum	적당한 정도의 값을 지정한다. optimum 값이 high 값보다 크다면 value 값이 클수록 좋고 optimum 값이 low 값보다 작다면 value 값이 작을수록 좋다.

<ul>

      <li>

        <label>점유율 0.8 </label>

      <!-- 전체 크기 1을 기준으로 0.8만큼 차지합니다 -->

    <meter value="0.8"></meter>

      </li>

      <li>

        <label>사용량 64%</label>

    <!-- 전체 100 중에서 64만큼 차지합니다  -->

    <meter min="0" max="100" value="64"></meter>

      </li>

      <li>

        <label>트래픽 초과</label>

    <!-- 전체 크기는 1024~10240까지인데 높다고 설정한 8192보다 현재 값 9216이 더 큽니다 -->

        <meter min="1024" max="10240" low="2048" high="8192" value="9216"></meter>        

      </li>

      <li>

        <label>적절한 트래픽</label>

    <!-- 전체 1 중에서 현재 0.5를 차지하고 있으며 적정도를 0.8로 설정했습니다 -->

        <meter value="0.5" optimum="0.8"></meter>

      </li>

    </ul>

<출처> Do it! HTML5+CSS3 웹 표준의 정석