27_select-tag.html

select 태그

"> select 태그

select 태그

select

size 속성을 사용하면 기본 표시되는 목록의 수를 지정할 수 있음.

multiple 속성을 사용하면 여러개의 항목 선택이 가능
Ctrl 키를 누른 상태에서 선택.

"> select 태그

select 태그

select

size 속성을 사용하면 기본 표시되는 목록의 수를 지정할 수 있음.

multiple 속성을 사용하면 여러개의 항목 선택이 가능
Ctrl 키를 누른 상태에서 선택.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select 태그</title>
</head>
<body>
<!--
	 # select 태그
	 - 드롭다운을 사용해서 여러개의 목록을 정의.
	 - 서버에 전송되는 데이터는 select 요소의 name 속성에,
	   option 요소의 value 속성이 값으로 전송.
	 
	 # option 태그
	 - select 태그안의 목록을 생성.
	 
	 # optgroup 태그
	 - option 태그를 그룹화.
	 
	 # datalist 태그
	 - 텍스트를 입력하는 필드에 사전에 정의된 드롭 다운 형식의 목록을 출력.
	 - 사용자가 입력창에 값을 입력하면, option 목록에서 일치하는 것을 찾아, 자동완성 기능을 제공.
-->
	<h2>select 태그</h2>
	<br>
	<form action="#">
		<fieldset>
			<legend> select </legend>
			<select id="car-list" name="cars" size="1" multiple>
				<option value="hyundai">HYUNDAI</option>
				<option value="kia">KIA</option>
				<option value="gm">GM</option>
				<option value="bmw">BMW</option>
				<option value="benz">BENZ</option>
			</select>
			<p> size 속성을 사용하면 기본 표시되는 목록의 수를 지정할 수 있음.</p>
			<p> multiple 속성을 사용하면 여러개의 항목 선택이 가능<br>
				Ctrl 키를 누른 상태에서 선택.
			</p>
		</fieldset>
		<br>
		<input type="submit" value="선택 완료">
	</form>
	<br>
	<form action="">
		<fieldset>
			<legend> optgroup </legend>
			<select id="car-list2" name="cars" size="5">
				<optgroup label="국내">
					<option value="hyundai">HYUNDAI</option>
					<option value="kia">KIA</option>
					<option value="gm">GM</option>
				</optgroup>
				<optgroup label="해외">
					<option value="gm">GM</option>
					<option value="bmw">BMW</option>
					<option value="benz">BENZ</option>
				</optgroup>
			</select>
		</fieldset>
	</form>
	
	<h2>datalist태그</h2>
	<br>
	<form action="#">
		<fieldset>
			<legend> 과일 </legend>
			<input list="fruit_list" id="fruits" name="fruits">
			<datalist id="fruit_list">
				<option value= "apple" label="사과">
				<option value= "banana" label="바나나">
				<option value= "mango" label="망고">
				<option value= "watermelon" label="수박">
				<option value= "peach" label="복숭아">
			</datalist>
		</fieldset>
	</form>
</body>
</html>