Thuộc tính giá trị đặt lại đầu vào HTML DOM được sử dụng để trả về giá trị của thuộc tính giá trị nút đặt lại hoặc để đặt nó. Thuộc tính giá trị cho nút đặt lại thay đổi văn bản được hiển thị trên nút vì theo mặc định, văn bản là “Đặt lại”.
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính giá trị -
resetObject.value = text;
Ở đây, văn bản được sử dụng để chỉ định văn bản được hiển thị trên nút đặt lại.
Ví dụ
Chúng ta hãy xem một ví dụ về thuộc tính giá trị đặt lại đầu vào -
<!DOCTYPE html>
<html>
<body>
<h1>Input reset Value 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>Get the above element value by clicking the below button</p>
<button onclick="changeValue()">CHANGE</button>
<p id="Sample"></p>
<script>
function changeValue() {
document.getElementById("RESET1").value="Form_Reset";
document.getElementById("Sample").innerHTML="The reset button value is changed and the value can be seen on the button itself";
}
</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 -
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 nằm bên trong biểu mẫu có 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 “CHANGE” sẽ thực thi phương thức changeValue () khi người dùng nhấp vào -
<button onclick="changeValue()">CHANGE</button>
Phương thức changeValue () nhận phần tử đầu vào với kiểu đặt lại bằng cách sử dụng phương thức getElementById () và đặt giá trị thuộc tính “value” của nó thành “Form_Reset”. Giá trị này được hiển thị trên chính nút. Sau đó, một thông báo cho biết sự thay đổi này sẽ được hiển thị trong đoạn văn có id “Sample” bằng cách sử dụng thuộc tính innerHTML -
function changeValue() {
document.getElementById("RESET1").value="Form_Reset";
document.getElementById("Sample").innerHTML="The reset button value is changed and the value can be seen on the button itself";
}