HTML教程-HTML 按钮禁用
disabled 是HTML中 <button> 标签的属性，用于表示按钮已禁用。它是一个布尔属性。禁用的按钮不能被点击，会显示为灰色。
语法
<button disabled> 按钮上要显示的文本 </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 />
<p>
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.
</p>
<button type="submit" value="submit" disabled>Submit Form</button>
</div>
</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 />
<p>
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.
</p>
<button type="reset" value="submit" disabled>Reset a Form</button>
</div>
</form>
</body>
</html>输出：
浏览器支持
| 元素 |  Chrome |  IE |  Firefox |  Opera |  Safari |
|---|---|---|---|---|---|
<Button disabled> | 是 | 是 | 是 | 是 | 是 |
