HTML - 드롭다운 목록 요소

select 태그는 메뉴를 보여주고, 선택할 수 있습니다.

<select name="select">
    <option>직업을 선택하세요</option>
    <option>학생</option>
    <option>직장인</option>
    <option>백수</option>
</select>

<select>태그

<select>태그는 다음 속성을 사용할 수 있습니다.

태 그	속 성	설 명
<select>	size	속성 값에 주어진 숫자 만큼의 메뉴 개수를 한 번에 보여주는 속성. 기본값은 위의 예제처럼 1개입니다.
	multiple	메뉴를 다중 선택할 수 있게 하는 속성.
<option>	value	옵션을 선택했을 때 넘겨질 값
	selected	기본으로 선택되어져 있는 값
<optgroup>	label	옵션끼리 묶습니다.

multiple 속성의 정의했으니 여러 개를 선택할 수 있습니다.

<select name="select" size="2" multiple>
    <option value="">직업을 선택하세요</option>
    <option value="학생">학생</option>
    <option value="직장인">직장인</option>
    <option value="백수">백수</option>
</select>

<optgroup>태그

셀렉트 메뉴에서 여러 항목을 그룹으로 묶어줘야 할 때 사용할 수 있습니다. <optgroup> 태그를 사용하려면 label 속성과 같이 사용하여야 하며, label 속성의 값이 그룹 이름이 됩니다.

<select name="select">
  <optgroup label="직업">
    <option value="학생">학생</option>
    <option value="직장인">직장인</option>
    <option value="백수">백수</option>
  </optgroup>
  <optgroup label="직장인">
    <option value="IT">IT</option>
    <option value="프리렌서">프리렌서</option>
    <option value="백수">백수</option>
  </optgroup>
</select>

학생 직장인 백수 IT 프리렌서 백수