<fieldset> — 폼 태그 도감

올바른 사용

legend로 그룹의 라벨 (필수에 가까움)

라디오 그룹은 반드시 fieldset

체크박스 그룹도 fieldset 권장

긴 폼의 섹션 분리에도 사용

배송 방법 라디오 그룹

<fieldset>
  <legend>배송 방법</legend>
  <label>
    <input type="radio" name="shipping" value="standard" />
    일반 배송 (3-5일)
  </label>
  <label>
    <input type="radio" name="shipping" value="express" />
    빠른 배송 (1-2일)
  </label>
</fieldset>

라디오 그룹의 표준. legend가 그룹 질문.

폼 섹션 분리

<fieldset>
  <legend>개인 정보</legend>
  <label>이름</label><input ... />
  <label>이메일</label><input ... />
</fieldset>
<fieldset>
  <legend>주소</legend>
  <label>도로명</label><input ... />
</fieldset>

긴 폼을 의미 단위로 시맨틱 분리.

자주 보는 안티패턴

legend 누락 — fieldset 시맨틱 무의미

라디오 그룹을 div로 묶기

fieldset의 기본 border CSS 거부감으로 안 씀

그룹 라벨을 p로 (legend가 정답)

라디오 그룹을 div로

<p>배송 방법</p>
<div>
  <input type="radio" name="shipping" value="a" /> A
  <input type="radio" name="shipping" value="b" /> B
</div>

스크린리더가 그룹 질문 "배송 방법"을 라디오 발화 시 함께 안 읽음.

legend 누락

<fieldset>
  <input type="radio" name="g" /> A
  <input type="radio" name="g" /> B
</fieldset>

그룹 시맨틱은 있지만 그룹 이름이 없음. 무엇을 선택하는지 모름.

해설

폼 컨트롤을 시맨틱 그룹으로 묶는 컨테이너. legend와 짝을 이뤄 그룹의 질문과 항목을 명확히 분리. 시리즈 #2에서 라벨·필드셋·레전드를 한 묶음으로 다뤘다.

SEO 관점에서 직접 영향은 작다. 폼 사용성 신호로 간접 작용.

GEO 관점에서 AI 에이전트가 라디오·체크박스 그룹을 자동 선택할 때 fieldset이 그룹 경계. legend의 텍스트로 어느 그룹의 어느 옵션인지 정확히 인식. fieldset 없는 라디오 그룹은 — AI가 어디까지가 한 그룹인지 추측.

A11y 관점에서 가장 critical. 라디오·체크박스의 한 항목에 포커스하면 스크린리더가 그룹 질문(legend) + 항목(label) + 위치(N/M)를 함께 발화. 예: "배송 방법, 일반 배송 3-5일, 라디오 버튼, 2개 중 1번째". fieldset 없으면 "일반 배송 3-5일, 라디오 버튼"만 — 무엇을 선택하는 그룹인지 사라진다.

자주 보는 안티패턴: legend 누락(fieldset 시맨틱은 있지만 질문 없음 — 그룹의 정체성 사라짐), 라디오 그룹을 div로(p로 질문 + div로 라디오 나열 패턴이 흔하지만 시맨틱 0), 체크박스 그룹에 fieldset 안 씀(라디오는 fieldset이 명시적 표준, 체크박스도 권장), fieldset 기본 border CSS 거부감으로 안 씀(border는 CSS로 제거 — border: 0 한 줄. 시맨틱은 보존).

CSS reset 패턴 — fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }. 기본 스타일이 부담스러우면 reset하고 그룹 디자인은 CSS로 자유. 시맨틱은 유지.

긴 폼의 섹션 분리 — 회원가입 폼의 개인 정보 / 주소 / 결제 정보 같은 큰 섹션을 fieldset으로 분리. 시각적으로 그룹 박스가 자연스럽고, 시맨틱은 섹션 구분. 시각장애 사용자가 어느 섹션을 채우고 있는지를 인지.

라이브러리 — Radix Form, Headless UI는 fieldset/legend의 자동 처리는 없다. 사용자가 직접 마크업. 라디오 그룹 컴포넌트(Radix RadioGroup)는 내부적으로 ARIA role="radiogroup"을 박는데 — fieldset/legend가 시맨틱적으로 더 표준. 가능하면 native fieldset.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설