[HTML] <form> 안에서 <section>과 <fieldset> 병행 사용하는 법

[HTML] <form> 안에서 <section>과 <fieldset> 병행 사용하는 법

HTML에서 <form>을 구성할 때, 입력 항목이 많아지면 <fieldset>과 <section>을 병행해 사용하면 구조가 훨씬 깔끔해집니다.

이 글에서는 두 태그의 차이점과 실무 예제를 통해 폼 구조를 더 명확하게 설계하는 방법을 소개합니다.

---

✅ 1. fieldset vs section – 뭐가 다를까?

항목	<fieldset>	<section>
의미	입력 항목 그룹 (form control grouping)	독립적인 콘텐츠 블록 (document section)
사용 목적	폼 내 입력 그룹 구분	논리적 구간 구분 (헤더/푸터 등 포함 가능)
접근성	legend와 함께 스크린리더 지원↑	heading(h1~h6)과 함께 의미 부여
시각적 테두리	O (기본 테두리 있음)	X (스타일 없음)

→ fieldset은 입력 그룹을 묶고, section은 문서 의미를 나누는 구조입니다.

---

✅ 2. 병행 사용하는 실무 예제

<form>

  <section aria-labelledby="account-heading">
    <h2 id="account-heading">계정 정보</h2>

    <fieldset>
      <legend>로그인 정보</legend>

      <label for="email">이메일</label>
      <input id="email" type="email">

      <label for="password">비밀번호</label>
      <input id="password" type="password">
    </fieldset>
  </section>

  <section aria-labelledby="profile-heading">
    <h2 id="profile-heading">프로필 정보</h2>

    <fieldset>
      <legend>기본 정보</legend>

      <label for="name">이름</label>
      <input id="name" type="text">

      <label for="birth">생일</label>
      <input id="birth" type="date">
    </fieldset>
  </section>

  <button type="submit">가입하기</button>
</form>

✔ <section>은 문서 의미 구조를 나누는 용도로 사용되고,
✔ <fieldset>은 입력 항목 그룹을 묶는 데 쓰입니다.

---

✅ 3. 접근성(A11y) 향상 방법

• <section>에는 aria-labelledby 또는 aria-label 추가
• <legend>는 해당 입력 그룹의 제목으로 읽힘
• 스크린리더는 heading(h2~h3)과 legend를 구분해서 처리

→ 두 태그를 적절히 함께 쓰면 시각적/논리적/접근성 구조가 모두 완성됩니다.

---

✅ 4. 시각적 스타일링 팁

form {
  max-width: 600px;
  margin: auto;
}

section {
  margin-bottom: 2rem;
}

fieldset {
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 6px;
}

legend {
  font-weight: bold;
  padding: 0 0.5rem;
  color: #333;
}

→ form 전체 레이아웃도 함께 잡아주면 UI가 더 깔끔해집니다.

---

📌 마무리

<form> 안에서 <section>과 <fieldset>을 병행하면 시맨틱 구조 + UX + 접근성을 동시에 챙길 수 있습니다.

대규모 입력 폼, 멀티 스텝 회원가입, 설문 페이지 등에 꼭 적용해보시길 추천드립니다 😊

도움이 되셨다면 공감 / 댓글 부탁드립니다!