[HTML5] 드롭다운 메뉴 <select><option value="option1">옵션1</option></select>

"select" 요소라고 불리는 드롭다운 메뉴를 통해 사용자가 사전 정의된 옵션 목록에서 하나의 옵션을 선택할 수 있습니다.

이러한 유형의 입력은 사용자가 여러 선택 사항 중에서 단일 항목을 선택해야 하는 양식에서 일반적으로 사용됩니다.

드롭다운 메뉴를 만드는 방법은 다음과 같습니다.

 

<select name="color" id="color">
  <option value="red">빨간색</option>
  <option value="green">녹색</option>
  <option value="blue">파란색</option>
</select>

1. <select>: `<select>` 요소는 드롭다운 메뉴의 컨테이너입니다. 선택 가능한 옵션 목록을 정의합니다. `<select>` 요소에 속성을 추가하여 해당 동작과 모양을 맞춤설정할 수 있습니다.

2. <option>: `<option>` 요소는 드롭다운 메뉴 내의 개별 항목입니다. 각 `<옵션>`은 사용자가 선택할 수 있는 선택 사항을 나타냅니다. `value` 속성은 양식이 제출될 때 서버로 전송되는 각 옵션과 관련된 값을 지정합니다. `<option>` 태그 내의 텍스트는 드롭다운 목록에서 사용자에게 표시됩니다.

    - 예를 들어 `<option value="option1">옵션 1</option>`은 값이 "option1"이고 드롭다운에 "Option 1"이라는 텍스트가 표시된 옵션을 나타냅니다.

 

<select> 요소의 속성(선택사항):

• selected: selected 속성을 <option> 요소 중 하나에 추가하여 페이지가 로드될 때 해당 요소가 미리 선택되어야 함을 나타낼 수 있습니다. <select> 요소 내에서 <option> 하나만 selected 속성을 가질 수 있습니다.

<select>
  <option value="apple">사과</option>
  <option value="banana" selected>바나나</option>
  <option value="cherry">체리</option>
</select>

 

- name: `name` 속성은 드롭다운 메뉴에 이름을 할당합니다. 이 이름은 양식을 제출할 때 선택한 옵션을 식별하는 데 사용됩니다.

예를 들어 `<select name="choices">`입니다.

- id: `id` 속성은 드롭다운에 대한 고유 식별자를 제공합니다. 이는 스타일 지정이나 스크립팅 목적으로 또는 라벨을 드롭다운과 연결하는 데 유용할 수 있습니다.

 

<option> 요소의 속성(선택 사항):

<select>
  <option value="usa">미국</option>
  <option value="canada">캐나다</option>
  <option value="mexico" disabled>멕시코(사용할 수 없음)</option>
</select>

 

- selected: `selected` 속성을 하나의 `<option>`에 추가하여 페이지가 로드될 때 기본 선택 옵션으로 만들 수 있습니다. 예를 들어 `<option value="option1" selected>옵션 1</option>`입니다.

- disabled: `disabled` 속성을 `<option>`에 추가하여 선택 불가능하게 만들 수 있습니다. 사용자는 비활성화된 옵션을 선택할 수 없습니다. 예를 들어 `<option value="mexico" disabled>멕시코(사용할 수 없음)</option>`입니다.

결과 드롭다운 메뉴에는 사용자가 선택할 수 있는 옵션 목록이 제공됩니다. 사용자가 옵션을 선택하면 해당 '값'은 일반적으로 양식이 제출될 때 양식 데이터의 일부로 서버에 전송됩니다.

드롭다운 메뉴는 다목적이며 국가 선택, 카테고리 선택, 사이즈 선택 등 다양한 목적으로 사용할 수 있습니다. 양식을 체계적이고 간결하게 유지하면서 데이터를 입력하는 사용자 친화적인 방법을 제공합니다.