option element - by. UXKM

option element 설명

<option> 요소는 옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)에서 사용되는 하나의 옵션을 정의할 때 사용합니다.
이러한 <option> 요소는 <select> 요소나 <datalist> 요소 내부에만 위치할 수 있습니다.
<option> 요소는 아무런 속성도 명시하지 않은 채 사용할 수 있지만, 서버로 제출되는 값을 명시하는 value 속성은 명시하는 것이 일반적입니다.
만약 옵션의 개수가 많다면, <optgroup> 요소를 사용하여 관련된 옵션들을 좀 더 보기 좋게 서로 묶을 수 있습니다.

9.7.1. option 속성

[disabled] <option disabled>

<option> 요소의 disabled 속성은 해당 옵션이 비활성화됨을 명시합니다.
disabled 속성이 명시된 옵션은 사용할 수 없으며, 사용자가 클릭할 수도 없습니다.
따라서 이 속성을 사용하면 특정 조건이 충족될 때까지 사용자가 해당 옵션을 클릭할 수 없도록 설정하고, 특정 조건이 충족되면 자바스크립트 등으로 disabled 속성값을 삭제하여 사용자가 해당 옵션을 다시 사용할 수 있도록 조절할 수 있습니다.
disabled 속성은 불리언(boolean) 속성입니다.
불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됩니다.

[label] <option label="텍스트">

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

[selected] <option selected>

selected 속성은 페이지가 로드될 때 옵션 중에서 미리 선택되어지는 옵션을 명시합니다.
selected 속성이 명시된 옵션은 드롭다운 리스트에 가장 먼저 표시되며, 페이지가 로드된 후에도 자바스크립트를 사용하여 selected 속성을 설정할 수 있습니다.
disabled 속성은 불리언(boolean) 속성입니다.
불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됩니다.

[value] <option value="값">

value 속성은 해당 옵션이 선택될 때 서버로 제출되는 값을 명시합니다.
<option> 태그와 </option> 태그 사이의 텍스트는 단지 브라우저가 드롭다운 리스트에 표시할 내용이며, value 속성값은 폼을 제출할 때 서버로 보내지는 값입니다.
만약 value 속성이 명시되지 않는다면, 해당 값은 <option> 요소 내의 텍스트로 자동 설정됩니다.