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

`<fieldset>` 태그의 정의 및 사용법

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

웹 양식 관련 컨트롤이란
사용자가 웹 페이지와 상호작용할 수 있도록 하는 요소들을 의미합니다.
<input>, <textarea>, <select>, <button> 등 사용자가 데이터를 입력하고, 선택하고, 제출하는 등의 작업을 할 수 있는 요소들이 해당됩니다.

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

HTML <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="interest">
           <label for="css">CSS</label>
        </div>
        <div>
           <input type="radio" id="js" name="interest" value="interest">
           <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>로 인해서 비활성 상태가 된 점을 확인할 수 있습니다.

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>