<select></select> 태그는 클릭하면 메뉴가 나타나 선택하는 박스이다.
기본적으로 값을 선택하기 위해선 중간에 <option>이 필요하며 <option>의 value 값으로 <select> 변수 값이 정해진다.
<select>는 기본적으로 날짜중에 월이나 일만 선택하거나, 나이, 휴대폰 번호 앞자리 선택 등
다양한 곳에서 사용된다.
<select> 박스에서 value 값을 한글로 줘도 되지만 되도록이면 영어로 주도록한다.
<select name="select_box" id="select_box" onChange="change_event(this.value);">
<option value="number_1_data">첫번째 데이터</option>
<option value="number_2_data">두번째 데이터</option>
<option value="number_3_data">세번째 데이터</option>
<option value="number_4_data">네번째 데이터</option>
</select>
예시 페이지에서 가져온 <select>박스문의 기본이다.
<select>박스에서는 주로 onChange 이벤트를 많이 사용한다.
<option>이 변경되었을 경우 스크립트를 실행해준다는 내용이다.
this.value 일 경우 현재 <select> 박스가 선택한 <option>의 value 값을 가져간다는 뜻이다.
좀 더 정확한건 예시 페이지에서 보도록 하겠다.
http://hyoseung930.cafe24.com/bolg_poster/select_test_page.php
'WEB > HTML' 카테고리의 다른 글
[HTML] 모바일 확대 방지 (0) | 2017.11.29 |
---|---|
[HTML] <table> 태그 (0) | 2017.11.27 |
[HTML] <form> 태그 (0) | 2017.11.27 |
[HTML] <input> 태그의 type 속성 (0) | 2017.11.27 |
[HTML] <span> 태그 (0) | 2017.11.27 |