Home > Article > Web Front-end > HTML DOM Input Reset disabled attribute HTML DOM Input Reset disabled attribute is used to set or get whether the reset button is disabled
HTML DOM Input Reset disabled attribute HTML DOM Input Reset disabled attribute is used to set or get whether the reset button is disabled
- PHPzforward
- 2023-08-20 16:29:07876browse
HTML DOM Input reset disabled attribute is used to set or return whether the reset button should be disabled. It uses a boolean value, where true means the reset button should be disabled and false means no. The disabled attribute defaults to false. disabled elements are gray and unclickable by default.
Syntax
The following is the syntax of −
Set the disabled attribute−
resetObject.autofocus = true|false
Here, true=reset button is disabled and false=the reset button is not disabled. It is false by default.
Example
Let us look at an example for the Input reset disabled property −
Live Demo
<!DOCTYPE html>
<html>
<body>
<h1>Input reset disabled 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>Disable the above reset button by clicking on the DISABLE button</p>
<button type="button" onclick="disableReset()">DISABLE</button>
<p id="Sample"></p>
<script>
function disableReset() {
document.getElementById("RESET1").disabled=true;
document.getElementById("Sample").innerHTML = "The reset button is now disabled" ;
}
</script>
</body>
</html>Output
This will produce the following output −
Click on the “DISABLE” button −
in In the above example −
we created an d5fd7aea971a85678ba271703566ebfd element with type="reset" and id="RESET1". Clicking this button will reset the form data. This button is in a form with two text fields that also has inline styles applied −
<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>
Then we create a button called DISABLE which will execute the disableReset() method when clicked by the user −
<button type="button" onclick="disableReset()">DISABLE</button>
disableReset() method uses the getElementById() method to obtain the input element of type reset and set its disabled attribute to true. This makes the reset button unclickable and the user can no longer interact with it. It is now gray −
function disableReset() {
document.getElementById("RESET1").disabled=true;
document.getElementById("Sample").innerHTML = "The reset button is now disabled" ;
}The above is the detailed content of HTML DOM Input Reset disabled attribute HTML DOM Input Reset disabled attribute is used to set or get whether the reset button is disabled. For more information, please follow other related articles on the PHP Chinese website!