Thuộc tính tên Đặt lại đầu vào HTML DOM được sử dụng để đặt hoặc trả lại thuộc tính tên của nút đặt lại. 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ủ.
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính tên -
resetObject.name = name
Ở đây, tên dùng để chỉ định tên nút đặt lại.
Ví dụ
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính Đặt lại tên -
<!DOCTYPE html>
<html>
<body>
<h1>Input range name Property</h1>
<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Age"><br><br>
<input type="reset" id="RESET1">
</form>
<p>Change the name of the above reset button by clicking the below button</p>
<button type="button" onclick="changeName()">CHANGE NAME</button>
<p id="Sample"></p>
<script>
function changeName() {
document.getElementById("RESET1").name ="RES_BTN" ;
document.getElementById("Sample").innerHTML = "Reset Button name is now RES_BTN";
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào ĐỔI TÊN -
Trong ví dụ trên -
Chúng tôi đã tạo một phần tử với type =”reset”, id =”RESET1”. Nhấp vào nút này sẽ đặt lại dữ liệu biểu mẫu. Nút này bên trong biểu mẫu cũng chứa hai trường văn bản và biểu mẫu cũng có kiểu nội tuyến được áp dụng cho nó -
<form style="border:solid 2px green;padding:2px"> UserName: <input type="text" id="USR"> <br> Location: <input type="text" id="Age"><br><br> <input type="reset" id="RESET1"> </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 có đặt lại kiểu và đặt giá trị thuộc tính tên của nó thành “RES_BTN”. Thay đổi này sau đó được phản ánh trong một đoạn văn có id là “Mẫu” 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("RESET1").name ="RES_BTN" ;
document.getElementById("Sample").innerHTML = " Reset Button name is now RES_BTN";
}