fieldset, legend 속성

<form> 태그 내에서 fieldset과 legend 요소는 폼의 항목들을 그룹화하고 설명을 추가하는 데 사용됩니다. 이 두 태그는 특히 폼이 길거나 여러 섹션으로 나누어져 있을 때, 사용자에게 더 명확하게 폼을 구분할 수 있게 돕습니다.

1. <fieldset> 요소

<fieldset> 태그는 여러 폼 요소들을 그룹화하는 데 사용됩니다. 주로 관련된 입력 필드들을 하나의 블록으로 묶을 때 사용되며, 시각적으로도 그룹화된 항목을 구분할 수 있습니다. 기본적으로 fieldset은 경계선을 그려줘서 시각적으로 구분이 가능하게 합니다.

주요 특징:

• 그룹화: 폼 요소들을 논리적으로 그룹화합니다.
• 시각적 구분: 기본적으로 fieldset은 테두리가 생겨서 시각적으로 다른 섹션을 구분합니다.
• 사용자 경험 향상: 복잡한 폼을 구분지어 사용자에게 더 명확한 지침을 제공할 수 있습니다.

예시:

<form action="/submit" method="post">
  <fieldset>
    <legend>개인 정보</legend>
    <label for="name">이름:</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="email">이메일:</label>
    <input type="email" id="email" name="email">
  </fieldset>
  
  <fieldset>
    <legend>주소</legend>
    <label for="street">거리:</label>
    <input type="text" id="street" name="street">
    <br>
    <label for="city">도시:</label>
    <input type="text" id="city" name="city">
  </fieldset>
  
  <button type="submit">제출</button>
</form>

2. <legend> 요소

<legend> 태그는 fieldset 내에서 사용되며, 그룹화된 폼 요소의 제목을 제공합니다. 이는 fieldset의 첫 번째 항목으로, 그룹의 목적이나 항목들이 무엇인지를 간단히 설명합니다. <legend>는 fieldset의 경계 상단에 위치하게 되어, 해당 그룹이 무엇을 나타내는지를 직관적으로 알려줍니다.

주요 특징:

• 그룹 제목 제공: fieldset으로 묶인 항목들의 제목을 설정합니다.
• 시각적 강조: legend의 텍스트는 기본적으로 fieldset 안에서 강조되어 보여집니다.
• 접근성 향상: 스크린 리더와 같은 접근성 도구가 이 정보를 사용하여 사용자가 폼을 더 잘 이해할 수 있게 돕습니다.

예시:

<fieldset>
  <legend>개인 정보</legend>
  <label for="name">이름:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">이메일:</label>
  <input type="email" id="email" name="email">
</fieldset>

결합된 예시:

<fieldset>과 <legend>를 결합하여 폼의 각 섹션을 명확히 구분할 수 있습니다.

<form action="/submit" method="post">
  <fieldset>
    <legend>기본 정보</legend>
    <label for="first_name">이름:</label>
    <input type="text" id="first_name" name="first_name">
    <br>
    <label for="last_name">성:</label>
    <input type="text" id="last_name" name="last_name">
  </fieldset>

  <fieldset>
    <legend>연락처 정보</legend>
    <label for="phone">전화번호:</label>
    <input type="tel" id="phone" name="phone">
    <br>
    <label for="email">이메일:</label>
    <input type="email" id="email" name="email">
  </fieldset>

  <button type="submit">제출</button>
</form>

요약:

• <fieldset>: 관련된 폼 요소들을 그룹화하여 시각적으로 구분합니다. 기본적으로 경계선을 추가합니다.
• <legend>: fieldset 내에서 그룹화된 항목에 대한 설명을 제공하는 제목 역할을 합니다. fieldset의 상단에 표시됩니다.

<fieldset>과 <legend>를 사용하면 폼이 더 잘 구조화되고, 사용자는 각 섹션의 의미를 쉽게 이해할 수 있게 됩니다. 또한, 접근성을 향상시키고, 긴 폼을 보다 효율적으로 구분하는 데 도움이 됩니다.