select, option, optgroup

<select id(for 접근성) name(for 서버 전송시 값의 이름)>
	<options>옵션명</option>
	<options>옵션명</option>
</select>

요약

<select> 속성

• 폼 제어 관련: name, required, disabled, autofocus

• 동작 제어 관련: multiple, size

<option> 속성

• 옵션 값: value, selected

• 상태 제어: disabled

• 추가 그룹화 가능: <optgroup>을 사용해 구조화.

<select>의 속성

1. 주요 속성

• name: 서버로 제출할 때 이 <select>의 이름으로 데이터를 전송.

• id: <label>과 연결하거나, JavaScript에서 요소를 참조할 때 사용.
📌
접근성 향상: label for=””와 select id=””를 일치시키기.

• multiple: 다중 선택 가능하게 함. 기본적으로 단일 선택만 가능.

• size: 표시할 옵션의 개수를 설정. (기본값: 1)

<select name="cars" multiple size="3">
  <option value="volvo">Volvo</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option>
</select>

• autofocus: 페이지 로드 시 <select>에 포커스.

• required: 값이 반드시 선택되도록 설정.

• disabled: <select>를 비활성화.

<option>의 속성

1. 주요 속성

• value: 선택된 옵션이 서버로 전송될 때의 값. (기본값: <option>의 텍스트)

<option value="apple">Apple</option>

• selected: 기본 선택 옵션을 설정. 페이지 로드 시 이 옵션이 선택됨. 지정 안하면 가장 위에 옵션이 선택됨.

<option value="banana" selected>Banana</option>

• disabled: 특정 옵션을 비활성화.

<option value="mango" disabled>Mango (Unavailable)</option>

2. 자주 쓰는 HTML 구조

• <optgroup>: 옵션을 그룹으로 묶을 때 사용.

• <hr>: 시각적 구분을 위한 구분선 추가.
• select 안에 <hr>을 넣을 수 있게됨. (safari 17, chrome 119)
📌
크롬과 사파리는 지원하지만, HTML5 표준은 아님. 따라서 모든 브라우저 호환성을 생각하면 CSS로 푸는게 맞음.

<select>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
  </optgroup>
  <hr/>
  <optgroup label="Vegetables">
    <option value="carrot">Carrot</option>
    <option value="spinach">Spinach</option>
  </optgroup>
</select>