极客笔记CSS 如何指定一个输入元素应该被禁用
在网页上使用表单时有时需要禁用任何输入字段。例如，防止用户在完成表单中的先前步骤之前不允许使用某些输入字段。同样，也可以通过禁用表单字段来防止用户提交无效数据或伪造数据。
为了解决上述问题，我们有不同的方法可以用来禁用HTML中的输入元素，比如使用”disabled”属性、JavaScript和CSS。在本文中，我们将看到如何指定一个输入元素应该被禁用。
无论您是一个刚刚入门的网页开发人员，还是一个经验丰富的开发人员想要更新自己的知识，本文将为您提供所需的信息，以有效地禁用网页上的输入元素。
禁用输入元素的不同方法
方法1：使用”disabled”属性
禁用HTML输入元素的第一种方法，也可以说是最简单的方法，是使用<input>元素中可用的”disabled”属性。该属性可以添加到任何输入元素上，并阻止用户与该元素进行交互。
当输入元素被禁用时，它无法被编辑、选择或作为表单的一部分提交。通常使用该属性来向用户表示该输入不可用，或者防止用户提交无效数据。
语法
以下是使用”disabled”属性禁用输入元素的语法，使用以下代码-
<input type="number" name="phone" disabled>
在上面的代码中，我们有一个输入字段，类型为数字，使用HTML中的元素的”disabled”属性禁用。
示例
在这个示例中，使用元素中可用的属性禁用了名为”phone”的输入元素。使用”disabled”属性来禁用输入元素。
<html>
<head>
<title>Example to disable the input element using disabled attribute method </title>
</head>
<body>
<h2>Welcome to Tutorialspoint</h2>
<form>
<label for="name">Enter your name:</label>
<input type="text" id="name" name="name">
<br>
<label for="phone">Enter your phone number:</label>
<input type="text" id="phone" name="phone" disabled>
<br>
<label for="user">Enter your username:</label>
<input type="text" id="user" name="user">
<br>
<label for="password">Enter your password:</label>
<input type="password" id="password" name="password">
<br>
<input type="add" value="Submit">
</form>
</body>
</html>
方法2：使用JavaScript
在HTML输入元素上禁用的第二种方法是使用JavaScript。当需要根据用户输入或其他因素动态禁用元素时，这种方法非常有用。
使用JavaScript方法的一个优点是它允许我们根据用户输入或其他条件动态地添加或移除“disabled”属性，当根据用户操作或其他因素需要禁用输入元素时，这非常有益。
该方法涉及使用JavaScript代码访问输入元素并将其“disabled”属性设置为True，以下是使用相同语法的示例：
语法
以下是使用JavaScript禁用输入元素的语法，请使用以下代码：
document.getElementById("disabledInputField").disabled = true;
在上述代码中，我们有一个javascript代码，其中输入元素的ID为“disabledInputField”，并且还有一个“disabled”属性设置为true。现在，任何ID设置为“disabledInputField”的输入元素将被禁用，不允许用户访问它。
示例
在这个示例中，使用JavaScript禁用了id和name都为“name”的输入元素。要禁用输入元素，我们有一个名为“Submit”的按钮，当按钮被点击时调用一个名为“disablename()”的函数，它将“name”输入元素的“disabled”属性设置为true。
<html>
<head>
<title>Example to disable the input element using JavaScript method</title>
<script>
function disableName() {
document.getElementById("name").disabled = true;
}
</script>
</head>
<body>
<h2> Welcome to Tutorialspoint </h2>
<form>
<label for="name">Enter your name:</label>
<input type="text" id="name" name="name">
<br>
<label for="phone">Enter your phone number:</label>
<input type="text" id="phone" name="phone">
<br>
<label for="user">Enter your username:</label>
<input type="text" id="user" name="user">
<br>
<label for="password">Enter your password:</label>
<input type="password" id="password" name="password">
<br>
<input type="add" value="Submit">
</form>
</body>
</html>
方法3：使用CSS
在这种方法中，我们将使用CSS来禁用输入元素。禁用输入元素的CSS方法涉及使用CSS代码来对禁用的输入元素进行样式设置，以使用户明确知道他们无法与其进行交互。
语法
下面是使用CSS禁用输入元素的语法，使用以下代码−
input[disabled] {
opacity: 0.8;
pointer-events: none;
}
在上面的代码中，我们有一个CSS代码，在其中输入元素的disabled属性设置为true。在这里，为了禁用输入元素，我们将不透明度设置为0.8，并且将pointer-events设置为none，因为这两个CSS属性都会使输入元素被禁用，最终不允许用户访问它。
示例
在这个示例中，ID和名称为”phone”的输入元素被CSS禁用。为了禁用输入元素，我们使用了CSS代码，并将带有”disabled”属性的任何输入元素的不透明度设置为0.8，并将”pointer-events”属性设置为”none”。所有这些CSS属性将使输入元素变为禁用状态。
<!DOCTYPE html>
<html>
<head>
<title>Example to disable the input element using CSS method</title>
<style>
input[disabled] {
opacity: 0.8;
pointer-events: none;
}
</style>
</head>
<body>
<h2> Welcome to Tutorialspoint </h2>
<form>
<label for="name">Enter your name:</label>
<input type="text" id="name" name="name">
<br>
<label for="phone">Enter your phone number:</label>
<input type="text" id="phone" name="phone" disabled>
<br>
<label for="user">Enter your username:</label>
<input type="text" id="user" name="user">
<br>
<label for="password">Enter your password:</label>
<input type="password" id="password" name="password">
<br>
<input type="add" value="Submit">
</form>
</body>
</html>
结论
在本文中，我们看到了如何禁用输入元素以及使用不同的方法，包括使用“禁用（disabled）”属性，JavaScript和CSS。在这三种方法中，“禁用（disabled）”属性可用于元素，防止用户能够使用输入元素。我们还详细介绍了使用JavaScript和CSS进行禁用的方法。每种方法都有其自身的利弊，这取决于项目的需求。