HTML DOM 입력 범위(Input Range) name 속성이란?
HTML DOM의 Input Range name 속성은 슬라이더 형태의 범위 입력 필드(range input)에 설정된 name 속성 값을 가져오거나 새로 설정하는 데 사용됩니다. name 속성은 폼(form) 데이터가 서버로 제출된 이후 해당 데이터를 식별하는 핵심 역할을 하며, JavaScript에서도 이 속성을 활용해 폼 요소를 참조하고 나중에 조작할 수 있습니다.
문법(Syntax)
name 속성을 설정하는 기본 문법은 다음과 같습니다.
rangeObject.name = name
여기서 name은 범위 슬라이더 컨트롤의 이름을 지정하는 값입니다.
예제(Example)
다음 예제는 range name 속성을 실제로 활용하는 방법을 보여줍니다. 버튼을 클릭하면 범위 컨트롤의 이름이 변경되는 구조입니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input range name Property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>Change the name of the above range control by clicking the below button</p>
<button type="button" onclick="changeName()">CHANGE NAME</button>
<p id="Sample"></p>
<script>
function changeName() {
document.getElementById("RANGE1").name ="VOLUME" ;
document.getElementById("Sample").innerHTML = "Range control name is now VOLUME";
}
</script>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CHANGE NAME 버튼을 클릭하면 다음과 같이 컨트롤의 이름이 변경된 것을 확인할 수 있습니다.
예제 코드 상세 분석
위 예제가 어떻게 동작하는지 단계별로 살펴보겠습니다.
1. 범위 입력 필드 생성
폼 안에 type="range", id="RANGE1", name="VOL"로 지정된 입력 필드를 생성했습니다.
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
2. 버튼 생성
사용자가 클릭하면 changeName() 함수를 실행하는 CHANGE NAME 버튼을 만들었습니다.
<button type="button" onclick="changeName()">CHANGE NAME</button>
3. changeName() 함수의 동작
changeName() 함수는 getElementById() 메서드를 사용해 해당 range 타입의 입력 필드를 가져온 뒤, name 속성 값을 "VOLUME"으로 변경합니다. 이어서 id가 "Sample"인 문단의 innerHTML 속성을 이용해 변경 결과를 화면에 표시합니다.
function changeName() {
document.getElementById("RANGE1").name ="VOLUME" ;
document.getElementById("Sample").innerHTML = "Range control name is now VOLUME";
}마무리
HTML DOM의 input range name 속성은 서버로 전송되는 폼 데이터를 식별하고, JavaScript로 동적으로 요소를 참조·조작할 수 있게 해주는 유용한 기능입니다. 위 예제처럼 getElementById()와 함께 사용하면 사용자 인터랙션에 따라 name 속성을 손쉽게 변경할 수 있습니다.