HTML - disabled 属性

HTML disabled 属性是一个布尔属性，可以应用于各种表单元素，使它们非交互式或不可编辑。

当元素被禁用时，用户无法聚焦、单击或更改该元素，并且它不会包含在表单提交中。它可以用于以下元素：<input>、<fieldset>、<button>、<textarea>、<select>、<option>和<optgroup>等。

语法


<tag disabled>

适用于

下面列出的元素允许使用 HTML disabled 属性。

元素	描述
<input>	HTML <input> 标签用于指定输入字段。
<textarea>	HTML <textarea> 标签用于表示多行纯文本编辑控件。
<button>	HTML <button> 标签用于嵌入可点击按钮。
<fieldset>	HTML <fieldset> 标签用于对 Web 表单中的多个控件和标签进行分组。
<select>	HTML <select> 标签用于 make 下拉列表以选择项目。
<option>	HTML <option> 标签用于下拉列表内的名称项。
<optgroup>	HTML <optgroup> 标签用于在 select 元素中将相关选项元素组合在一起。

HTML disabled 属性的示例

下面的示例将说明 HTML disabled 属性，我们应该在哪里以及如何使用此属性！

禁用输入元素

在以下示例中，我们将在输入字段中使用 disabled 属性。


<!DOCTYPE html>
<html lang="en">
<head>
	 <title>HTML disabled attribute</title>
</head>

<body>
	 <!--example of the 'disabled' attribute-->
	 <p>'disabled' attribute with input element.</p> 
	 Text(disabled): 
	 <input type="text" 
			placeholder="Disabled"
			disabled>
	 <input type="text" 
			placeholder="Not disabled">
</body>

</html>

Disable button 元素

考虑到另一种情况，我们将使用带有按钮元素的 disabled 属性。


<!DOCTYPE html>
<html lang="en">

<head>
	 <title>HTML disabled attribute</title>
</head>

<body>
	 <!--example of the 'disabled' attribute-->
	 <p>'disabled' attribute with button element.</p>
	 <button disabled>Disabled</button>
	 <button>Not Disabled</button>
</body>

</html>

禁用 fieldset 元素

让我们看一下以下示例，其中我们将使用 disabled 属性和 fieldset 元素。


<!DOCTYPE html>
<html lang="en">

<head>
	 <title>HTML disabled attribute</title>
</head>

<body>
	 <!--example of the 'disabled' attribute-->
	 <p>'disabled' attribute with fieldset element.</p>
	 <fieldset disabled>
			<legend>Login Form</legend> 
			Username: 
			<input type="text" 
				 placeholder="username">
			<br> 
				 Password: 
			<input type="password" 
				 placeholder="password">
			<br>
			<button>Login</button>
	 </fieldset>
</body>

</html>

禁用 select 元素

在此示例中，将使用 disable 属性禁用整个 select 标签


<!DOCTYPE html>
<html>

<body>
<h1>Disabled Select Element</h1>
<form action="html/index.htm">
	 <label for="fruits">Choose a fruit:</label>
	 <select id="fruits" name="fruits" disabled>
			<option value="orange">Orange</option>
			<option value="lemon">Lemon</option>
			<option value="mango">Mango</option>
			<option value="pineapple">Pineapple</option>
	 </select>
	 <br><br>
	 <input type="submit" value="Submit">
</form>

</body>
</html>

在下拉列表中禁用 optgroup

在此示例中，我们将使用 disabled 属性在选择下拉列表中禁用一组选项


<!DOCTYPE html>
<html>
<body>

<h1>The optgroup disabled attribute</h1>

<form action="html/index.htm">
	<label for="fruits">Choose a fruit:</label>
	<select name="fruits" id="fruits">
		<optgroup label="Citrus Fruits">
			<option value="orange">Orange</option>
			<option value="lemon">Lemon</option>
		</optgroup>
		<optgroup label="Tropical Fruits" disabled>
			<option value="mango">Mango</option>
			<option value="pineapple">Pineapple</option>
		</optgroup>
	</select>
	<br><br>
	<input type="submit" value="Submit">
</form>

</body>
</html>

下拉列表中的禁用选项

在此代码中，我们将使用 disable 属性来禁用下拉列表中的选项。


<!DOCTYPE html>
<html>
<body>

<h1>Option disabled attribute</h1>

<form action="html/index.htm">
	<label for="fruits">Choose a car:</label>
	<select>
		<option value="volvo" disabled>Volvo</option>
		<option value="Maruti">Maruti</option>
		<option value="vw">VW</option>
		<option value="car98">car98</option>
	</select>
	<br><br>
	<input type="submit" value="Submit">
</form>

</body>
</html>

禁用 textarea 元素

在此示例中，我们使用 disable 属性禁用 textarea 标签


<!DOCTYPE html>
<html>
<body>

		<h1>The textarea disabled attribute</h1>
	  
		<textarea disabled rows="7" cols="20">
				At QikepuCom you have access to multiple 
				courses to upskill your knowledge. We offer free Qikepu
				in all web development technologies.
		</textarea>

</body>
</html>

用于启用已禁用元素的脚本

以下示例，我们将使用带有输入标签的 disabled 属性，并使用 javascript 在单击按钮时启用它。


<!DOCTYPE html>
<html lang="en">
<head>
	 <meta charset="UTF-8">
	 <title>Enable Text Input</title>
	 <script>
			function enableInput() {
				 document.getElementById("textInput").disabled = false;
			}
	 </script>
</head>
<body>
	 <h3>Click the button to enable text input</h3>
	 <label for="textInput">Enter Text:</label>
	 <input type="text" id="textInput" disabled>
	 <button onclick="enableInput()">Enable Input</button>
</body>
</html>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

打印本页