[HTML5 & CSS3] 폼 관련 태그들 - 여러 데이터 나열해 보여주기

▶ 여러 데이터 나열해 보여주기

*  <select>, <option> 태그 - 드롭다운 목록 만들기

사용자가 내용을 입력하는 것이 아니라 여러 옵션 중에서 선택하도록 하고 싶을 때 사용.

 

 

* <optgroup> 태그 - 옵션끼리 묶기

드롭다운 목록에서 여러 항목들을 몇 가지 그룹으로 묶어야 할 경우에 사용.

 

 

* <datalist> 태그, <option> 태그

<input type="text" id="interest" list="choices">
<datalist id="choices">
      <option value="grammar" label="문법"></option>
      <option value="voca" label="어휘"></option>
      <option value="speaking" label="회화"></option>
      <option value="listening" label="리스닝"></option>
      <option value="news" label="뉴스청취"></option>
</datalist>

 

 

* <textarea> 태그 - 여러 줄 입력하는 텍스트 영역 만들기

 

 

 

 

▶ 기타 다양한 폼 요소들

* <button> 태그 - 버튼 넣기

<button>태그는 태그 이름에서 그 역할을 알 수 있다.

<button>태그를 사용한 버튼에는 콘텐츠를 포함할 수 있기 때문에 아이콘을 추가할 수도 있고 CSS를 이용해 원하는 형태로 꾸밀 수도 있다.

<form>
        <button type="submit" class="subm">
               <img src="images/tick.png" alt=""> 전송하기
        </button>
</form>

 

 

* <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> 태그 - 진행 상태 보여주기

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

<ul>
     <li>
         <label>10초 남음</label>
         <!-- 전체 60초 중 50초 진행 -->
         <progress value="50" max="60"> </progress>
    </li>
    <li>
        <label>진행률 30%</label>
        <!-- 전체 100 중 30만큼 진행 -->
        <progress value="30" max="100"></progress> 
   </li>
</ul>

 

 

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

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