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