HTML DOM Input Range form 속성 – 슬라이더가 포함된 폼 참조 가져오기

HTML DOM에서 Input Range의 form 속성은 해당 범위 슬라이더(input range slider)를 포함하고 있는 폼(form)에 대한 참조를 반환하는 데 사용됩니다. 만약 범위 슬라이더가 어떤 폼에도 속해 있지 않다면 NULL을 반환합니다. 이 속성은 읽기 전용(read-only)이므로 값을 직접 변경할 수 없습니다.

구문(Syntax)

Input Range form 속성의 기본 구문은 다음과 같습니다.

rangeObject.form

예제(Example)

Input Range form 속성의 실제 동작을 예제를 통해 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input range form Property</h1>
<form id="FORM1">
<input type="range" id="RANGE1" name="VOL">
</form>
<p>아래 버튼을 클릭하면 위 범위 슬라이더를 포함하는 폼의 id를 확인할 수 있습니다</p>
<button type="button" onclick="formId()">GET FORM</button>
<p id="Sample"></p>
<script>
    function formId() {
        var P=document.getElementById("RANGE1").form.id;
        document.getElementById("Sample").innerHTML = "The id of the form containing the range slider is: "+P ;
}
</script>
</body>
</html>

출력 결과(Output)

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

HTML DOM Input Range form 속성 – 슬라이더가 포함된 폼 참조 가져오기

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

HTML DOM Input Range form 속성 – 슬라이더가 포함된 폼 참조 가져오기

코드 상세 설명

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

1. 폼 내부에 범위 슬라이더 생성

먼저 type="range", id="RANGE1", name="VOL" 속성을 가진 input 요소를 폼 안에 배치했습니다. 이 폼에는 id="FORM1"이 지정되어 있습니다.

<form id="FORM1">
<input type="range" id="RANGE1" name="VOL">
</form>

2. GET FORM 버튼 생성

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

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

3. formId() 함수의 동작 방식

formId() 함수는 getElementById() 메서드를 사용하여 type이 range인 input 요소를 가져온 뒤, 해당 슬라이더를 포함하는 폼 객체의 id 속성 값에 접근합니다. 그런 다음 이 값을 변수 P에 할당하고, innerHTML 속성을 통해 id가 "Sample"인 단락(paragraph)에 출력합니다.

function formId() {
    var P=document.getElementById("RANGE1").form.id;
    document.getElementById("Sample").innerHTML = "The id of the form containing the range slider is: "+P ;
}

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