프로그래밍/HTML

HTML - 셀렉트박스(select)

가카리 2013. 11. 29. 10:50
반응형

<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

반응형