폼에서 사용하는 여러 가지 태그

1. 여러 줄을 입력하는 textarea 태그

폼에서 텍스트를 여러 줄 입력하는 영역을 만들 수 있다.

너비 크기를 지정하는 cols 속성과

화면에 텍스트를 몇 줄 표시할지 지정하는 rows 속성을 사용한다.

<form>
        <label for="memo">메모</label>
        <textarea id="memo" cols="40" rows="4"></textarea>
    </form>

textarea 태그

 

 

2. 드롭다운 목록을 만드는 select, option 태그

select 태그로 드롭다운 목록의 시작과 끝을 표시

option 태그로 원하는 항목을 추가한다.

option 태그의 selected 속성을 사용하면 기본으로 선택해 보여 줄 항목을 지정한다.

 

3. 데이터 목록을 만드는 datalist, option 태그

datalist 태그로 데이터 목록의 시작과 끝을 표시

option 태그로 각 데이터의 옵션을 표시

 

<h1>여러 데이터 나열하기</h1>
  <form action="">  
    <!-- 드롭 다운 목록 -->
    <label for="prod1">상품 선택</label>
    <select id="prod1">
      <option value="special_3" selected>선물용 3kg</option>
      <option value="special_5">선물용 5kg</option>
      <option value="family_3">가정용 3kg</option>
      <option value="family_5">가정용 5kg</option>
    </select>
    <hr>    
    <!-- 데이터 목록 -->
    <label for="prod2">포장 여부 </label>
    <input type="text" id="prod2" list="pack">
    <datalist id="pack">
      <option value="package">선물 포장</option>
      <option value="no_package">포장 안 함</option>
    </datalist>        
  </form>

드롭다운, 데이터목록

 

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.