HTML 폼 그룹화 — fieldset · legend · label · input color 완전 정리

 

 

Web Development · HTML Form

HTML 폼 그룹화 —
fieldset · legend · label · input color 완전 정리

관련된 입력을 묶고 라벨과 색상 선택까지

시작 오늘 분석할 코드

설문 폼을 만들면서 입력 요소들을 의미 있는 그룹으로 묶고, 색상 선택기를 추가하는 코드. fieldset·legend·label 세 가지 폼 시맨틱 태그가 모두 등장한다.

<form> <fieldset> <legend>과 티셔츠 설문</legend> <p>올해 과 티(T)를 만들려고 합니다. 원하는 색상을 추천해 주세요.</p> <label>선호색상 <input type="color" value="#00ff00"></label> </fieldset> </form>

실제 출력 결과

과 티셔츠 설문

올해 과 티(T)를 만들려고 합니다. 원하는 색상을 추천해 주세요.

선호색상

용어 용어 정리

fieldset관련 입력 요소를 묶는 박스

legendfieldset의 제목 (테두리에 박힘)

label입력 요소 설명 라벨

input type=color색상 선택기

RGBRed·Green·Blue 색 모델

16진수#RRGGBB 형식의 색 코드

---

1 <fieldset> — 폼 안의 그룹 박스

<fieldset>은 관련 있는 입력 요소들을 시각적·의미적으로 묶는 컨테이너다. 긴 폼에서 "이 부분은 배송지", "이 부분은 결제 정보" 같이 섹션 단위로 분리할 때 쓴다.

※ fieldset은 자동으로 회색 테두리를 그려준다. 별도 스타일 없이도 그룹임이 한눈에 보인다.

왜 div가 아니라 fieldset?

<div> — 의미 없음

단순 박스 컨테이너
스크린 리더 안내 X
그냥 시각적 묶기

<fieldset> — 의미 있음

"폼 그룹"임을 명시
스크린 리더가 그룹 안내
접근성 ↑

---

2 <legend> — 테두리에 박힌 제목

<legend>는 fieldset의 제목이다. 특이한 점: 테두리 위에 겹쳐서 표시된다. 별도 CSS 없이도 그룹의 라벨이 자연스럽게 박스 위에 자리 잡는다.

┌─[ 과 티셔츠 설문 ]──────────┐ ← legend가 테두리에 박힘 │ │ │ 올해 과 티를 만들려고 ... │ │ 선호색상 [█] │ │ │ └──────────────────────────────┘

※ legend는 fieldset의 첫 번째 자식이어야 한다. 다른 위치에 두면 효과가 깨진다.

---

3 <label> — 입력의 이름표

<label>은 입력 요소(input, select, textarea 등)에 이름표를 붙이는 태그다. 단순 텍스트 표시 이상의 역할을 한다.

역할	설명
의미 연결	"이 텍스트가 이 입력의 라벨"임을 명시
클릭 영역 확장	라벨 텍스트 클릭해도 입력에 포커스
스크린 리더	입력 위에 포커스 가면 라벨 자동 안내
체크박스 편의성	라벨 클릭으로 체크박스 토글 가능

label과 input 연결 방법 2가지

방법 1: label 안에 input 포함 (이번 코드) <label>선호색상 <input type="color"></label> 방법 2: for + id 매칭 (분리 가능) <label for="color1">선호색상</label> <input id="color1" type="color">

※ 방법 2가 더 유연하다. CSS·JS로 라벨과 입력을 따로 다루기 쉬움. 모던 표준 권장.

---

4 <input type="color"> — 컬러 피커

이 한 줄로 OS 기본 색상 선택기가 호출된다. 클릭하면 시스템 컬러 피커가 떠서 사용자가 색을 고를 수 있다.

※ value="#00ff00"으로 초기값을 지정. 사용자가 다른 색을 선택하지 않으면 이 값이 그대로 전송된다.

input의 다양한 type

type	UI	용도
text	일반 입력란	기본 텍스트
password	점으로 가려짐	비밀번호
email	이메일 형식 검증	이메일 입력
number	숫자만 입력	수량·나이
color	색상 피커 (이번)	색 선택
date	날짜 선택기	날짜
range	슬라이더	0~100 같은 값
file	파일 선택	업로드
checkbox	체크박스	다중 선택
radio	라디오 버튼	단일 선택

반응형

---

5 색상 코드 #00ff00 읽기

웹의 색은 RGB(빨·녹·파)로 표현된다. 16진수 6자리는 두 자리씩 R·G·B 값을 나타낸다.

#00ff00 │ │ │ └── B (파랑) = 00 = 0 │ │ └─── G (초록) = ff = 255 │ └──── R (빨강) = 00 = 0 └────── # (16진수 시작 표시) → 빨강 0, 초록 255, 파랑 0 = 순수 초록색

색상명	16진수	RGB 값
검정	#000000	0, 0, 0
흰색	#ffffff	255, 255, 255
빨강	#ff0000	255, 0, 0
초록	#00ff00	0, 255, 0
파랑	#0000ff	0, 0, 255
노랑	#ffff00	255, 255, 0 (R+G)
회색	#888888	136, 136, 136

※ 16진수: 0~9 다음 a, b, c, d, e, f가 와서 0~15(0x0~0xf)를 한 자리로 표현. ff = 255가 최대값.

---

6 색상 표기의 다른 형식들

형식	예시 (초록)	특징
16진수	#00ff00	가장 흔함
축약 16진수	#0f0	같은 자리 반복 시 축약
색 이름	green	140여 개 표준
rgb()	rgb(0, 255, 0)	0~255 직접 입력
rgba()	rgba(0, 255, 0, 0.5)	마지막은 투명도
hsl()	hsl(120, 100%, 50%)	색조-채도-명도

---

7 자주 하는 실수

실수	증상	해결
legend가 첫 자식 아님	테두리에 안 박힘	fieldset의 첫 줄에
label과 input 연결 X	접근성 ↓, 클릭 영역 좁음	안에 포함 또는 for+id
fieldset 대신 div	의미 정보 없음	폼 그룹은 fieldset
input type=color에 명칭 사용	오류	16진수 또는 keyword만
fieldset 안에 button까지 모두	구조 어색	제출 버튼은 fieldset 밖

---

핵심 한 줄 요약

<fieldset>관련 입력 묶는 그룹 박스

<legend>fieldset 제목 — 첫 자식 필수

<label>입력의 이름표 — 클릭 영역 확장

label 연결안에 포함 또는 for+id

type="color"OS 색상 선택기 호출

#RRGGBBRGB 각 0~255 (16진수 ff)

접근성의미 있는 폼 태그가 핵심

Tags

#fieldset #legend #label #input #color #HTML #색상선택 #폼그룹 #RGB #16진수 #폼 #접근성 #웹개발 #티스토리

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

fieldset, legend, label, input, color, HTML, 색상선택, 폼그룹, RGB, 16진수, 폼, 접근성, 웹개발, 티스토리