HTML DOM 라디오 버튼 form 속성 – 폼 참조를 반환하는 방법

HTML DOM의 Input Radio form 속성은 특정 라디오 버튼(radio button)이 포함된 <form> 요소에 대한 참조(reference)를 반환하는 데 사용됩니다. 만약 해당 라디오 버튼이 어떤 폼에도 속해 있지 않다면 이 속성은 null을 반환합니다.

또한 이 속성은 읽기 전용(read-only)이기 때문에, 자바스크립트로 값을 직접 변경할 수는 없습니다.

문법(Syntax)

라디오 버튼의 form 속성을 사용하는 기본 문법은 다음과 같습니다.

radioObject.form

예제(Example)

아래 예제를 통해 Input Radio form 속성이 실제로 어떻게 동작하는지 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input Radio form Property</h1>
<form id="FORM1">
FRUIT:
<input type="radio" name="fruits" id="Mango">Mango
</form>
<p>아래 버튼을 클릭하면 폼의 id를 확인할 수 있습니다.</p>
<button type="button" onclick="formId()">GET FORM</button>
<p id="Sample"></p>
<script>
    function formId() {
        var P = document.getElementById("Mango").form.id;
        document.getElementById("Sample").innerHTML =
            "라디오 버튼이 포함된 폼의 id는: " + P;
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM 라디오 버튼 form 속성 – 폼 참조를 반환하는 방법

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

HTML DOM 라디오 버튼 form 속성 – 폼 참조를 반환하는 방법

코드 상세 설명

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

1. 폼 안에 라디오 버튼 생성

먼저 <form> 태그 내부에 type="radio", name="fruits", id="Mango" 속성을 가진 라디오 버튼 입력 요소를 생성했습니다. 그리고 이 폼에는 id="FORM1"이라는 식별자가 지정되어 있습니다.

<form id="FORM1">
FRUIT:
<input type="radio" name="fruits" id="Mango">Mango
</form>

2. GET FORM 버튼 생성

사용자가 클릭하면 formId() 함수를 실행하는 버튼을 만들었습니다.

<button type="button" onclick="formId()">GET FORM</button>

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

formId() 함수는 getElementById() 메서드를 사용하여 라디오 타입의 입력 필드를 가져온 뒤, 해당 라디오 버튼을 감싸고 있는 폼 객체의 id 속성 값을 읽어옵니다. 이 값은 변수 P에 저장되며, innerHTML 속성을 통해 id="Sample"인 문단(paragraph)에 출력됩니다.

function formId() {
    var P = document.getElementById("Mango").form.id;
    document.getElementById("Sample").innerHTML =
        "라디오 버튼이 포함된 폼의 id는: " + P;
}

정리

HTML DOM의 라디오 버튼 form 속성은 다음과 같은 특징을 가집니다.

라디오 버튼이 속한 <form> 요소의 참조를 반환합니다.
라디오 버튼이 폼 외부에 존재하면 null을 반환합니다.
읽기 전용 속성이므로 값을 설정할 수 없습니다.

이 속성을 활용하면 자바스크립트에서 특정 입력 요소가 어느 폼에 속해 있는지 동적으로 확인할 수 있어, 폼 유효성 검사나 동적 UI 처리 시 유용하게 사용됩니다.