코딩의 시작, TCP School

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>

코딩연습 ▶

지원하는 브라우저 및 버전

태그명
<select>	지원함	지원함	지원함	1.0	지원함	지원함

HTML5에서 변경된 사항

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

사용할 수 있는 속성

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

속성명	속성값	설명
autofocus	autofocus	페이지가 로드될 때 자동으로 포커스(focus)가 드롭다운 리스트로 이동됨을 명시함.
disabled	disabled	해당 드롭다운 리스트가 비활성화됨을 명시함.
form	form id	해당 드롭다운 리스트가 포함될 하나 이상의 <form> 요소를 명시함.
multiple	multiple	사용자가 한 번에 두 개 이상의 옵션을 선택할 수 있음을 명시함.
name	이름	드롭다운 리스트의 이름을 명시함.
required	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;

};

연습문제

◀ 이전 다음 ▶

Search

<select>