[HTML] <fieldset>과 <legend>로 폼 그룹화하기

[HTML] <fieldset>과 <legend>로 폼 그룹화하기

HTML에서 <fieldset>과 <legend>는 폼 입력 항목을 그룹화하고, 제목을 붙여주는 기능을 합니다.

접근성을 높이고, 시각적으로도 그룹을 구분할 수 있게 해주는 매우 중요한 태그입니다.
이 글에서는 fieldset과 legend의 사용법과 함께, 실제 로그인, 회원가입 폼 예제를 통해 설명해드립니다.

---

✅ 1. <fieldset>이란?

<fieldset>은 폼 안에서 입력 그룹을 묶는 컨테이너입니다.
해당 그룹은 테두리로 구분되어 표시되며, 관련 입력 요소들을 시각적으로 구분할 수 있습니다.

---

✅ 2. <legend>란?

<legend>는 fieldset의 제목 역할을 합니다.
보통 그룹의 용도(예: 기본 정보, 연락처 정보 등)를 나타냅니다.

---

✅ 3. 기본 예제

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

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

    <label for="password">비밀번호:</label>
    <input type="password" id="password" name="password">

  </fieldset>
</form>

→ 위 예제는 이메일과 비밀번호를 fieldset으로 묶고, legend로 그룹 제목을 지정한 구조입니다.

---

✅ 4. 실무 회원가입 폼 예제

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

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

    <label for="birth">생년월일:</label>
    <input type="date" id="birth">
  </fieldset>

  <fieldset>
    <legend>연락처 정보</legend>

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

    <label for="phone">전화번호:</label>
    <input type="tel" id="phone">
  </fieldset>

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

→ 실무에서는 입력 항목을 논리적 묶음 단위로 그룹화해서 가독성과 접근성을 함께 챙길 수 있습니다.

---

✅ 5. 스타일 커스터마이징 팁

fieldset {
  border: 1px solid #ccc;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

legend {
  font-weight: bold;
  color: #333;
  padding: 0 8px;
}

→ 기본 스타일은 브라우저마다 다르므로 fieldset과 legend는 CSS로 커스터마이징하는 것이 일반적입니다.

---

✅ 6. 접근성과 사용자 경험(UX)

• 스크린 리더는 legend를 통해 그룹 이름을 읽어줍니다.
• 시각적으로도 구분되기 때문에 폼이 복잡해질수록 유용합니다.
• 단순 시각 구분이 아니라, 의미 있는 HTML 구조가 된다는 점에서 중요합니다.

---

📌 마무리

<fieldset>과 <legend>는 HTML 폼의 구조를 명확하게 하고 접근성을 높이며, 사용자 경험을 개선할 수 있는 중요한 태그입니다.

특히 회원가입, 설정화면, 긴 입력폼 등에서는 반드시 사용하는 것을 추천드립니다.

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