HTML 옵션 그룹 · 자동완성 — optgroup · datalist 완전 정리

Web Development · HTML Form

HTML 옵션 그룹 · 자동완성 —
optgroup · datalist 완전 정리

드롭다운을 카테고리로 묶고 검색 가능 입력 만들기

시작 오늘 분석할 코드

드롭다운을 단순히 평면 리스트가 아니라 "공과대학 / 인문대학"처럼 카테고리로 묶고, 입력란에 관련 단어 자동완성이 뜨게 만드는 코드다.

<select id="class"> <optgroup label="공과대학"> <option value="archi">건축공학과</option> <option value="computer" selected>컴퓨터공학과</option> </optgroup> <optgroup label="인문대학"> <option value="history">사학과</option> </optgroup> </select> <!-- datalist: 자동완성 --> <input type="text" id="interest" list="choices"> <datalist id="choices"> <option value="grammar" label="문법"></option> <option value="voca" label="어휘"></option> <option value="speaking" label="회화"></option> </datalist>

실제 출력 결과

학과 (옵션그룹): 건축공학과 기계공학과 컴퓨터공학과 사학과 철학과

관심분야 (자동완성):

용어 용어 정리

optgroupoption들을 카테고리로 묶기

datalist자동완성 추천 목록

option선택 가능한 항목

label 속성optgroup·option의 표시 이름

list 속성input과 datalist 연결

자동완성입력 중 추천 보여주기

---

1 <optgroup> — 옵션을 카테고리로 묶기

옵션이 많으면 사용자가 찾기 어렵다. <optgroup>은 관련된 option들을 그룹으로 묶고 카테고리 이름을 붙여준다.

※ 그룹 이름은 회색 굵은 글씨로 표시되고, 그룹명 자체는 선택할 수 없다 (라벨 역할). 사용자는 그룹 안 option만 선택 가능.

┌─ 학과 선택 ──────┐ │ 공과대학 │ ← optgroup label (선택 불가, 굵은 회색) │ 건축공학과 │ ← 선택 가능 │ 컴퓨터공학과 │ │ 인문대학 │ ← 다른 그룹의 라벨 │ 사학과 │ │ 철학과 │ └──────────────────┘

※ optgroup 사용 패턴

• 나라 → 도시 (한국 → 서울/부산, 미국 → 뉴욕/LA)
• 대분류 → 소분류 (전자제품 → 노트북/태블릿)
• 학년 별 (1학년 → 과목 / 2학년 → 과목)
• 옵션이 10개 이상 → optgroup 권장

※ optgroup은 중첩이 안 된다. optgroup 안에 또 optgroup 두면 무시됨. 한 단계 그룹화만 가능.

---

2 <datalist> — 입력 + 추천 자동완성

<datalist>는 입력란에 "이런 것들 자주 쓰니 추천해줄게"라며 옵션을 띄워주는 태그다. select와는 다르다.

<select>

목록 중 반드시 하나 선택
드롭다운으로 펼침
자유 입력 X
고정된 선택지

<datalist>

추천만 하고 자유 입력 OK
입력 시작하면 매칭 표시
추천 외 입력도 가능
자유도 + 편의성

※ 사용자 경험: input에 "g" 입력 → "grammar"가 추천 표시됨 → 클릭하면 자동 입력. 안 클릭하고 직접 적어도 OK.

---

3 input과 datalist 연결

둘은 list 속성과 id 매칭으로 연결된다.

<input list="choices"> ← input의 list 속성 │ ↓ 매칭 ↓ │ <datalist id="choices"> ← datalist의 id <option value="grammar"> <option value="voca"> </datalist>

※ datalist는 화면에 직접 보이지 않는다. 연결된 input을 클릭/입력해야 추천 목록이 떠오름. 그래서 어디 두든 상관없지만 보통 input 바로 아래에 둔다.

---

4 option의 value vs label

이번 코드에서 <option value="grammar" label="문법">처럼 둘 다 쓰는 패턴이 등장한다. 둘의 역할은 다르다.

속성	역할
value	실제 데이터 값 (서버 전송용 + 자동완성 매칭)
label	표시될 이름 (브라우저별로 다르게 보임)
태그 사이 텍스트	<option>텍스트</option> 형태 — 표시용

※ datalist에서 label 속성은 브라우저마다 표시 방식이 다르다. Chrome은 value만 보여주고, Firefox는 label도 보여줌. 일관성 위해서는 텍스트로 적는 게 안전: <option value="grammar">문법</option>

---

5 select vs datalist — 실무 선택 기준

상황	추천
옵션이 10개 이내, 고정된 선택지	select
옵션이 많고 검색하고 싶음	datalist
사용자가 새 값을 입력할 수도 있음	datalist
국가, 통화 등 표준 목록	select + optgroup
최근 검색어, 자주 쓰는 값	datalist
옵션이 100개 이상	JS 기반 검색 라이브러리

---

6 자주 하는 실수

실수	증상	해결
optgroup label 누락	그룹명 안 보임	label 속성 필수
optgroup 안에 다른 optgroup	무시됨	한 단계만 가능
input list와 datalist id 불일치	자동완성 안 뜸	정확히 일치
datalist에 value 없음	아무것도 추천 안 됨	value 속성 필수
datalist를 select 대용으로 기대	자유 입력이 가능해버림	강제 선택은 select

---

핵심 한 줄 요약

<optgroup>option 카테고리 그룹화 (한 단계만)

label (optgroup)그룹 이름 — 선택 불가, 굵게 표시

<datalist>입력 자동완성 추천 목록

list 속성input과 datalist 연결 (id 매칭)

select vs datalist강제 선택 / 자유 입력 + 추천

option value매칭·전송용 실제 값

Tags

#optgroup #datalist #option #select #input #list속성 #HTML #옵션그룹 #자동완성 #카테고리 #폼 #웹개발 #티스토리

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

optgroup, datalist, option, select, input, list속성, HTML, 옵션그룹, 자동완성, 카테고리, 폼, 웹개발, 티스토리