HTML : <select>, <option> 태그

[html] select 태그

 

<select> 요소는  드롭다운 목록을 만들 때 사용하는 태그입니다.

 

문법: <select> 내용 </select>

 

선택 항목은 <option> 요소로 지정합니다.

 

사용 예:

 

<select>
  <option value="zazz">zazz</option>
  <option value="pop">pop</option>
</select>

 

 

select 요소는 html form 양식에서 사용될 수 있습니다.

 

▶함께 사용할 수 있는 속성

 

속성	속성값	설명
name	이름	드롭다운 목록의 이름 전송 후 데이터를 참조하거나 자바스크립트에서 요소 참조를 위해 사용
size	숫자	드롭다운 목록에서 보이는 옵션 개수 기본값 1/multiple 속성이 있을 경우 기본값은 4. 속성값이 1보다 크지만, 옵션 전체 개수보다 작으면, 스크롤바가 생김. Chrome, safari에서 정상 작동되지 않을 수 있음
disabled	disabled	드롭다운 메뉴가 비활성화 됨
multiple	multiple	몇가지 옵션이 한 번에 선택될 수 있음 os가 windows일 경우 crtl 버튼으로 선택 Mac일 경우 comman 버튼으로 선택 문법: <select multiple>, xhtml에서는 <select multiple="multiple">
↓↓html5 새로 추가된 속성↓↓
autofocus	autofocus	자동으로 포커스 됨 문법: <select autofocus>,  xhtml에서는 <select autofocus="autofocus"> 지원브라우저: ie10, chrome, safari, opera
form	form id	select 영역이 속한 form의 id 문법: <select form="form id"> 지원브라우저: chrome, ff, opera, safari
required	required	전송 전에 선택이 필수임을 지정 문법: <select required>, xhtml에서는 <select required="required" /> 주요브라우저 지원 안 함

 

 

▶html 작성 예를 보겠습니다~

 

html

<h4> 좋아하는 음악을 선택하세요</h4>
<select name="music" size="3" form="music" multiple>
  <option value="zazz">zazz</option>
  <option value="pop">pop</option>
  <option value="hiphop">hip-hop</option>
  <option value="kpop">k-pop</option>
</select>
<form action="url" method="get" id="music">
<p>
<input type="submit" value="submit">
</p>
</form>

 

▶실행화면

 

 

 

 

 

 

[html] option 태그

 

어제 select 태그를 배웠습니다

 

[html] select 태그

<select>는 드롭다운 목록을 만들 때 사용합니다.

 

드롭다운 목록의 항목은 <option> 태그로 만듭니다.

 

▶사용 예:

 

<select>
  <option value="zazz">zazz</option>
  <option value="pop">pop</option>
</select>

 

<option> 태그를 사용할 때 보통 value 속성을 함께 지정하는데

 

value 속성은 서버에 전송될 값 입니다. 

 

옵션 목록이 길 경우, 관계 있는 옵션들끼리  <optgroup>태그로 묶을 수 있습니다

 

<option> 태그는 <select>나 다음 시간에 다룰 <datalist>태그 안에 들어갈 수 있습니다.

 

* datalist 태그 : input 요소에서 미리 지정된 옵션 목록을 지정.(자동 완성 기능)
 

 

▶함께 사용할 수 있는 속성

 

속성	속성값	설명
value	text	서버에 전송될 값 value값이 없을 경우, option 사이의 내용이 서버에 전달 됨
label	text	옵션에 대한 짧은 설명. 드롭다운 리스트에 표시됨. Ff7.0이전 버전은, label 속성이 지정되지 않으면 빈 문자열이 표시 됨
selected	selected	옵션이 미리 선택 됨. 미리 선택된 옵션이 드롭다운 목록에서 맨 먼저 표시 됨 문법: <option selected>, xhtml에서는 <option selected="selected">
disabled	disabled	옵션이 비활성화 됨 문법: <option disabled>, xhtml에서는 <option disabled="disabled">

 

 

출처 : https://aboooks.tistory.com/303

[html] option 태그

by지구별에님