select : inline 레벨
여러개의 옵션을 리스트처럼 나열하고 그중에 선택할 수 있게 표시
모바일에서는 select버튼을 자주 사용한다. pc와 다르게 화면이 작아서 공간활용이 좋기 때문이다.
부모로만 사용 가능
라디오버튼은 다 풀어놓은 상태인것이고, 셀렉트는 숨겨놓은 상태인것이다.
option : 자식으로만 사용 가능
- 속성 - (input속성과 일부 비슷한 것이 있음. )
- multiple : select 태그에 적용
리스트를 펼쳐서 여러개를 선택할 수 있게 해준다. (보이는 것도 여러개.)
근데 안예뻐서 사용은 잘 안한다. - selected : option 태그에 적용. checked처럼 해당 요소가 기본으로 표시됨
- name : select 태그에 적용. 정보 넘길 때 사용.
- value : option 태그에 적용. 실제값
- disabled : 비활성화
datalist : text 필드에 datalist를 id값으로 연결
사용자가 입력한 글자가 option중에 매칭되는게 있으면 리스트업해준다. (자동완성기능)
주의 : label, value 속성들과 함께 사용시 브라우저마다 표시되는 부분이 다를 수 있다.
아직 표준은 아님.(잘 사용 안 됨)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select name="web">
<option value="웹1">웹1</option>
<option value="웹2" selected>웹2</option>
<option value="웹3">웹3</option>
<option value="웹4">웹4</option>
<option value="웹5">웹5</option>
</select>
<br>
<select name="web">
<optgroup label="웹">
<option value="웹1">웹1</option>
<option value="웹2">웹2</option>
<option value="웹3">웹3</option>
</optgroup>
<optgroup label="디자인">
<option value="디자인1">디자인1</option>
<option value="디자인2">디자인2</option>
</optgroup>
</select>
<br>
<input type="text" list="d_list">
<datalist id="d_list">
<option value="웹1">웹1</option>
<option value="웹2">웹2</option>
<option value="웹3">웹3</option>
<option value="디자인1">디자인1</option>
<option value="디자인2">디자인2</option>
</datalist>
</body>
</html>
계속 나아가기
잘 봤습니다. 좋은 글 감사합니다.