HTML에서 드롭다운 목록에 옵션을 추가하려면 <option> 태그를 사용합니다. HTML의 <option> 태그는 폼(form) 내부에서 사용되며, 드롭다운 목록에 표시될 각각의 선택 항목을 정의하는 역할을 합니다.
<option> 태그의 주요 속성
<option> 태그는 다음과 같은 속성들을 추가로 지원합니다.
| 속성 | 값 | 설명 |
|---|---|---|
| disabled | disabled | 해당 입력 컨트롤을 비활성화합니다. 비활성화된 옵션은 사용자가 변경할 수 없으며, 포커스를 받을 수 없고 Tab 키 이동 시에도 건너뛰어집니다. |
| label | 텍스트 | <optgroup> 태그를 사용할 때 표시할 레이블(이름)을 정의합니다. |
| selected | selected | 페이지가 로드될 때 기본적으로 선택되는 옵션을 지정합니다. |
| value | 텍스트 | 폼 제출 시 서버로 전송될 해당 옵션의 값을 지정합니다. |
사용 예제
다음 코드를 실행하여 HTML에서 <option> 요소가 실제로 어떻게 동작하는지 확인해 보세요.
<!DOCTYPE html> <html> <head> <title>HTML option Tag</title> </head> <body> <form action = "/cgi-bin/dropdown.cgi" method = "post"> <select name = "dropdown"> <option value = "HTML" selected>HTML</option> <option value = "Ruby">Ruby</option> </select> <input type = "submit" value = "Submit" /> </form> </body> </html>
위 예제에서는 <select> 태그로 드롭다운 목록을 만들고, 그 안에 'HTML'과 'Ruby' 두 개의 옵션을 배치했습니다. 'HTML' 옵션에는 selected 속성이 적용되어 있으므로 페이지가 로드되면 해당 항목이 기본 선택 상태로 표시됩니다. 사용자가 항목을 선택한 후 Submit 버튼을 누르면, 선택된 옵션의 value 값이 서버로 전송됩니다.