[HTML] 드롭다운 목록(select, option, datalist optgroup, textarea)

<select>, <optgroup>, <option> 태그 - 드롭다운 목록 만들기

---

사용자가 내용을 입력하는 것이 아니라 여러 옵션 중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용한다.

 

<select> 태그

드롭다운 목록의 시작과 끝을 표시한다.

한 가지 옵션이 표시되고, 화살표를 클릭해 그 옵션들을 살펴볼 수 있고 필요한 한 가지 항목을 선택할 수 있다.

 

즉, 사용자가 선택할 수 있는 선택 항목을 제공하고, 그 범위내에서 선택이 가능하다.

 

속성

size - 화면에 표시될 드롭다운 메뉴의 항목 개수를 지정한다.

multiple - 브라우저 화면에 여러 개의 옵션이 함께 표시되면서 ctrl 키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있다.

 

<option> 태그

드롭다운 목록에 표시되는 옵션들은 <option> 태그를 이용해 지정한다.

<option> 태그에서만 사용하는 속성은 다음과 같다.

 

속성

value - 옵션을 선택했을 때 서버로 넘겨질 값을 지정

selected - 화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정.

 

<optgroup>태그 - 옵션끼리 묶기

드롭다운 목록에서 여러 항목들을 몇 가지 그룹으로 묶어야 할 경우 사용한다.

label 속성을 사용해 그룹의 제목을 붙인다.

 

<datalist>태그, <option>태그

---

<select> 태그 대신 <datalist> 태그를 사용하면 데이터 목록 중에서 값을 선택하도록 만들 수 있다.

 

즉, option 목록에 없는 값도, 사용자의 입력을 받을 수 있다.

또한 사용자가 입력창에 타이핑을 하면, option목록에서 일치하는 값을 찾아서 자동완성 기능을 제공한다.

 

사용 방법

- 데이터 목록은 텍스트 필드와 함께 사용하기 때문에 <input> 태그와 함께 사용한다.

- <input> 태그의 list 속성값과 <datalist>의 id 속성값을 같게 설정하면 된다.

※ type="text"는 대부분 브라우저에서 지원하지만 number, range, color 필드는 브라우저 버전별 확인이 필요하다.

 

속성

value - 사용자가 레이블을 선택했을 때 서버로 넘겨질 값을 지정한다.

label - 사용자를 위해 브라우저에 표시할 레이블이다. 따로 지정하지 않을 경우, value 값을 레이블로 사용한다.

 

<textarea> 태그 - 여러 줄 입력하는 텍스트 영역 만들기

---

한줄 이상의 문장을 입력할 때 사용하는 폼.

게시판에서 게시물을 입력하거나, 회원가입 양식에서 사용자 약관을 표시할 때 자주 사용한다.

 

속성

name - 다른 폼 요소와 구분하기 위해 텍스트 영역의 이름을 지정한다.

cols - 텍스트 영역의 가로 너비를 문자 단위로 지정한다.

rows - 텍스트 영역의 세로 길이를 줄 단위로 지정한다. 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생긴다.

 

 

See the Pen by seyoungjoy (@seyoungjoy) on CodePen.