fieldset element - by. UXKM

요약 설명

<fieldset> 요소는 <form> 내에서 관련된 입력 요소들을 논리적으로 그룹화하기 위한 시맨틱 태그로, 폼의 구조를 구분하고 시각적으로 묶어주는 역할을 합니다.
주로 <legend> 요소와 함께 사용되어 그룹의 제목을 제공하며, 사용자는 입력 필드를 주제별로 쉽게 파악하고 구분할 수 있습니다.
기본적으로 브라우저는 <fieldset>에 테두리와 간격을 자동으로 적용해 시각적인 구획을 형성하며, 접근성 측면에서도 스크린 리더가 그룹의 의미를 인식할 수 있도록 도와줍니다. 복잡한 폼을 명확하고 체계적으로 구성할 때 유용합니다.

주요 역할 및 특징

  1. 입력 필드를 논리적·시각적으로 그룹화
    • <fieldset> 요소는 여러 개의 입력 필드(<input>, <select>, <textarea> 등)를 그룹화하여 시각적, 논리적으로 구분할 수 있도록 합니다.
    • 예를 들어, 회원 가입 폼에서 개인정보와 주소 정보를 따로 그룹화할 때 유용합니다.
  2. <legend>와 함께 사용 가능
    • <legend> 요소를 사용하면 필드 그룹의 제목을 지정할 수 있습니다.
    • 사용자가 어떤 정보를 입력해야 하는지 직관적으로 이해할 수 있도록 도와줍니다.
  3. 접근성과 시맨틱 향상

    스크린 리더는 <fieldset>과 <legend>를 함께 사용해 사용자에게 그룹의 의미를 더 잘 전달합니다.

  4. disabled 속성으로 그룹 전체 비활성화 가능

    <fieldset> 요소에 disabled 속성을 사용하면 내부의 모든 폼 요소가 자동으로 비활성화됩니다.

  5. CSS로 테두리 및 스타일 조정 가능
    • 기본적으로 테두리(border)가 적용되어 있으며, <legend> 요소는 기본적으로 필드셋 내부 상단에 위치합니다.
    • CSS로 기본 디자인을 변경할 수 있습니다.

CSS 기본 값

<fieldset> 요소는 기본적으로 볼록 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

기본 문법

속성

<fieldset> 속성 요약

  • 속성명
  • 설명

  • disabled

    필드셋 내 전체 입력 요소들을 비활성화

  • form

    외부의 <form> 요소와 연결

  • name

    필드셋의 이름 (서버로 전송되진 않음)

[disabled] Boolean - 선택 사항 <fieldset disabled>

해당 <fieldset> 내의 모든 폼 요소를 일괄 비활성화합니다. 폼 제출 시에도 비활성화된 요소들은 전송되지 않습니다.

[form] 선택 사항 <fieldset form="form 요소의 id">

<fieldset> 요소의 form 속성에 <form> 요소의 id와 같은 값을 지정하여, <fieldset> 요소가 <form> 요소 내부에 없더라도 <form>의 데이터로 제출되도록 설정할 수 있습니다.

[name] 선택 사항 <fieldset name="값">

<fieldset> 요소에 이름을 지정합니다.
폼 데이터에는 전송되지 않지만, 스크립트나 스타일에서 식별용으로 사용할 수 있습니다.

예제

기본적인 필드 그룹화

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

여러 개의 그룹화된 필드 사용

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

특정 그룹 비활성화

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

CSS 스타일링

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

주의사항

  • <fieldset> 내부에는 <legend>를 사용하는 것이 좋습니다.
    <legend> 요소를 사용하면 그룹의 의미를 명확하게 전달할 수 있습니다. 스크린 리더 사용자를 위한 접근성을 높이는 역할도 합니다.
  • <legend>는 <fieldset> 내 가장 처음에 위치해야 합니다.
    <legend>가 <fieldset>의 첫 번째 자식 요소가 아닐 경우, 브라우저나 스크린 리더에서 올바르게 인식되지 않을 수 있습니다.
  • 중첩 사용 가능하지만 주의 필요합니다.
    <fieldset> 내부에 또 다른 <fieldset>을 사용할 수 있지만, 너무 많은 중첩은 가독성을 저하시킬 수 있습니다.
  • <fieldset>과 <legend>는 브라우저마다 스타일이 다를 수 있으며, 필요에 따라 CSS를 활용하여 디자인을 조정해야 할 수 있습니다.
  • 폼 제출 시 <fieldset> 자체는 서버로 전송되지 않습니다.
    <fieldset>은 시맨틱 구조를 위한 요소일 뿐, 실제 데이터 전송은 내부의 <input>, <select> 등의 폼 컨트롤 요소를 통해 이루어집니다.
  • 모든 <fieldset>이 반드시 <form> 내부에 있어야 하는 것은 아닙니다. <form> 태그 외부에서도 사용할 수 있지만, 주로 폼 내부에서 사용됩니다.