HTML 기타 폼 요소들(button, progress, meter)

 

 

<botton> 태그로 버튼 넣기

<input> 태그로 버튼(submit, reset 등)을 만들었던 것과 비슷하게 <button> 태그를 이용해도 폼을 전송하거나 리셋(reset)하기 위한 버튼을 삽입할 수 있다. 다음 예시에서 input 태그의 submit 유형과 button 태그의 submit 유형은 같은 기능을 한다. 마찬가지로 reset 유형도 같은 기능을 한다.

<form action="search.php">
    <label>이름 <input type="text"></label><br>
    <label>나이 <input type="text"></label><br>

    <input type="submit" value="제출하기">
    <button type="submit">제출하기</button>

    <input type="reset" value="리셋하기">
    <button type="reset">리셋하기</button>
</form>

 

input 태그를 사용했을 때와 차이점이라면 button 태그는 화면 낭독기에서 이 부분에는 버튼이 있다는 것을 알고 정확히 전달할 수 있다.

 

버튼 태그 안에 이미지 태그가 포함된 예시)

<button type="reset">
    <img src="images/tick.png" alt="">리셋하기
</button>

 

 

<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>

 

 

<progress> 태그를 사용해 진행 상태 보여주기

작업 시작을 0으로 하고 최종 완료를 최댓값으로 해 얼마나 진척되었는지 숫자로 표현합니다. 이때 사용하는 값에는 특별한 단위가 없고 단위를 표시하지도 않습니다.

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

예시)

<progress value="50" max="100"></progress>

 

 

<meter> 태그를 이용하여 값이 차지하는 크기 표시하기

진행 상황을 나타내는 <progress> 태그와 달리 <meter> 태그는 전체 크기 중에서 얼마나 차지하는지 표현할 때 사용한다. 작업이 진행된다는 의미보다 하드 디스크 전체 용향 중 현재 얼마나 차지하는지 등 사용량이나 투표율처럼 지정된 범위 내에 해당 값이 어느 정도 차지하고 있는지 표현한다.

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

 

예시)

<meter value="0.8"></meter>
<meter value="100" min="0" max="1000"></meter>
<meter value="80" min="0" max="100" optimum="50"></meter>