5.1 <select> 요소
HTML 폼에서 <select>
, <option>
그리고 <optgroup>
요소는 드롭다운 리스트와 다중 선택 리스트를 만드는 데 사용돼. 덕분에 사용자가 미리 정해진 값의 세트에서 하나 또는 여러 옵션을 선택할 수 있어.
<select>
요소는 드롭다운 리스트를 만드는 데 사용돼. 이 요소는 선택할 수 있는 가능성 있는 옵션들을 나타내는 하나 이상의 <option>
요소를 포함하고 있어.
사용 예시:
<label for="country">나라 선택:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="mx">Mexico</option>
</select>
<select>의 주요 속성
name
속성: 폼 요소의 이름을 설정하며 선택된 값과 함께 서버로 전송돼.
<select name="country"></select>
id
속성: 요소의 고유 식별자를 설정하며, <label>
요소와 연결하는 데 사용돼.
<select id="country" name="country"></select>
multiple
속성: 사용자가 여러 옵션을 동시에 선택할 수 있도록 해. 외관상으로는 리스트가 여러 줄로 표시돼.
<select name="fruits" id="fruits" multiple>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>
size
속성: 드롭다운 리스트에서 보이는 줄 수를 설정해. 스크롤이 가능한 리스트를 만드는 데 유용해.
<select name="cities" size="4">
<option value="ny">New York</option>
<option value="la">Los Angeles</option>
<option value="chicago">Houston</option>
</select>
5.2 <option> 요소
<option>
요소는 사용자가 선택할 수 있는 각 옵션을 정의하기 위해 <select>
안에 사용돼.
사용 예시:
<select name="color">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
<option>의 주요 속성:
value
속성: 이 옵션 선택 시 서버로 전송될 값을 설정해.
<option value="red">Red</option>
selected
속성: 기본적으로 이 옵션이 선택되어야 하는지를 결정해.
<option value="green" selected>Green</option>
disabled
속성: 이 옵션을 선택 불가능하게 만들어.
<option value="blue" disabled>Blue</option>
5.3 <optgroup> 요소
<optgroup>
요소는 <select>
내에서 관련된 옵션들을 그룹화하는 데 사용돼. 이 요소를 통해 드롭다운 리스트를 더 조직적이고 이해하기 쉽게 카테고리로 나눌 수 있어.
사용 예시:
<select name="car">
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
</optgroup>
<optgroup label="Japanese Cars">
<option value="toyota">Toyota</option>
<option value="honda">Honda</option>
<option value="nissan">Nissan</option>
</optgroup>
</select>
<optgroup>의 주요 속성:
label
속성: 옵션 그룹의 제목을 설정해.
<optgroup label="German Cars"></optgroup>
disabled
속성: 이 그룹 내의 모든 옵션을 선택 불가능하게 만들어.
<select name="car">
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
</optgroup>
<optgroup label="Japanese Cars" disabled>
<option value="toyota">Toyota</option>
<option value="honda">Honda</option>
<option value="nissan">Nissan</option>
</optgroup>
</select>
<select>, <option> 및 <optgroup> 사용에 대한 유용한 팁
- 논리적 그룹화:
<optgroup>
을 사용하여 관련된 옵션들을 논리적으로 그룹화해봐. 이렇게 하면 폼이 사용자에게 더 편리하게 느껴질 거야. - 다중 선택: 사용자가 여러 옵션을 선택할 수 있도록 하려면,
<select>
에multiple
속성을 사용해봐. - 접근성: 폼 요소의 접근성을 향상시키기 위해
id
및label
속성을 사용해. 올바른label
사용은 보조 기술을 사용하는 사용자를 포함해 모든 사용자와의 상호작용을 개선시킬 수 있어. - 스타일링: 드롭다운 리스트와 다중 선택 리스트의 외관을 개선하기 위해 CSS를 사용해. 예를 들어:
select {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}