[HTML] <select> 태그 (드롭다운 목록)

---

<select> 태그 → 드롭다운 목록

 

● <select> 태그는 기본적으로 한가지 옵션을 보여주고, 여러 옵션 확인 후 한가지 옵션만 선택가능

속성명	속성값	설명
size	ex) 5	화면에 표시될 드롭다운 메뉴의 옵션 개수 지정
multiple	multiple	여러 개의 옵션을 선택가능

 

● <option> 태그 속성

속성명	설명
value	옵션을 선택했을 때 서버로 전달 되어지는 값
selected	기본 선택되어 있는 옵션

<!-- 다섯개씩 보임(size), 여러 옵션 선택가능(multiple) -->
<select name="subject" size="5" multiple>
	<option value="arch">건축공학과</option>
	<option value="mec">기계공학과</option>
	<option value="ind">산업공학과</option>
	<option value="elec">전기공학과</option>
	<option value="com" selected>컴퓨터공학과</option>
</select>

 

● <optgroup> 태그 → 항목 별로 묶기

<select name="subject" size="10" multiple>
	<optgroup label="공과대학">
		<option value="arch">건축공학과</option>
		<option value="mec">기계공학과</option>
		<option value="ind">산업공학과</option>
		<option value="elec">전기공학과</option>
		<option value="com" selected>컴퓨터공학과</option>
	</optgroup>
	
	<optgroup label="인문대학">
		<option value="hist">역사학과</option>
		<option value="lan">어문학과</option>
		<option value="phil">철학과</option>
	</optgroup>
</select>

 

● <datalist> 태그 → 데이터 목록 중에서 데이터 선택

속성명	설명
value	옵션을 선택했을 때 서버로 전달 되어지는 값
label	브라우저에 표시될 이름 (따로 지정하지 않으면 value 값을 표시)

<!-- <input> 태그의 list 속성 값과 <datalist>의 id가 같아야 함 -->
<input type="text" list="choices">
<datalist id="choices">
	<option value="html" label="HTML"></option>
	<option value="css" label="CSS"></option>
	<option value="js" label="JavaScript"></option>
	<option value="java" label="JAVA"></option>
	<option value="spring" label="Spring"></option>
</datalist>

<select>태그와 <datalist>태그 실행결과

 

● <textarea> 태그 → 한 줄 이상의 문장을 입력할 때 사용

속성명	설명
cols	가로 너비를 문자 단위로 지정
rows	세로 길이를 줄 단위로 지정