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

HTML DOM의 Fieldset form 속성은 해당 <fieldset> 요소가 속해 있는 폼(form)에 대한 참조를 Form 객체 형태로 반환합니다. 이 속성은 읽기 전용(read-only)이며, 지정된 fieldset이 어떤 폼에도 포함되어 있지 않은 경우 null을 반환합니다.

문법(Syntax)

fieldset form 속성의 기본 문법은 다음과 같습니다.

fieldsetObject.form

예제(Example)

fieldset form 속성의 실제 사용 예를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<script>
    function formId() {
        var field = document.getElementById("FieldSet1").form.id;
        document.getElementById("Sample").innerHTML = "fieldset 요소가 속한 폼의 id는 " + field + " 입니다.";
    }
</script>
</head>
<body>
<h1>Sample FORM</h1>
<form id="FORM1">
<fieldset id="FieldSet1">
<legend>User Data:</legend>
Name:<input type="text"><br>
Address:<input type="text"><br>
Age:<input type="text">
</fieldset>
</form>
<br>
<button onclick="formId()">GET ID</button>
<p id="Sample"></p>
</body>
</html>

실행 결과(Output)

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

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

GET ID 버튼을 클릭하면 아래와 같이 결과가 표시됩니다.

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

코드 상세 설명

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

1. 폼과 fieldset 요소 생성

먼저 id가 "FORM1"인 <form> 요소를 만들고, 그 안에 id가 "FieldSet1"인 <fieldset> 요소를 포함시켰습니다.

<form id="FORM1">
<fieldset id="FieldSet1">
<legend>User Data:</legend>
Name:<input type="text"><br>
Address:<input type="text"><br>
Age:<input type="text">
</fieldset>
</form>

2. 버튼 클릭 이벤트 연결

다음으로 사용자가 클릭하면 formId() 함수를 실행하는 GET ID 버튼을 생성했습니다.

<button onclick="formId()">GET ID</button>

3. formId() 함수의 동작

formId() 함수는 getElementById() 메서드로 fieldset 요소를 가져온 뒤, 해당 요소의 form.id 속성에 접근하여 fieldset이 속한 폼의 id 값을 반환받습니다. 반환된 값은 field 변수에 저장되며, innerHTML 속성을 통해 id가 "Sample"인 문단(paragraph)에 출력됩니다.

function formId() {
    var field = document.getElementById("FieldSet1").form.id;
    document.getElementById("Sample").innerHTML = "fieldset 요소가 속한 폼의 id는 " + field + " 입니다.";
}

정리

HTML DOM의 Fieldset form 속성은 <fieldset> 요소가 어느 폼에 속해 있는지 확인할 때 유용하게 사용됩니다. 읽기 전용 속성이므로 값을 변경할 수는 없지만, 자바스크립트를 통해 폼과 관련된 동적인 처리를 구현할 때 폼의 참조를 손쉽게 얻을 수 있다는 장점이 있습니다.