[html] 폼태그 그룹 정리 / select-option 과 datalist - option 차이, optgroup과 option

htm에서 콤보박스를 만들 때 주로 select나 datalist 태그를 사용합니다. 둘 다 하위태그로 option을 사용하여 목록리스트를 만들 수 있지만 차이점이 존재합니다.

 

1.미리 정해진 옵션 목록

select 태그는 <option>외에도 <option>을 묶어주는 <optgroup>도 사용가능합니다. select 태그에 사용하는 주요 속성은 다음과 같습니다. optgroup은 선택목록에 그룹을 설정해주는 태그로 , option태그와 함께 사용할 경우, option태그의 상위태그가 됩니다. 
option : 목록을 출력하는 태그입니다. 흔히, 선택가능한 목록 리스트라고 보시면 됩니다. 

multiple : 여러 값을 선택할 수 있도록 합니다.

size : 목록을 펼치기 전에 기존 화면에 보여질 목록의 개수를 정합니다. "size=10"으로 지정하면 목록을 클릭하기 전부터 10개의 리스트가 보여집니다.

<select id="list1" size="1">
  <optgroup label="그룹1">
    <option>목록1</option>
    <option>목록2</option>
  </optgroup>
  <option selected>목록3</option>
  <option>목록4</option>
  <option>목록5</option>
  <option>목록6</option>
</select>

목록1 목록2 목록3 목록4 목록5 목록6

disabled : 화면에는 보이지만 클릭하여 수정하거나 다른 목록을 선택할 수 없도록 비활성화상태로 만드는 속성입니다.

selected : selected를 목록3에 설정하여 초기화면에 목록3이 입력되어 나타납니다. selected를 설정하지 않은 경우는 리스트에서 가장 위에 있는 목록명이 보여집니다.

select태그로 만든 콤보박스는 입력형="텍스트"에서 주로 사용되며, <select> 태그에서는 변경 즉시 변경 이벤트가 발생합니다. 반면에 datalist 태그의 경우, type="text"와 함께 사용했지만, 범위, 색상, 날짜 등에서도 사용가능한  추상적인 데이터목록입니다. 

 

2. 요구 사항과 제안의 차이

datalist 태그

입력창에 텍스트를 입력 할 때 유사한 키워드 목록을 보여줄 때 datalist를 사용합니다. 즉, input 태그에 입력값을 미리 제공해주는 속성이며, 하위태그로는 option만 해당합니다. <optgroup> 태그는 지원하지 않습니다.

select 태그는 드롭다운방식으로 보여지고, 그 리스트 중에 선택하는 속성인 반면, datalist는 일반적인 텍스트 필드 형태로 보여지기 때문에 구분하기 어려우며, 마우스로 클릭하여 활성화시켜야 옵션이 보입니다. datalist에서는 목록에서 선택하는 것뿐만 아니라, 키워드 입력 방식으로 직접 입력할 수 있습니다.

키워드 검색의 중요성이 높아짐에 따라 별도의 프로그램 없이 자동완성 기능을 이용할 수 있도록 datalist 요소가 html5부터 추가되었습니다. 

<input type="text" list="list2">
<datalist id="list2">
  <option value="목록명1" label="list1"></option>
  <option value="목록명2" label="list2"></option>
  <option value="목록명3" label="list3"></option>
  <option value="목록명4" label="list4"></option>
  <option value="목록명5" label="list5"></option>
</datalist>

클릭해보세요

즉, select 태그와 달리, datalist태그는 옵션 목록으로 사용자를 제한할 수는 없다. 옵션 목록에 없는 내용도 사용자가 자율적으로 입력이 가능합니다. 또한, datalist는 브라우저 전반에 걸쳐 굉장히 다양한 방법으로 지원이 됩니다. 

 

아래 링크에서 다른 input type에서 datalst태그가 사용된 예제를 확인할 수 있습니다.

http://demo.agektmr.com/datalist/