1.간단한 select 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>여러 데이터 나열하기</h1>
<select name="area">
<option value="1" selected="selected">국어</option>
<option value="2">수학</option>
<option value="3">영어</option>
</select>
</body>
</html>select 태그를 통해서 drop down형식으로 여러 데이터를 나타낼 수 있다.
option 태그는 select box안에 포함될 항목들을 정의하는 것이고 value값을 통해 항목 값을 지정해 준다.
처음에 select box안에 뜨게 하는 기본값? 은 selected를 통해서 정해주면 된다.
<select 속성>
| size | 화면에 표시될 dropdown 메뉴의 개수 |
| multiple | 다중 선택 기능 지원 |
<option 속성>
| value | 옵션을 선택했을 때 서버로 넘겨질 값 |
| selected | 화면에 표시될 때 기본으로 선택되어져 있는 옵션 |
2. select 다중 선택하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>여러 데이터 나열하기</h1>
<select name="like" multiple="multiple" size="3">
<option>사과1</option>
<option>사과2</option>
<option>사과3</option>
<option>사과4</option>
<option>사과5</option>
<option>사과6</option>
</select>
</body>
</html>
select에서 multiple옵션을 줘서 다중 선택이 가능한 것을 확인할 수 있다.
또한 size = 3 으로 주어서 한번에 3개씩 뜨는 것을 확인할 수 있다.
3.dropdown 목록에서 몇 가지 그룹으로 묶기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>여러 데이터 나열하기</h1>
<select name="like" multiple="multiple" size = 12>
<optgroup label="과일">
<option selected="selected">사과1</option>
<option>사과2</option>
<option>사과3</option>
<option>사과4</option>
<option>사과5</option>
<option>사과6</option>
</optgroup>
<optgroup label="채소">
<option selected="selected">오이</option>
<option>오이</option>
<option>오이</option>
<option>오이</option>
<option>오이</option>
</optgroup>
</select>
</body>
</html>optgroup 태그를 통해서 그룹별로 묶은 것을 확인할 수 있다
'Web > HTML 기본 개념' 카테고리의 다른 글
| [HTML]입력양식 태그 (1) | 2021.03.05 |
|---|---|
| [HTML]이미지, 오디오 , 비디오 삽입하기 (0) | 2021.03.05 |
| [HTML]테이블 열,행 합치기 (0) | 2021.03.05 |
| [HTML]테이블 태그 (0) | 2021.03.05 |
| [HTML]글자 태그(2) (0) | 2021.03.02 |
