안녕하세요, 이번에는 select와 option에 대해 정리해보겠습니다.
select는 option을 선택하는 메뉴 역할을 하는 태그입니다.
나중에 홈페이지를 만들때 사용을 많이 할 것 같아 정리해보겠습니다.
◆select 속성
autocomplete : 사용자가 이전에 입력한 값으로 자동완성 (on/off)
disabled : 선택 메뉴 비활성화 (Boolean)
form : form의 id 속성값 입력
multiple : 다중 선택 여부
name : 선택 메뉴의 이름
size : 한 번에 볼 수 있는 행의 개수
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<!-- 여러개를 한번에 보고 싶을때 -->
<select name="fruits" size="3">
<option>Apple</option>
<option>Mango</option>
<option>Melon</option>
<option>Orange</option>
</select>
<!-- 하나만 선택할 때 -->
<select name="fruits">
<option>Apple</option>
<option>Mango</option>
<option>Melon</option>
<option>Orange</option>
</select>
<!-- 여러개를 선택하고 싶을때 -->
<select name="fruits" multiple>
<option>Apple</option>
<option>Mango</option>
<option>Melon</option>
<option>Orange</option>
</select>
<!-- disabled -->
<select name="fruits" disabled>
<option>Apple</option>
<option>Mango</option>
<option>Melon</option>
<option>Orange</option>
</select>
</body>
</html>위와 같이 입력하고 실행을 하면 아래와 같이 선택하는 것이 나옵니다(disabled 속성을 넣으면 선택을 못한다)
선택 메뉴(select)와 자동완성(datalist)에서 사용될 option을 확인해 보겠습니다.
◆ option 속성(빈 태그로 사용 가능)
disabled : 옵션을 비활성화 (Boolean)
label : 표시될 옵션의 제목 (생략 시 텍스트를 표시)
selected : 옵션이 선택된 상태로 표시
◆ optgroup 속성
option들을 묶을 때 사용
label : 표시될 옵션 그룹의 제목 설정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<!-- 전체를 보기위해 size 10 적용 -->
<select size="10" name="fruits">
<optgroup label="내가 좋아하는 과일">
<option>Apple</option>
<option selected>Mango</option>
<option>Melon</option>
</optigroup>
<optgroup label="내가 싫어하는 과일">
<option>Orange</option>
<option>Banana</option>
</optgroup>
</select>
</body>
</html>optgroup으로 묶어보니 아래와 같이 나눠져 있고 label이 붙은 것을 확인할 수 있습니다.
(selected 때문에 망고가 선택되어 있습니다!)
◆ datalist 속성
<input>에 미리 정의된 옵션을 지정하여 자동완성 기능을 제공
input의 list 속성 값에 datalist id 값을 연결하여 사용합니다!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<input type="text" list="fruits">
<datalist id="fruits">
<option>Apple</option>
<option>Orange</option>
<option>Banana</option>
<option>Mango</option>
<option>Fineapple</option>
</datalist>
</body>
</html>위의 코드를 실행하면 아래와 같은 input 창이 나오는데요, 여기서 'm'을 치면 밑에 Mango가 자동완성으로 나옵니다!
'Web 개발 > HTML.CSS' 카테고리의 다른 글
| HTML/CSS - 가상 클래스 선택자(2) (0) | 2021.06.01 |
|---|---|
| HTML/CSS - 가상 클래스 선택자(1) (0) | 2021.05.31 |
| HTML/CSS - button (0) | 2021.05.29 |
| HTML/CSS - input (0) | 2021.05.28 |
| HTML/CSS - form (0) | 2021.05.27 |
댓글