HTML DOM Fieldset name 속성 – 문법과 예제로 배우는 사용법

HTML DOM의 Fieldset name 속성은 <fieldset> 요소의 name 속성 값을 가져오거나 설정하는 데 사용됩니다. name 속성은 폼(form)이 제출된 후 데이터를 식별하거나, 스크립트에서 특정 폼 요소를 참조할 때 유용하게 활용됩니다.

문법(Syntax)

Fieldset name 속성을 설정하는 기본 문법은 다음과 같습니다.

fieldsetObject.name = name

여기서 name은 해당 fieldset에 지정할 이름을 의미합니다.

예제(Example)

Fieldset name 속성의 실제 동작을 확인해 보겠습니다.

<!DOCTYPE html>
<html>
<head>
<script>
    function fieldName() {
        var field = document.getElementById("FieldSet1").name;
        document.getElementById("Sample").innerHTML = "The fieldset name is "+field;
    }
</script>
</head>
<body>
<h1>Sample FORM</h1>
<form id="FORM1">
<fieldset id="FieldSet1" name="FS1">
<legend>User Data:</legend>
Name: <input type="text"><br>
Address: <input type="text"><br>
Age: <input type="text">
</fieldset>
</form>
<br>
<button onclick="fieldName()">GET NAME</button>
<p id="Sample"></p>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

HTML DOM Fieldset name 속성 – 문법과 예제로 배우는 사용법

GET NAME 버튼을 클릭하면 아래와 같이 fieldset의 name 값이 화면에 표시됩니다.

HTML DOM Fieldset name 속성 – 문법과 예제로 배우는 사용법

코드 설명

1. fieldset 요소 생성

먼저 form 요소 내부에 name이 "FS1", id가 "FieldSet1"인 fieldset을 생성했습니다.

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

2. 버튼 생성 및 이벤트 연결

그다음, 사용자가 클릭하면 fieldName() 함수를 실행하는 GET NAME 버튼을 만들었습니다.

<button onclick="fieldName()">GET NAME</button>

3. fieldName() 함수의 동작 원리

fieldName() 함수는 getElementById() 메서드를 사용하여 id가 "FieldSet1"인 fieldset 요소를 가져옵니다. 이후 해당 요소의 name 속성 값을 읽어 변수 field에 저장하고, innerHTML 속성을 통해 id가 "Sample"인 단락(<p>)에 결과 텍스트를 출력합니다.

function fieldName() {
    var field = document.getElementById("FieldSet1").name;
    document.getElementById("Sample").innerHTML = "The fieldset name is "+field;
}

이처럼 Fieldset의 name 속성을 활용하면 JavaScript에서 폼 그룹을 쉽게 식별하고 제어할 수 있어, 복잡한 폼을 다룰 때 코드의 가독성과 유지보수성이 크게 향상됩니다.