[HTML] 양식(7) - select, datalist, optgroup, option

 

▶ <select>, <datalist>, <optgroup>, <option>

• 옵션(<option>, <optgroup>)의 선택 메뉴(<select>)나 자동완성(<datalist>)을 제공.
  - <option>: 사용자에게 선택할 수 있는 옵션 제공.
  - <optgroup>: 제공된 옵션을 그룹화.
  - <select>: 제공된 옵션은 셀렉트를 통해 사용자가 선택.
  - <datalist>: 자동완성 기능으로써 제공. 

• select { display: inline-block; }

• datalist { display: none; }

• optgroup, option { display: block; } 

<select>, <opgroup>, <option> 사용 예시

 

 

▶ <select>

• 옵션을 선택하는 메뉴.

• 속성

  autocomplete: 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 설정.

  - on, off 값. 기본 값: on

  disabled: 선택 메뉴 자체를 선택할 수 없도록 비활성화.

  - boolean값.

  form: 선택 메뉴가 속할 하나 이상의 <form>의 id 속성 값.
  - form 태그 범위 내에 없는 경우 연결해서 사용.

  multiple: 다중 선택 여부 설정.

  - boolean값.

  name: 선택 메뉴의 이름.

  size: 한 번에 볼 수 있는 행의 개수.

  - 숫자 값. 기본 값: 0(1과 같음)

 

 

▶ <optgroup>

• <option>을 그룹화.

• <option>을 통해 선택 목록 제공 시 선택 목록이 많다면 사용자가 혼란스러울 수 있음.
  - 수동으로 <option>의 그룹을 wrapping하여 제공하는 것.
  - 그룹화된 내용은 목록에 표시됨.

• 속성

  label: 옵션 그룹의 이름. 필수 속성.

  disabled: 옵션 그룹을 비활성화.

  - boolean값

 

 

▶ <option>

• 선택 메뉴(<select>)나 자동완성(<datalist>)에서 사용될 옵션.

• 선택적으로 빈 태그(Empty tag)로도 사용 가능.
  - Empty tag로 사용 시 label, value 속성의 사용이 필수적이 됨.

 

• 속성

  disabled: 옵션을 비활성화.

  - boolean 값.

  label: 화면에 표시될 옵션의 제목.

  - 생략되면 포함된 텍스트를 표시.

  selected: 옵션이 선택되었음을 표시.

  - boolean 값.

  value: 양식으로써 서버로 제출될 값.

  - 생략되면 포함된 텍스트를 값으로 사용.

 

 

 

 

▶ <datalist>

• <input>에 미리 정의된 옵션을 지정하여 자동완성(Autocomplete) 기능을 제공하는 데 사용.
• <input>의 list 속성을 바인딩(binding).
• <option>을 포함하여 정의된 옵션을 지정. 

<datalist> 사용 예시

  - focus를 하거나 텍스트 입력 시 자동완성 기능 제공.

  - Javascript를 사용하지 않고도 자동 완성 기능 제공하는 것.

  - <input>으로 기본적인 양식을 제공한 후, 그 약식에서 추가적으로 제공될 자동완성 기능을 <input>의 list 속성을 사용해 <datalist>의 id값을 연결해 사용함.
  - 자동완성 목록은 <datalist> 내의 option을 통해 제공.