HTML 드롭다운 단추를 구현하는 select 태그

오늘 HTML 이야기는 드롭다운 단추를 구현하는 select 태그에 대해 간단하게 살펴보도록 하자.

드롭다운 단추는 다중의 선택지들 중에서 선택하는 폼으로 공간을 절약하게 해 주는 태그이기도 하다. 다른 폼 태그와 마찬가지로 서버에 특정 값이 전송이 되기 때문에 반드시 name 값과 value 값을 적용해 주어야 한다.

거두절미.. 코딩과 결과물이다.

당연한 이야기이지만.. 폼(form) 태그 안에 select 태그가 있어야 한다.

- select 태그 안의 name 값은 유저가 선택한 값과 함께 서버에서 어떤 폼인지를 구분하는 태그임으로 반드시 넣어줘야 한다.

- 세부적인 선택지는 option 값으로 하나씩 넣어준다. 마찬가지로 value 값을 반드시 줘야 한다.

그리 구현이 어렵지는 않다.

좀더 예쁘게(?) 다듬는 것은 CSS를 통하길 권한다. 최근 HTML은 메인 태그만 코딩을 하고 세부적인 외모의 조정은 CSS로 하는 추세이고 이를 권장하는 만큼 표준을 따라주는게 코딩에서는 바람직하다 하겠다.