HTML의 <fieldset> 태그는 관련된 폼(form) 요소들을 하나의 그룹으로 묶어 화면에 표시할 때 사용됩니다. 이 태그를 적용하면 그룹 주위에 테두리 상자가 자동으로 생성되어 입력 항목들이 시각적으로 구분됩니다.
특히 <fieldset> 태그와 <legend> 태그를 함께 사용하면 각 그룹에 제목(캡션)을 붙일 수 있어, 사용자가 폼의 구조와 목적을 훨씬 쉽게 파악할 수 있습니다. 복잡한 회원가입 양식이나 설문조사 폼을 만들 때 가독성과 접근성을 높이는 데 매우 유용합니다.
기본 문법
<fieldset> <legend>그룹 제목</legend> <!-- 폼 요소들 --> </fieldset>
예제
다음 코드를 실행하면 HTML에서 fieldset이 실제로 어떻게 표시되는지 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML fieldset Tag</title> </head> <body> <form> <fieldset> <legend>Details</legend> Student ID: <input type = "number"><br /> Subjects:<input type = "text"><br /> </fieldset> </form> </body> </html>
실행 결과
위 코드를 실행하면 'Details'라는 제목이 붙은 테두리 상자 안에 학생 ID 입력란과 과목 입력란이 함께 그룹화되어 표시됩니다.
주요 특징
- <legend>: fieldset 내부의 첫 번째 자식 요소로 배치해야 하며, 그룹의 제목으로 상자 테두리 위쪽에 표시됩니다.
- disabled 속성: fieldset에 disabled 속성을 추가하면 해당 그룹 안의 모든 폼 컨트롤이 한 번에 비활성화됩니다.
- 브라우저 지원: 모든 최신 브라우저(Chrome, Firefox, Safari, Edge 등)에서 기본적으로 지원됩니다.