multiple : select 태그에서 사용되는 옵션으로입력한 항목만큼 데이터를 나열해 줌
datalist : select 태그 대신에 input text 태그에서 데이터 목록을 나열해 주고 선택한 값을 자동으로 입력해 줌
티스토리 뷰
1. 개념
multiple , datalist - 데이터 목록 나열2. 태그
multiple , datalisthtml5 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
32
33
34
35
36
37
|
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
</head>
<body>
<form>
1
<select>
<option value = "test1" > 테스트1 </option>
<option value = "test2" > 테스트2 </option>
<option value = "test3" > 테스트3 </option>
<option value = "test4" > 테스트4 </option>
<option value = "test5" > 테스트5 </option>
</select>
2
<select multiple >
<option value = "test1" > 테스트1 </option>
<option value = "test2" > 테스트2 </option>
<option value = "test3" > 테스트3 </option>
<option value = "test4" > 테스트4 </option>
<option value = "test5" > 테스트5 </option>
</select>
3
<input type = "text" list = "dataTest" >
<datalist id = "dataTest" >
<option value = "test1" label = "테스트1" ></option>
<option value = "test2" label = "테스트2" ></option>
<option value = "test3" label = "테스트3" ></option>
<option value = "test4" label = "테스트4" ></option>
<option value = "test5" label = "테스트5" ></option>
</datalist>
<input type = "submit" value = "전송" >
</form>
</body>
</html>
|
결과 화면
코드 설명
1
<select> ...... </select>
select에 아무런 옵션이 없을 경우에는 한줄로 값이 나옵니다
거기서 아래로 향하는 화살표 모양을 누르면 그때 지정된 항목들이 밑으로 나열되고 원하는 값을 선택할 수 있게 됩니다.
거기서 아래로 향하는 화살표 모양을 누르면 그때 지정된 항목들이 밑으로 나열되고 원하는 값을 선택할 수 있게 됩니다.
2
<select multiple > ...... </select>
select 태그에서 multiple라는 옵션을 주게 되면 2번에서 보시는 것처럼 항목이 나열되어 보이게 됩니다.
목록에 대한 나열 개수는 size라는 속성을 통해서 지정할 수 있습니다.
목록에 대한 나열 개수는 size라는 속성을 통해서 지정할 수 있습니다.
3
<input type = "text" ........ ><datalist ........ /datalist>
input type text에 list라는 속성을 통해서 datalist id와 매칭해서 연결해 주면 3번과 같이 나오게 됩니다
select 태그로 선언한 것도 아니지만 select 태그로 한 것처럼 datalist를 통해 text 아래로 목록이 나열되는 것을 보실 수 있습니다.
select 태그로 선언한 것도 아니지만 select 태그로 한 것처럼 datalist를 통해 text 아래로 목록이 나열되는 것을 보실 수 있습니다.
'[개발]프로그래밍 > html5' 카테고리의 다른 글
| [html5] video - 웹 페이지에서 비디오 재생 (0) | 2021.02.23 |
|---|---|
| [html5] iframe - 다른 html을 호출하기 위한 프레임 (0) | 2021.02.22 |
| [html5] size,maxlength,minlength - 길이, 최대 글자 수, 최소 글자 수 (0) | 2021.02.18 |
| [html5] readonly,required - 읽기 전용,필수 값 지정 (0) | 2021.02.17 |
| [html5] autofocus,placeholder - 커서 위치,힌트 표시 (0) | 2021.02.16 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday