반응형
HTML 선택메뉴(펼치는메뉴) select option selected
예제1 :: 선택메뉴에서 선택하자마자 링크 타고 홈페이지로 이동
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="en"> <body> <select class="fm" onchange="if(this.selectedIndex) {this.blur(); window.open(options[selectedIndex].value);}"> <option value="" selected="selected">홈페이지 바로가기</option> <option value="http://www.naver.com">네이버</option> <option value="http://daum.net">다음</option> <option value="http://google.com">구글</option> <option value="http://usefull.tistory.com">가득 차 있는 공간</option> </select> </body> </html> | cs |
예제2 :: 일반 선택메뉴
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html lang="en"> <body> <select name="start"> <option value="영화">영화</option> <option value="독서">독서</option> <option value="공부">공부</option> <option value="게임">게임</option> <option value="만화">만화</option> <option value="조립">조립</option> </select> </body> </html> | cs |
예제3 :: 기본 선택메뉴
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="en"> <body> <select> <option> naver.com </option> <option> daum.net </option> <option> google.com </option> <option> yahoo.com </option> <option> youtube.com </option> </select> </body> </html> | cs |
예제4 :: 메뉴 옵션에 카테고리 만들기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <select name="hobby"> <option value="독서">독서</option> <optgroup label="스포츠"> <option value="야구">야구</option> <option value="축구">축구</option> </optgroup> <option value="음악감상">음악감상</option> </select> </body> </html> | cs |
반응형
'이전 게시글 > 컴퓨터#웹 HTML' 카테고리의 다른 글
| HTML select option(select box)에서 값 가져오기 (1) | 2016.02.11 |
|---|---|
| [HTML] ＆nbsp; ＆amp; ＆lt; ＆gt; ＆quot; 뜻 (0) | 2016.02.07 |
| [HTML] href 태그 및 링크에 밑줄 없애기 (0) | 2016.02.02 |
| [HTML] <div> 태그를 알아보자 (0) | 2016.02.02 |
| [HTML] <thead>, <tbody>, <tfoot> 등 테이블 만들기 (0) | 2016.02.02 |
