Thuộc tính tên dải ô đầu vào HTML DOM được sử dụng để đặt hoặc trả về thuộc tính tên của trường dải ô đầu vào. Thuộc tính name giúp xác định dữ liệu biểu mẫu sau khi nó đã được gửi đến máy chủ. JavaScript cũng có thể sử dụng thuộc tính name để tham chiếu đến các phần tử biểu mẫu để thao tác sau này.
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính tên -
rangeObject.name = name
Ví dụ
Ở đây, tên dùng để chỉ định tên điều khiển thanh trượt phạm vi.
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính phạm vi tên -
<!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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút THAY ĐỔI TÊN -
Trong ví dụ trên -
Chúng tôi đã tạo một trường đầu vào chứa bên trong một biểu mẫu có type =“range”, id =“RANGE1”, name =“VOL” -
<form> VOLUME <input type="range" id="RANGE1" name="VOL"> <form>
Sau đó, chúng tôi đã tạo một nút THAY ĐỔI TÊN sẽ thực thi phương thức changeName () khi người dùng nhấp vào -
<button type="button" onclick="changeName()">CHANGE NAME</button>
Phương thức changeName () sử dụng phương thức getElementById () để lấy trường đầu vào với phạm vi kiểu và đặt giá trị thuộc tính tên của nó thành “VOLUME”. Thay đổi này sau đó được phản ánh trong một đoạn văn có id là “Sample” và sử dụng thuộc tính innerHTML của nó để hiển thị văn bản dự định -
function changeName() {
document.getElementById("RANGE1").name ="VOLUME" ;
document.getElementById("Sample").innerHTML = "Range control name is now VOLUME";
}