[HTML 기초] 여러 데이터 나열을 보여 주기

<select>, <optgroup>, <option> 태그 - 드롭다운 목록 만들기

• 사용자가 내용을 입력하는 것이 아니라 여러 옵션 중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용한다.
• 드롭다운 목록이란 클릭했을 때 옵션들이 요소 아래쪽으로 펼쳐져서 붙여진 이름이다.

<select> 태그

<select 속성="속성 값">
	<option value="1" [속성="속성값"]>내용1</option>
	<option value="2" [속성="속성값"]>내용2</option>
	<option value="3" [속성="속성값"]>내용3</option>
</select>

<select> 태그 속성

• size : 화면에 표시될 드롭다운 메뉴의 항목 개수를 지정한다.
• multiple : 브라우저 화면에 여러 개의 옵션이 함께 표시되면서 Ctrl 키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있다.

<option> 태그 속성

• value : 옵션을 선택했을 때 서버로 넘겨질 값을 지정한다.
• selected : 화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정한다.

<form>
	<label for="cookie">과자</label>
	<select id="cookie">
		<option value="1">바나나킥</option>
		<option value="2">조리퐁</option>
		<option value="3">맛동산</option>
		<option value="4">유과</option>
		<option value="5">한과</option>
	</select>
</form>

 

 

<optgroup> 태그 - 옵션끼리 묶기

• 드롭다운 목록에서 여러 항목들을 몇 가지 그룹으로 묶어야 할 경우 <optgroup> 태그를 사용한다.

<form>
	<label for="cookie">과자</label>
	<select id="cookie">
		<optgroup label="롯데제과">
			<option value="1">가나파이</option>
			<option value="2">갸또</option>
			<option value="3">딸기쿠키</option>
			<option value="4">롯데샌드rm>	<label for="cookie">과자</label>	<select id="cookie">		<optgroup label="롯데제과">			<option value="1">가나파이</option>			<option value="2">갸또</option>			<option value="3">딸기쿠키</option>			<option value="4">롯데샌드</option>
		</optgroup>
		<optgroup label="오리온">
			<option value="5">초코파이</option>
			<option value="6">후레쉬베리</option>
			<option value="7">초코칩</option>
		</optgroup>
	</select>
</form>

 

<datalist>태그, <option> 태그

• 드롭다운 목록을 <select> 태그 대신 <datalist> 태그를 사용하면 데이터 목록을 중에서 값을 선택하도록 만들 수 있다.
• 텍스트 필드에 직접 값을 입력하는 것이 아니라 데이터 목록에서 제시한 값 중에서 선택하면 그 값이 자동으로 입력된다.

<option> 태그 속성

• value : 사용자가 레이블을 선택했을 때 서버로 값을 넘겨질 값을 지정한다.
• label : 사용자를 위해 브라우저에 표시할 레이블이다.

<form>
	<input type="text" id="intersert" list="choices" />
	<datalist id="choices">
		<option value="grammer" label="문법"></option>
		<option value="voca" label="단어"></option>
		<option value="speaking" label="회화"></option>
		<option value="listening" label="리스닝"></option>
	</datalist>
</form>

 

<textarea> 태그 - 여러 줄 입력하는 텍스트 영역 만들기

• 폼에서 텍스트 필드에 값은 한 줄로 표시된다. 그래서 블로그에서 글을 작성할 경우 여러 줄을 표시해야 할 경우 <textarea> 태그를 사용한다.

<textarea> 태그 속성

• name : 다른 폼 요소와 구분하기 위해 텍스트 영역의 이름을 지정한다.
• cols : 텍스트 영역의 가로 너비를 문자 단위로 지정한다.
• rows : 텍스트 영역의 세로 길이를 줄 단위로 지정한다.

<form>
	<textarea name="intro" cols="30" rows="4"></textarea>
</form>