HTML 폼에서 데이터 그룹화가 필요한 이유
HTML 폼(form)을 만들다 보면 이름, 주소, 연락처처럼 서로 관련된 입력 요소들을 하나의 묶음으로 정리하고 싶은 경우가 많습니다. 이럴 때 사용하는 것이 바로 <fieldset> 태그입니다.
<fieldset> 태그는 관련된 폼 요소들을 하나의 그룹으로 감싸며, 브라우저 화면에는 해당 요소들 주위에 테두리 상자(box)가 자동으로 그려집니다. 이를 통해 사용자는 어떤 입력 항목들이 같은 범주에 속하는지 한눈에 파악할 수 있습니다.
legend 태그로 그룹 제목 붙이기
<fieldset> 태그 내부에는 <legend> 태그를 함께 사용할 수 있습니다. <legend> 태그는 해당 그룹의 캡션(제목) 역할을 하며, fieldset 테두리 선 위쪽에 표시됩니다.
- <fieldset>: 관련 폼 요소들을 하나의 그룹으로 묶고 시각적인 테두리를 생성
- <legend>: 그룹의 제목(캡션)을 지정하여 어떤 정보를 입력하는 영역인지 명확히 안내
예제 코드
아래 예제 코드를 실행하면 학생 정보를 입력받는 폼이 하나의 그룹으로 묶여 표시되는 것을 확인할 수 있습니다.
<!DOCTYPE html> <html> <body> <form> <fieldset> <legend>학생 정보:</legend> 학생 이름:<br> <input type="text" name="sname"> <br> 학생 과목:<br> <input type="text" name="ssubject"> <br> </fieldset> </form> </body> </html>
실행 결과 설명
위 코드를 브라우저에서 열면 '학생 정보'라는 제목이 붙은 테두리 상자 안에 '학생 이름'과 '학생 과목' 입력 필드가 함께 표시됩니다. 이렇게 하면 여러 개의 입력 항목이 있어도 시각적으로 깔끔하게 구분됩니다.
fieldset 사용의 장점
<fieldset>과 <legend> 태그는 단순히 디자인을 위한 것만이 아닙니다. 다음과 같은 실질적인 이점도 제공합니다.
- 접근성 향상: 스크린 리더를 사용하는 사용자에게 그룹의 맥락을 전달하여 폼 이해도를 높여줍니다.
- 사용자 경험(UX) 개선: 긴 폼이라도 논리적으로 구분되어 입력 실수를 줄일 수 있습니다.
- 코드 가독성: 개발자 입장에서도 HTML 구조가 명확해져 유지보수가 쉬워집니다.
회원가입 폼, 설문조사, 결제 페이지 등 여러 섹션으로 나뉘는 복잡한 폼을 만들 때 <fieldset>과 <legend> 태그를 적극적으로 활용해 보시기 바랍니다.