HTML <fieldset> 태그 – 올바른 이해와 사용 방법

정의 및 사용 방법

<fieldset> 태그는
웹 폼(양식) 관련 컨트롤 요소와 레이블(<label> 태그로 만든 이름표)을 그룹화해서 묶은 세트를 나타냅니다.
이 태그를 사용하면 폼의 구성을 명확하게 하고, 컨트롤 항목들을 시각적으로 구분하기 쉽게 만듭니다.

웹 폼 관련 컨트롤 요소: 공식으로 사용되는 용어는 '폼 컨트롤(form controls)'이라고 합니다.
폼 요소와 함께 사용자가 웹 페이지와 상호작용할 수 있도록 컨트롤을 제공하는 요소(들)을 말합니다.
<input>, <textarea>, <select>, <button> 등 사용자가 데이터를 입력하고, 선택하고, 제출하는 등의 작업을 할 수 있는 요소들이 해당됩니다.

<fieldset> 태그에는 선택적으로 캡션을 포함할 수 있습니다.
이 캡션은 <fieldset> 태그의 첫 번째 자식요소인 <legend> 태그로 나타내며, 이 그룹 안에 포함된 다른 요소들은 그룹을 구성합니다.

<legend> 태그는 그룹의 캡션 역할(간단한 제목이나 설명)을 하며, 스크린 리더 사용자에게 그룹의 내용을 알려주는 중요한 요소입니다. <fieldset> 태그 내에서 <legend> 태그가 필수 요소는 아닙니다. 하지만, <legend> 태그는 <fieldset> 태그 내에서 웹 접근성을 고려할 때 중요한 역할을 합니다.

기본 예제

HTML

<form>
    <fieldset>
        <legend>관심이 있는 웹 개발 언어를 선택하세요.</legend>
        <div>
           <input type="radio" id="html" name="interest" value="html">
           <label for="html">HTML</label>
        </div>
        <div>
           <input type="radio" id="css" name="interest" value="css">
           <label for="css">CSS</label>
        </div>
        <div>
           <input type="radio" id="js" name="interest" value="js">
           <label for="js">JavaScript</label>
        </div>
        <button type="submit">제출</button>
    </fieldset>
</form>

HTML <input type="radio">

관련 속성 사용하기

<fieldset> 태그의 관련된 속성에 대해 알아보겠습니다.

`disabled` 속성

disabled 속성 속성은 컨트롤 비활성 속성이라고도 부르며, 내용을 편집할 수 없고 포커스도 가능하지 않으며, 양식 제출 시 해당 값은 제출되지 않습니다. 이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

disabled 속성을 <fieldset> 태그에서도 사용할 수 있으며, <fieldset>에 사용하면 모든 자손 컨트롤을 비활성화합니다. 다음은 <fieldset>에 disabled 속성을 사용함으로써, <fieldset> 전체가 비활성된 상태가 된 것을 확인할 수 있는 예제입니다.

HTML

<form>
    <fieldset disabled>
        <legend>필수 정보</legend>
        <div>
            <label for="user-name">이름</label>
            <input type="text" id="user-name" value="홍길동">
        </div>
        <div>
            <label for="user-pw">비밀번호</label>
            <input type="password" id="user-pw" value="test">
        </div>
    </fieldset>
</form>

<fieldset>에 속한 <input type="text">, <input type="password"> 각각의 컨트롤은 disabled 속성이 없으나 <fieldset disabled>로 인해서 비활성 상태가 된 점을 확인할 수 있습니다.

`name` 속성

name 속성은 해당 요소가 그룹화해서 묶은 세트의 이름을 나타냅니다.
자바스크립트에서 form.elements API를 통해 해당 요소를 참조하기 위한 이름을 지정합니다.

`form` 속성

form 속성은 이 속성을 지정한 <fieldset>을 문서 내의 특정 <form>과 연결(associated with)합니다.
연결할 <form>의 id를 이 속성의 값으로 지정하면 연결됩니다.

이렇게 해당 요소를 특정 <form>과 연결시키면, 연결된 <form>에 속한 요소가 됩니다. 즉, 물리적인 위치와 상관없이 연결된 <form> 내부에 있는 <fieldset>처럼 작동합니다.

<fieldset>에 form 속성이 포함되어 있더라도 그 안에 중첩된 폼 관련 요소는 자동으로 연결되지 않습니다.
단지, <fieldset>에 설정된 name이 <fieldset>과 연결된 폼의 form.elements API의 이름으로 참조됩니다.

CSS 스타일링

<fieldset>과 <legend>에 CSS 스타일을 추가하면 그룹해서 묶은 양식의 구성을 더욱 명확히 하고 컨트롤 항목들을 시각적으로 구분하기 쉽게 만듭니다.

이 글은 HTML을 다루고 있으므로 <fieldset>이나 <legend> 태그에 대한 CSS를 자세히 다루지는 않습니다.

CSS

fieldset {
    padding: 1em;
    background-color: #f1f9eb;
    border: 1px solid yellowgreen;
    border-radius: 10px;
    min-width: 0;
}
fieldset + fieldset {
    margin-top: 1em;
}
legend {
    background-color: yellowgreen;
    padding: 0.2em 1em;
    border-radius: 5px;
}
input {
    display: block;
    width: 100%;
}

HTML

<form>
    <fieldset>
        <legend>Legend One</legend>
        <label for="input-one">Input One</label>
        <input type="text" id="input-one">
    </fieldset>
    <fieldset>
        <legend>Legend Two</legend>
        <label for="input-two">Input Two</label>
        <input type="text" id="input-two">
    </fieldset>
    <fieldset>
        <legend>Legend Three</legend>
        <label for="input-three">Input Three</label>
        <input type="text" id="input-three">
    </fieldset>
</form>