글
<select><option>으로 드랍다운메뉴 만들기
오늘도 폼에서 사용되는 컨트롤들에 대해서 배워보겠습니다. 오늘은 흔히들 콤보박스나 드랍다운박스라고 하는 건데요. 예를들면 다음과 같은겁니다.
이런겁니다. 오늘 만들어볼건데요. 직업선택을 누르면 아래로 메뉴들이 나타나고 그것들중에 하나를 선택하는 거지요. 그럼 위와 같은 박스는 어떻게 만들까요? <select><option>을 사용하는데요. 아래를 보시죠.
<select name="job">
<option value="">직업선택</option>
<option value="student">학생</option>
<option value="company">회사원</option>
<option value="etc">기타</option>
</select>
<select name="hobby">
<option value="">취미선택</option>
<option value="game">컴퓨터게임</option>
<option value="reading">독서</option>
<option value="music">음악감상</option>
</select>
이게 저 그림의 소스코드입니다. <select name="job"> 이것은 select 즉 선택이란 뜻이죠. 그래서 선택상자를 만들겠다 하는 뜻입니다. 이름은 job이라고 하구요. 이 이름은 나중에 폼이 전송되었을때 참조하기 위해서 필요한 겁니다. 그거까지는 다음에 하도록 하구요. 그 밑에 <option value="student">학생</option>은 그 박스안의 내용중에 학생이라는 내용이 있고 그것의 참조값은 student라는 뜻입니다. 즉 위에서 보듯이 학생이라는 메뉴항목이 있지요. 근데 그것을 선택하면 선택되어진 값으로 student라는 값이 보내진다는 뜻입니다. 나머지도 마찬가지입니다.
그럼 이해하셔으리라 믿고 다음에 또 만나요~(이해안되시면 메일이나 댓글달아주세요.)
'HTML' 카테고리의 다른 글
radio버튼 (0) | 2011.08.19 |
---|---|
체크박스 (0) | 2011.08.16 |
textarea를 이용한 자기소개란 만들기 (0) | 2011.08.10 |
input태그와 간단한 로그인 박스 만들기 (0) | 2011.08.08 |
HTML태그정리표 (0) | 2011.08.03 |