HTML - 셀렉트박스(select)

<select name="job">     <option value="">직업선택</option>     <option value="학생">학생</option>     <option value="회사원">회사원</option>     <option value="기타">기타</option> </select>

 

<select>태그와 <option>태그로 구성됩니다.

직업선택 학생 회사원 기타

<option> 태그에서 사용하는 value 속성은 텍스트 필드에서의 value 속성과는 조금 틀립니다. 텍스트 필드에서 value 속성에 값을 입력하면 기본값이 입력되지만 <option> 태그의 경우는 이 <option>이 선택된 경우 전송되는 값을 지정하는 것입니다.

위의 예제에서 학생을 선택된채로 폼을 전송했다면 job 필드의 value값은 <option value="학생">의 value값인 "학생"으로 지정됩니다.

기본값으로 회사원이 선택되게 할려면 selected 속성을 사용해야 합니다.

<select name="job">     <option value="">직업선택</option>     <option value="학생">학생</option>     <option value="회사원" selected="selected">회사원</option>     <option value="기타">기타</option> </select>

아래와 같이 회사원이 선택된채로 출력됩니다.

직업선택 학생 회사원 기타

<optgroup>은 HTML 4 버전에서 새로 만들어진 태그로 옵션에 카테고리를 만들 수 있습니다. 대부분의 웹브라우저에서 지원하고 있다.

<select name="hobby">      <option value="독서">독서</option>      <optgroup label="스포츠">         <option value="야구">야구</option>         <option value="축구">축구</option>      </optgroup>      <option value="음악감상">음악감상</option> </select>

스포츠라는 카테고리를 만들고 야구와 축구 옵션을 추가하였습니다.

독서 야구 축구 음악감상

 

 

출처 : http://www.homejjang.com/05/select.php