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 Tutorial-php.cn

HTML DOM Input Reset disabled attribute HTML DOM Input Reset disabled attribute is used to set or get whether the reset button is disabled

PHPz

Release： 2023-08-20 16:29:07

forward

947 people have browsed it

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

Copy after login

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>

Copy after login

Output

This will produce the following output −

HTML DOM Input Reset disabled 属性

HTML DOM Input Reset disabled 属性用于设置或获取重置按钮是否被禁用

Click on the “DISABLE” button −

HTML DOM Input Reset disabled 属性

HTML DOM Input Reset disabled 属性用于设置或获取重置按钮是否被禁用

in In the above example −

we created an 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>

Copy after login

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>

Copy after login

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" ;
}

Copy after login

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!