003. <option>

#1 <option disabled>

 

<option> 태그의 disabled 속성은 해당 옵션이 비활성화됨을 명시한다.

 

disabled 속성이 명시된 옵션은 사용할 수 없으며, 사용자가 클릭할 수도 없다.

 

따라서 이 속성을 사용하면 특정 조건이 충족될 때까지 사용자가 해당 옵션을 클릭할 수 없도록 설정하고, 특정 조건이 충족되면 자바스크립트 등으로 disabled 속성값을 삭제하여 사용자가 해당 옵션을 다시 사용할 수 있도록 조절할 수 있다.

 

disabled 속성은 불리언(boolean) 속성이다.

불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 된다.

 

 

문법: 

<option disabled>

 

예제:

<select>
    <option value="americano">아메리카노</option>
    <option value="caffe latte" disabled>카페라테</option>
    <option value="cafe au lait">카페오레</option>
    <option value="espresso" disabled>에스프레소</option>
</select>

예제 코드구현

HTML과 XHTML에서의 차이점:

<option disabled="disabled">

 

 

 

#2 <option label = " ">

 

<option> 태그의 label 속성은 해당 옵션의 라벨(label)을 명시한다.

 

만약 label 속성이 명시되지 않는다면, 해당 값은 <option> 요소 내의 텍스트로 자동 설정된다.

 

문법:

<option label="텍스트">

 

속성값:

속성값	설명
텍스트	해당 옵션의 라벨(label)을 명시함.

 

예제:

<select>
    <option label="Americano">아메리카노</option>
    <option label="Cafe Latte">카페라테</option>
    <option label="Cafe Au Lait">카페오레</option>
    <option label="Espresso">에스프레소 리스트레토</option>
</select>

예제코드 구현결과

 

 

 

#3 <option selected>

 

<option> 태그의 selected 속성은 페이지가 로드될 때 옵션 중에서 미리 선택되어지는 옵션을 명시한다.

 

selected 속성이 명시된 옵션은 드롭다운 리스트에 가장 먼저 표시되며, 페이지가 로드된 후에도 자바스크립트를 사용하여 selected 속성을 설정할 수 있다.

 

selected 속성은 불리언(boolean) 속성이다.

불리언 속성은 해당 속성을 명시하지 않으면 속성값이 '자동으로 false' 값을 가지게 되며, 명시하면 '자동으로 true' 값을 가지게 된다.

 

 

문법:

<option selected>

 

 

예제:

<select>
    <option value="americano">아메리카노</option>
    <option value="caffe latte">카페라테</option>
    <option value="cafe au lait" selected>카페오레</option>
    <option value="espresso">에스프레소</option>
</select>

예제코드 구현결과

 

 

 

#4 <option value = "값">

 

<option> 태그의 value 속성은 해당 옵션이 선택될 때 서버로 제출되는 값을 명시한다.

 

<option> 태그와 </option> 태그 사이의 텍스트는 단지 브라우저가 드롭다운 리스트에 표시할 내용이며, value 속성값은 폼을 제출할 때 서버로 보내지는 값이다.

만약 value 속성이 명시되지 않는다면, 해당 값은 <option> 요소 내의 텍스트로 자동 설정된다.

 

 

문법: 

<option value="값">

 

 

속성값:

속성값	설명
값	해당 옵션이 선택될 때 서버로 제출되는 값을 명시함.

 

 

예제:

<form action="/examples/media/action_target.php">
    <select name="order">
        <option value="americano">아메리카노</option>
        <option value="caffe latte">카페라테</option>
        <option value="cafe au lait">카페오레</option>
        <option value="espresso">에스프레소</option>
    </select><br>
    <input type="submit">
</form>

예제코드 구현결과