HTML 폼 드롭다운 — form · select · option · selected 완전 정리

 

 

Web Development · HTML Form

HTML 드롭다운 메뉴 —
form · select · option · selected 완전 정리

사용자가 여러 항목 중 하나를 고르게 하는 가장 흔한 입력 폼

시작 오늘 분석할 코드

색상 3개 중 하나를 선택하는 드롭다운(dropdown) 메뉴를 만드는 코드. 폼 입력 요소의 가장 기본 패턴이자, 거의 모든 웹사이트의 가입·주문 화면에서 마주치는 그것이다.

<form> <h2>색상 선택</h2> <select> <option value="black" selected>블랙(기본)</option> <option value="silver">실버</option> <option value="gold">로즈골드</option> </select> </form>

실제 출력 결과

색상 선택

블랙(기본) 실버 로즈골드

용어 용어 정리

form데이터 전송용 컨테이너

select드롭다운 메뉴 컨테이너

option선택 가능한 항목 하나

value서버로 전송될 실제 값

selected처음부터 선택된 상태

불린 속성값 없이 존재만 — 켜짐 표시

---

1 <form> — 데이터 전송 컨테이너

<form>은 사용자 입력을 모아 서버로 보내는 영역이다. 회원가입, 로그인, 주문, 검색 등 모든 입력 인터페이스의 기반.

※ form 안에 들어가는 입력 요소(input·select·textarea 등)에 사용자가 값을 채우면, 폼 제출 시 그 값이 서버로 전송된다.

<form action="/submit" method="post"> <!-- 입력 요소들 --> <button type="submit">전송</button> </form>

속성	역할
action	데이터를 보낼 서버 주소
method	전송 방식 (GET / POST)
name	폼 이름 (JS에서 식별)

---

2 <select> — 드롭다운의 핵심

<select>를 클릭하면 아래로 펼쳐지는 메뉴(드롭다운)가 나타난다. 사용자는 그 중 하나를 골라야 하고, 골라진 값이 폼 데이터로 전송된다.

※ select는 화면 공간을 적게 쓰면서 많은 옵션을 제공할 수 있다는 게 장점. 라디오 버튼이나 체크박스보다 공간 효율적.

---

3 <option> — 화면 표시와 실제 값의 분리

<option>은 한 줄이지만 두 가지 정보를 담는다. 사용자에게 보일 텍스트와 서버로 보낼 실제 값.

<option value="black">블랙(기본)</option> │ │ │ └─ 화면에 보이는 글자 (사용자용) └─ 서버로 전송될 실제 값 (코드용)

사용자가 보는 것

"블랙(기본)"
한국어 설명
괄호·이모지 OK
읽기 쉽게

서버가 받는 것

"black"
코드 친화적 값
영문·숫자
DB 저장용

※ 분리하는 이유: 국제화에 유리. 한국어/영어 페이지가 따로 있어도 서버 코드는 "black" 하나만 받으면 됨.

※ value 속성을 생략하면 화면 텍스트가 그대로 전송된다. <option>블랙</option> → 서버에 "블랙" 전송. 한국어가 URL에 포함되면 인코딩 이슈 가능.

---

4 selected — 불린 속성 (Boolean Attribute)

selected는 값이 없는 속성이다. 그냥 적기만 하면 "이 항목은 처음부터 선택된 상태"를 의미한다.

✓ 셋 다 같은 의미 <option value="black" selected> <option value="black" selected=""> <option value="black" selected="selected">

이런 속성을 불린 속성(Boolean Attribute)이라고 한다. 존재하면 켜짐, 없으면 꺼짐.

대표적인 불린 속성	역할
selected	option 처음부터 선택
checked	checkbox·radio 처음부터 체크
disabled	입력 비활성화
readonly	읽기 전용
required	필수 입력
autofocus	로드 시 자동 포커스

※ selected="false"로 적어도 효과 없다. 속성이 존재하면 무조건 true. 끄려면 속성 자체를 빼야 함.

반응형

---

5 다중 선택 — multiple 속성

기본 select는 한 개만 선택 가능. multiple 속성을 추가하면 Ctrl(Cmd) 클릭으로 여러 개 선택 가능해진다.

<select multiple size="5"> <option>빨강</option> <option>초록</option> <option>파랑</option> </select>

size 속성으로 한 번에 보일 항목 개수도 지정 가능. multiple과 함께 쓰면 드롭다운 대신 리스트 박스 형태가 된다.

---

6 그룹화 — <optgroup>

옵션이 많을 때 카테고리별로 묶어 보여주려면 <optgroup>을 사용한다.

<select> <optgroup label="과일"> <option>사과</option> <option>바나나</option> </optgroup> <optgroup label="채소"> <option>당근</option> <option>배추</option> </optgroup> </select>

---

7 자주 하는 실수

실수	증상	해결
select 안에 div 넣음	HTML 검증 오류	option만 직접 자식으로
value 생략하고 한국어 사용	URL 인코딩 문제	value는 영문으로
selected 여러 option에	마지막 것만 적용	selected는 1개만 (multiple 제외)
name 속성 없음	서버에서 값 식별 불가	select에 name 필수
form 밖에 select	전송 안 됨	입력 요소는 form 안에

---

핵심 한 줄 요약

<form>데이터 전송 컨테이너

<select>드롭다운 메뉴

<option>선택지 — value(서버용) + 텍스트(사용자용)

selected불린 속성 — 처음부터 선택

multiple여러 개 선택 허용

<optgroup>옵션 카테고리 그룹화

value 분리화면 텍스트 ≠ 서버 전송 값

Tags

#form #select #option #selected #HTML #드롭다운 #옵션 #선택메뉴 #폼 #value #불린속성 #사용자입력 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

form, select, option, selected, HTML, 드롭다운, 옵션, 선택메뉴, 폼, value, 불린속성, 사용자입력, 웹개발, 티스토리