셀렉트 태그: 플레이스 홀더 기능 추가하기

Select tag

select 태그는 드롭다운 목록을 만들 때 사용합니다. 양식이 제출된 후 양식 데이터를 참조하려면 속성 name이 필요합니다. 속성을 생략하면 name드롭다운 목록의 데이터가 제출되지 않습니다.

select태그 기본 사용법

<select name="pets" id="pets">
  <option value="cats">cats</option>
  <option value="dogs">dogs</option>
  <option value="fishes">fishes</option>
  <option value="birds">birds</option>
</select>

select box에 placeholder기능 추가하기

1. placeholder에 넣을 문구가 값으로 들어있는 option을 생성하고 selected를 준다
   해당 옵션은 value값을 주지 않는다.

<select name="pets" id="pets">
  <option selected value="=">pets</option>
  <option value="dogs">dogs</option>
  <option value="fishes">fishes</option>
  <option value="birds">birds</option>
</select>

2. 값이 없는 항목은 제출되지 않도록 required을 부여한다.

<select name="pets" required id="pets">
  <option selected value="">pets</option>
  <option value="dogs">dogs</option>
  <option value="fishes">fishes</option>
  <option value="birds">birds</option>
</select>

3. 해당 option에 disabled를 주고 css로 보이지 않도록 display:none 처리한다.

html

<select name="pets" required id="pets">
  <option selected disabled value="">pets</option>
  <option value="dogs">dogs</option>
  <option value="fishes">fishes</option>
  <option value="birds">birds</option>
</select>

css

select option[value=""][disabled] {
	display: none;
}