..

Search

<select>

HTML <select> 태그


정의 및 특징

<select> 태그는 옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)를 정의할 때 사용합니다.

 

<select> 요소 내부의 <option> 요소는 드롭다운 리스트(drop-down list)에서 사용되는 각각의 옵션을 정의합니다.

이러한 <select> 요소는 사용자로부터 입력을 받기 위한 폼(form)에 사용될 수 있습니다.


예제
<select>
    <option value="americano">아메리카노</option>
    <option value="caffe latte">카페라테</option>
    <option value="cafe au lait">카페오레</option>
    <option value="espresso">에스프레소</option>
</select>

코딩연습 ▶


지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

<select> 지원함 지원함 지원함 1.0 지원함 지원함

HTML5에서 변경된 사항

HTML5에서는 <select> 태그에 autofocus 속성과 form 속성, required 속성이 새롭게 추가되었습니다..


사용할 수 있는 속성

html5 : HTML5에서 새롭게 추가된  속성

속성명   속성값 설명

autofocus

html5

autofocus

페이지가 로드될 때 자동으로 포커스(focus)가 드롭다운 리스트로 이동됨을 명시함.

disabled

 

disabled

해당 드롭다운 리스트가 비활성화됨을 명시함.

form

html5 form id

해당 드롭다운 리스트가 포함될 하나 이상의 <form> 요소를 명시함.

multiple

  multiple

사용자가 한 번에 두 개 이상의 옵션을 선택할 수 있음을 명시함.

name

  이름

드롭다운 리스트의 이름을 명시함.

required

html5 required

폼 데이터(form data)가 서버로 제출되기 전 사용자가 반드시 드롭다운 리스트의 값을 선택해야 함을 명시함.

size

 

숫자

드롭다운 리스트에서 한 번에 보일 옵션의 개수를 명시함.


DOM 인터페이스

interface HTMLSelectElement : HTMLElement {

  attribute DOMString autocomplete;

  attribute boolean autofocus;

  attribute boolean disabled;

  readonly attribute HTMLFormElement? form;

  attribute boolean multiple;

  attribute DOMString name;

  attribute boolean _required;

  attribute unsigned long size;

 

  readonly attribute DOMString type;

 

  [SameObject] readonly attribute HTMLOptionsCollection options;

  attribute unsigned long length;

  getter Element? item(unsigned long index);

  HTMLOptionElement? namedItem(DOMString name);

  void add((HTMLOptionElement or HTMLOptGroupElement) element, optional (HTMLElement or long)? before = null);

  void remove(); // ChildNode overload

  void remove(long index);

  setter void (unsigned long index, HTMLOptionElement? option);

 

  [SameObject] readonly attribute HTMLCollection selectedOptions;

  attribute long selectedIndex;

  attribute DOMString value;

 

  readonly attribute boolean willValidate;

  readonly attribute ValidityState validity;

  readonly attribute DOMString validationMessage;

  boolean checkValidity();

  boolean reportValidity();

  void setCustomValidity(DOMString error);

 

  [SameObject] readonly attribute NodeList labels;

};


연습문제