HTML DOM의 Fieldset 객체는 HTML 문서 내의 <fieldset> 요소를 나타냅니다. <fieldset> 요소는 폼(form) 안에서 관련된 입력 요소들을 그룹으로 묶어 시각적으로 구분할 때 사용되며, JavaScript를 통해 동적으로 생성하거나 제어할 수 있습니다.
Fieldset 객체의 주요 속성
Fieldset 객체에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| disabled | 해당 fieldset이 비활성화(disabled) 상태인지 여부를 설정하거나 반환합니다. |
| form | 해당 fieldset을 포함하고 있는 폼(form)에 대한 참조를 반환합니다. |
| name | fieldset의 name 속성값을 설정하거나 반환합니다. |
| type | fieldset 요소의 타입(type)을 반환합니다. |
문법(Syntax)
JavaScript로 새로운 fieldset 요소를 생성하는 기본 문법은 다음과 같습니다.
var p = document.createElement("FIELDSET");예제(Example)
다음은 HTML DOM Fieldset 객체를 활용한 실제 예제입니다.
<!DOCTYPE html>
<html>
<head>
<script>
function createField() {
var f = document.createElement("FIELDSET");
var txt = document.createTextNode("FIELDSET element created");
f.appendChild(txt);
document.body.appendChild(f);
}
</script>
</head>
<body>
<h2>Fieldset object example</h2>
<p>Create a fieldset element by clicking on below button</p>
<button onclick="createField()">CREATE</button> <br><br>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CREATE 버튼을 클릭하면 다음과 같이 새로운 fieldset 요소가 화면에 추가됩니다.
코드 상세 설명
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
먼저, 사용자가 클릭하면 createField() 함수를 실행하는 CREATE 버튼을 만듭니다.
<button onclick="createField()">CREATE</button>
createField() 함수는 document 객체의 createElement() 메서드를 사용하여 <fieldset> 요소를 생성한 뒤 변수 f에 할당합니다. 이어서 createTextNode() 메서드로 텍스트 노드를 만들고, appendChild() 메서드를 통해 해당 텍스트 노드를 <fieldset> 요소의 자식 노드로 추가합니다. 마지막으로, 텍스트 노드를 자식으로 가진 fieldset 요소 전체를 document의 body에 자식 요소로 추가합니다.
function createField() {
var f = document.createElement("FIELDSET");
var txt = document.createTextNode("FIELDSET element created");
f.appendChild(txt);
document.body.appendChild(f);
}이처럼 Fieldset 객체를 활용하면 버튼 클릭 한 번으로 폼 그룹을 동적으로 생성할 수 있으며, disabled나 name 같은 속성과 조합하면 더욱 유연한 폼 UI를 구현할 수 있습니다.