HTML DOM Input Range 타입(type) 속성 완벽 가이드

HTML DOM의 Input Range 타입(type) 속성은 type="range"로 설정된 input 요소와 연관된 속성입니다. 이 속성은 범위(range) 유형의 입력 요소에 대해 항상 range라는 값을 반환합니다.

문법(Syntax)

Range 타입 속성의 기본 문법은 다음과 같습니다.

rangeObject.type

예제(Example)

아래 예제를 통해 range 타입 속성이 실제로 어떻게 동작하는지 확인해 보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input range type Property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>아래 버튼을 클릭하면 위 input 요소의 타입을 확인할 수 있습니다</p>
<button type="button" onclick="rangeType()">GET Type</button>
<p id="Sample"></p>
<script>
    function rangeType() {
        var P = document.getElementById("RANGE1").type;
        document.getElementById("Sample").innerHTML = "The type for the input field is: " + P;
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM Input Range 타입(type) 속성 완벽 가이드 – 문법과 예제

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

HTML DOM Input Range 타입(type) 속성 완벽 가이드 – 문법과 예제

코드 상세 분석

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

1. Range 입력 필드 생성

먼저 form 태그 안에 type="range", id="RANGE1", name="VOL" 속성을 가진 input 요소를 생성했습니다.

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

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

다음으로 사용자가 클릭하면 rangeType() 함수를 실행하는 'GET Type' 버튼을 만들었습니다.

<button type="button" onclick="rangeType()">Get Type</button>

3. JavaScript 함수 구현

rangeType() 함수는 getElementById() 메서드를 사용해 해당 input 요소에 접근한 뒤, 그 type 속성값을 변수 P에 할당합니다. 이후 innerHTML 속성을 통해 id가 "Sample"인 단락(paragraph)에 결과를 출력합니다.

function rangeType() {
    var P = document.getElementById("RANGE1").type;
    document.getElementById("Sample").innerHTML = "The type for the input field is : " + P;
}

마무리

이처럼 Input Range 타입 속성은 자바스크립트에서 특정 입력 요소가 슬라이더 형태의 범위 선택기인지 프로그래밍 방식으로 확인할 때 유용하게 활용됩니다. 폼 유효성 검사나 동적 UI 처리 시 요소의 유형을 판별해야 하는 상황에서 간단하고 확실한 방법을 제공합니다.