[HTML5] 12. 선택형 입력과 콤보 박스 + <select> + <label> 태그 + 폼 요소와 캡션

12. 선택형 입력과 콤보 박스 + <select> + <label> 태그 + 폼 요소와 캡션

 

 

 

 

# 선택형 입력 : 콤보 박스

- <select> : 드롭다운 리스트에 목록 출력, 목록을 선택하는 입력 방식

                  -> <option> 태그로 항목 하나 표현

 

 

- size : 콤보박스 창의 크기 (보일 수 있는 최대 개수의 항목)로, 디폴트 값은 1이다.

- multiple : 이 속성이 있다면 다수의 항목을 선택할 수 있다.

- value : 이 항목이 선택되었을 때 웹 서버에 전송되는 값

- selected : 이 속성이 있다면 초기에 선택된 상태로 출력된다.

 

size 옵션과 multiple 옵션 추가

 

 

 

 

# <label>로 폼 요소의 캡션 만들기

- 캡션과 폼 요소

 

 

- <label> 태그로 캡션과 폼 요소를 한 단위로 묶으면 캡션 텍스트를 명료하게 하는 장점이 있다.

방법 1	방법 2
<label> 사용자 ID : <input type="text"> </label>	<label for="loginID"> 사용자 ID : </label> <input type="text" id="loginID">

 

 

 

 

 

# <label> 태그로 로그인 폼 만들기

'주민등록 번호 앞 6자리' 글자를 누르면 빈칸에 커서가 나타나지 않지만, <lable> 태그를 사용하여 캡션과 폼 요소를 하나로 묶어놓은 아래의 경우 '사용자 ID' 글자를 누르면 빈칸에 커서가 나타난다.

+ 주석은 잘못 썼다....무시하기

 

 

 

 

# 선택형 요소의 캡션을 <label>로 감싸기

- 선택형 요소에 <lable>태그 사용

: 캡션 텍스트나 이미지를 선택해도 폼 요소를 선택한 것으로 처리

정확히 동그라미가 아닌 그림이나 글자 클릭해도 선택한 것으로 인식