option 태그 속성 정리

<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>

---

---

<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>

---

---

<option> 태그의 label 속성

정의 및 특징

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

 

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

문법

<option label="텍스트">

예제

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

---

<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>