[HTML+CSS][폼 관련 태그들] 05 - 다양한 폼 요소들

 

 

[HTML+CSS][폼 관련 태그들] 04 - 여러 데이터 나열해 보여주기

 

앞 전에 배운 폼들과 더불어 더욱 다양한 폼 요소들에 대해 알아보자.

 

 

---

 

 

<button> - 버튼

 

<input> 태그에서도 버튼을 넣을 수 있지만 <button> 태그를 사용해 버튼을 삽입할 수 있다.

 

<input>과의 차이점은 <button>은 태그 자체에서 역할을 확인할 수 있기 때문에

화면 낭독기에서 버튼이 있다는 것을 정확하게 전달할 수 있으며,

버튼에 아이콘과 디자인을 바꿀 수 있는 CSS를 사용해 원하는 형태로 바꿀 수 있다.

 

 

    <form>
        <h1>버튼 삽입</h1>
        <button type="submit">
            <img src="images/tick.png" alt="button insert">버튼 삽입하기
        </button>
    </form>

 

 

---

 

 

<output> - 계산 결과

 

입력하는 값이 일반 텍스트가 아닌 계산 결과라는 것을 브라우저에게 알려준다.

 

 

    <form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">
        <h1>결과값 지정</h1>
        <input type="number" name="num1" value="0">
        +<input type="number" name="num2" value="0">
        =<output name="result" for="num"></output>
    </form>

 

 

---

 

 

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

 

작업의 진행 상태를 나타낼 때 사용한다.

 

 

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

 

<progress>와 비슷하나 <meter>는 전체 크기 중에서

얼마나 차지하는 지를 표현할 때 사용한다.

 

 

    <form>
        <h1>진행상태 막대 삽입</h1>
        <ul>
            <li>
                <label>10초 남음</label>
                <progress value="50" max="60"></progress>
            </li>
            <li>
                <label>진행률 30%</label>
                <progress value="30" max="100"></progress>
            </li>
        </ul>
    </form>
    <br>
    <hr>
    <form>
        <h1>전체 크기 중 차지하는 크기 삽입</h1>
        <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>
            <li>
                <label>적절한 트래픽</label>
                <meter value="0.5" optimum="0.8"></meter>
            </li>
        </ul>
    </form>

 

 

---

 

 

meter와 progress가 매우 비슷해서 조금 헷갈린다.

 

의미를 정확히 파악하고 쉽게 구분하도록 열심히 하자.

 

 

---

 

 

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

 

 

※ 해당 글은 습득 목적으로 작성된 글입니다 ※