HTML DOM Fieldset type 속성 이해하기 – 사용법과 예제 코드

HTML DOM Fieldset의 type 속성은 fieldset 요소의 타입을 반환하는 데 사용되는 속성입니다. fieldset 요소의 type 값은 항상 "fieldset"으로 고정되어 있으며, 이 속성은 읽기 전용(read-only)이므로 값을 변경할 수 없습니다.

문법(Syntax)

Fieldset type 속성의 기본 문법은 다음과 같습니다.

fieldsetObject.type

별도의 매개변수 없이 fieldset 객체에 직접 접근하여 type 속성 값을 가져올 수 있습니다.

예제(Example)

Fieldset type 속성의 실제 동작을 확인할 수 있는 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<script>
    function FieldType() {
        var field = document.getElementById("FieldSet1").type;
        document.getElementById("Sample").innerHTML = "fieldset 요소의 타입은 " + field + " 입니다.";
    }
</script>
</head>
<body>
<h1>샘플 폼(Sample FORM)</h1>
<form id="FORM1">
<fieldset id="FieldSet1">
<legend>사용자 정보:</legend>
이름: <input type="text"><br>
주소: <input type="text"><br>
나이: <input type="text">
</fieldset>
</form>
<br>
<button onclick="FieldType()">타입 확인(GET TYPE)</button>
<p id="Sample"></p>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM Fieldset type 속성 이해하기 – 사용법과 예제 코드

그리고 GET TYPE 버튼을 클릭하면 아래와 같은 결과가 표시됩니다.

HTML DOM Fieldset type 속성 이해하기 – 사용법과 예제 코드

코드 상세 설명

위 예제의 동작 원리를 단계별로 살펴보겠습니다.

1. fieldset 요소 생성

먼저 form 요소 내부에 id가 "FieldSet1"인 fieldset 요소를 생성했습니다. fieldset 안에는 legend 태그로 그룹 제목을 지정하고, 이름·주소·나이 입력 필드를 배치했습니다.

<form id="FORM1">
  <fieldset id="FieldSet1">
    <legend>사용자 정보:</legend>
    이름: <input type="text"><br>
    주소: <input type="text"><br>
    나이: <input type="text">
  </fieldset>
</form>

2. 버튼 클릭 이벤트 연결

다음으로 클릭 시 FieldType() 함수를 실행하는 "GET TYPE" 버튼을 만들었습니다.

<button onclick="FieldType()">타입 확인(GET TYPE)</button>

3. FieldType() 함수의 동작

FieldType() 함수는 getElementById() 메서드로 fieldset 요소의 type 속성 값을 읽어와 변수 field에 저장합니다. 앞서 설명했듯이 fieldset 요소의 type은 항상 "fieldset"이므로, 변수 field에는 "fieldset" 문자열이 담기게 됩니다. 이후 innerHTML 속성을 사용하여 id가 "Sample"인 문단(paragraph)에 결과를 출력합니다.

function FieldType() {
    var field = document.getElementById("FieldSet1").type;
    document.getElementById("Sample").innerHTML = "fieldset 요소의 타입은 " + field + " 입니다.";
}

정리

Fieldset type 속성은 실무에서 활용 빈도는 높지 않지만, DOM 요소의 타입을 동적으로 검증해야 하는 상황에서 유용하게 사용될 수 있습니다. 특히 여러 종류의 폼 컨트롤 요소를 다룰 때 해당 요소가 fieldset인지 확인하는 로직을 구현할 때 참고할 만합니다. 읽기 전용 속성이라는 점만 기억하면 어렵지 않게 활용할 수 있습니다.