사용자가 여러 옵션 중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용합니다. 드롭다운 목록이란 클릭했을 때 옵션들이 요소 아래쪽으로 펼쳐지기 때문에 붙여진 이름입니다. 공간을 최소한을 사용하면서 여러 옵션을 표시하려면 드롭다운 목록이 가장 적당합니다.
목차
select
<select>는 선택할 수 있는 목록을 만들 때 사용합니다.
목록의 내용은 <option> 태그로 만듭니다.
<select>
<option> ... ... </option>
<option> ... ... </option>
<option> ... ... </option>
</select>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
<select> 태그에 사용하는 주요 속성은 다음과 같습니다.
- autofocus : 페이지가 로드되었을 때 해당 목록으로 바로 포커스가 맞춰집니다.
- disabled : 화면에는 보이지만 사용할 수 없도록 만듭니다.
- multiple : Ctrl 키를 누른 상태로 여러 값을 선택할 수 있도록 합니다.
- name : 이름을 붙입니다.
- size : 목록을 펼치기 전에 보여질 목록의 개수를 정합니다.
<h2>General</h2>
<form>
<select>
<option>Lorem</option>
<option>Ipsum</option>
<option>Dolor</option>
<option>Amet</option>
</select>
</form>
<h2>Autofocus</h2>
<form>
<select autofocus>
<option>Lorem</option>
<option>Ipsum</option>
<option>Dolor</option>
<option>Amet</option>
</select>
</form>
<h2>Disabled</h2>
<form>
<select disabled>
<option>Lorem</option>
<option>Ipsum</option>
<option>Dolor</option>
<option>Amet</option>
</select>
</form>
<h2>Multiple</h2>
<form>
<select multiple>
<option>Lorem</option>
<option>Ipsum</option>
<option>Dolor</option>
<option>Amet</option>
</select>
</form>
<h2>Size</h2>
<form>
<select size="2">
<option>Lorem</option>
<option>Ipsum</option>
<option>Dolor</option>
<option>Amet</option>
</select>
</form>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
optgroup
여러 항목들을 몇 가지 그룹으로 묶어야 할 경우,
<optgroup> 태그를 사용할 수 있습니다.
label 속성을 사용해 그룹의 제목을 붙입니다.
<label for="choices">학과 </label>
<select id="choices">
<optgroup label="공과대학">
<option value="archi">건축공학과</option>
<option value="mechanic">기계공학과</option>
<option value="indust">산업공학과</option>
<option value="elec">전기전자공학과</option>
<option value="computer">컴퓨터공학과</option>
<option value="chemical">화학공학과</option>
</optgroup>
<optgroup label="인문대학">
<option value="history">사학과</option>
<option value="lang">어문학부</option>
<option value="philo">철학</option>
</optgroup>
</select>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
datalist
<select> 태그 대신 <datalist> 태그를
사용하면 데이터 목록 중에서 값을 선택할 수 있습니다.
즉, 텍스트 필드에 직접 값을 입력하는 것이 아니라 데이터 목록에 제시한 값중에서 선택하면 그 값이 자동으로 입력 됩니다.
<label>관심분야
<input type="text" list="choices">
<datalist id="choices">
<option value="grammar" label="문법"></option>
<option value="voca" label="어휘"></option>
<option value="speaking" label="회화"></option>
<option value="listening" label="리스닝"></option>
<option value="news" label="뉴스청취"></option>
</datalist>
</label>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.