HTML DOM 입력 범위 이름 속성은 입력 범위 필드의 이름 속성을 설정하거나 반환하는 데 사용됩니다. name 속성은 양식 데이터가 서버에 제출된 후 식별하는 데 도움이 됩니다. JavaScript는 나중에 조작하기 위해 양식 요소를 참조하기 위해 name 속성을 사용할 수도 있습니다.
구문
다음은 −
의 구문입니다.이름 속성 설정 -
rangeObject.name = name
예시
여기서 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> 출력
이것은 다음과 같은 출력을 생성합니다 -
이름 변경 버튼을 클릭하면 -
위의 예에서 -
type="range", id="RANGE1" , name="VOL" −
형식의 입력 필드를 만들었습니다.<form> VOLUME <input type="range" id="RANGE1" name="VOL"> <form>
그런 다음 사용자가 클릭할 때 changeName() 메서드를 실행하는 CHANGE NAME 버튼을 만들었습니다.
<button type="button" onclick="changeName()">CHANGE NAME</button>
changeName() 메서드는 getElementById() 메서드를 사용하여 유형 범위가 있는 입력 필드를 가져오고 이름 속성 값을 "VOLUME"으로 설정합니다. 그런 다음 이 변경 사항은 ID가 "Sample"이고 innerHTML 속성을 사용하여 표시하는 단락에 반영됩니다. 의도한 텍스트 -
function changeName() {
document.getElementById("RANGE1").name ="VOLUME" ;
document.getElementById("Sample").innerHTML = "Range control name is now VOLUME";
}