HTML 按钮 disabled

2025 年 3 月 25 日 | 阅读 3 分钟

“disabled”是 HTML 中 <button> 标签的一个属性，用于表示按钮被禁用。它是一个布尔属性。禁用按钮不能用于点击，并且显示为灰色。

语法

示例： 以下示例使用了不同的按钮并使它们被禁用。

示例 1： 以下示例禁用了提交按钮。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Example of Submit Disabled
</title>
<style>
/* The following tag selector body use the font-family and background-color properties for body of a page*/

body {
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
}
/* Following container class used padding for generate space around it, and also use a background-color for specify the color lightblue as a background */  
.container {
padding: 50px;
background-color: lightblue;
}
/* The following tag selector input uses the different properties for the text filed. */

input[type=text] {
  width: 100%;
  padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
 border: none;
 background: #f1f1f1;
}
input[type=text]:focus {
background-color: orange;
outline: none;
}
 div {
            padding: 10px 0;
        }
/* The following tag selector button uses the different properties for the Button. */

button {
  color: red;
  padding: 16px 20px;  
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;

  opacity: 0.9;
}
</style>
</head>
<body>
<form>
<div class="container">
<center>  
<h1> Registration Form </h1> 
</center>
<label> Firstname: </label> 
<input type="text" name="firstname" placeholder= "Enter your Firstname" size="15" required /> 
<label> Middlename: </label> 
<input type="text" name="middlename" placeholder="Enter your Middlename" size="15" /> 
<label> Lastname: </label>  
<input type="text" name="lastname" placeholder="Enter your Lastname" size="15"required /> 
<div>
<label> 
Gender :
</label><br>
<input type="radio" value="Male" name="gender" checked > Male 
<input type="radio" value="Female" name="gender"> Female 
<input type="radio" value="Other" name="gender"> Other
</div>
<label for="email"> Email: <label>
<input type="text" placeholder="Enter Your Email ID" name="email" required>

In this example, the disabled attribute is used to disable the Submit button. If you click on the "Submit Form" button, without filling the values, then it will not show the constraints included. 

<button type="submit" value="submit" disabled> Submit Form </button>
</form>
</body>
</html>

输出

示例 2： 以下示例禁用了重置按钮。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Example of Reset button disabled
</title>
<style>
/* The following tag selector body use the font-family and background-color properties for body of a page*/

body {
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
}
/* Following container class used padding for generate space around it, and also use a background-color for specify the color lightblue as a background */  

.container {
padding: 50px;
background-color: lightblue;
}
/* The following tag selector input uses the different properties for the text filed. */
input[type=text] {
  width: 100%;
  padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
 border: none;
 background: #f1f1f1;
}
input[type=text]:focus {
background-color: orange;
outline: none;
}
 div {
            padding: 10px 0;
        }
/* The following tag selector button uses the different properties for the Button. */
button {
  color: red;
  padding: 16px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}
</style>
</head>
<body>
<form>
<div class="container">
<center>  
<h1> Registration Form </h1> 
</center>
<label> Firstname: </label> 
<input type="text" name="firstname" placeholder= "Enter your Firstname" size="15" required /> 
<label> Middlename: </label> 
<input type="text" name="middlename" placeholder="Enter your Middlename" size="15" /> 
<label> Lastname: </label>  
<input type="text" name="lastname" placeholder="Enter your Lastname" size="15"required /> 
<div>
<label> 
Gender :
</label><br>
<input type="radio" value="Male" name="gender" checked > Male 
<input type="radio" value="Female" name="gender"> Female 
<input type="radio" value="Other" name="gender"> Other
</div>
<label for="email"> Email: <label>
<input type="text" placeholder="Enter Your Email ID" name="email" required>

In this example, the disabled attribute is used to disable the Reset button. If you fill the form and then click on the 'Reset a form' button, then it will not reset the values of the above form.

<button type="reset" value="submit" disabled> Reset a Form </button>

</form>
</body>
</html>

输出