HTML fieldset, legend 태그 – 폼 요소 그룹으로 묶기

폼(form) 양식을 만들다 보면 서로 관련이 있는 폼 요소끼리 그룹으로 묶어서 작성하는 게 훨씬 직관적입니다. 그럴 경우에 fieldset 태그와 legend 태그를 사용하시면 됩니다. 그리고 legend 태그는 fieldset 태그 내부에서만 사용할 수 있습니다.

fieldset, legend 태그

1. 사용법

<fieldset>
<legend> 제목 </legend>
…
</fieldset>

2. 태그 설명

종류	설명
fieldset	폼 요소를 그룹으로 묶습니다.
legend	fieldset의 제목입니다.

사용 예제 1

1. 소스 코드

<!DOCTYPE html>
<html>
<head>
     <title>fieldset, legend 태그</title>
</head>
<body>

<form>
     <div>성별 선택</div>
     <input type="radio" name="gender" checked>남
     <input type="radio" name="gender">여
     <div><button type="submit">보내기</button></div>
</form>
<br>
<!-- fieldset 사용 -->
<form>
     <div>성별 선택</div>
     <fieldset>
          <input type="radio" name="gender" checked>남
          <input type="radio" name="gender">여
     </fieldset>
     <button type="submit">보내기</button>
</form>    
<br>
<!-- fieldset, legend 사용-->
<form>
     <fieldset>
          <legend>성별 선택</legend>
          <input type="radio" name="gender" checked>남
          <input type="radio" name="gender">여
     </fieldset>
     <button type="submit">보내기</button>
</form>    

</body>
</html>

2. 실행 결과 화면

fieldset 태그와 legend 태그 사용 예제 실행 결과 화면입니다.

사용 예제 2 : style 적용

1. 소스 코드

<!DOCTYPE html>
<html>
<head>
     <title>fieldset, legend 태그</title>
</head>
<style>
     fieldset {margin-bottom: 30px;}
</style>
<body>
     <fieldset>
          <legend>성별 선택</legend>
          <input type="radio" name="gender">남자
          <input type="radio" name="gender" checked>여자
     </fieldset>    
     <fieldset style="border-width: 3px; border-color: #0404fa">
          <legend>지역 선택</legend>
          <input type="radio" name="area" checked>서울
          <input type="radio" name="area">경기
          <input type="radio" name="area">인천
          <input type="radio" name="area">부산
     </fieldset>    
     <fieldset style="border-width: 3px; border-style: dashed;">
          <legend>좋아하는 과일 모두 선택</legend>
          <input type="checkbox" name="fruit" checked>사과
          <input type="checkbox" name="fruit">배
          <input type="checkbox" name="fruit">토마토
          <input type="checkbox" name="fruit">수박
     </fieldset>
     <div style="margin-top: 10px;">
          <input type="image" src="img/button_1.png" style="width: 80px;">
     </div>
</body>
</html>