HTML中disabled属性使用详解

HTML表单中，`disabled`属性是控制输入元素状态的关键。本文深入解析了`disabled`属性的使用方法及其与`readonly`属性的区别，助你轻松掌握HTML表单禁用技巧。`disabled`属性是一个布尔属性，只需在HTML标签中添加`disabled`即可禁用表单元素，使其不可编辑、不可点击，且值不会随表单提交。通过JavaScript，开发者可以动态控制`disabled`状态，实现条件表单、表单验证等功能。记住，被`disabled`的表单元素值不会被提交到服务器，这与`readonly`属性仅禁止修改但保留提交功能形成鲜明对比。掌握`disabled`属性，构建更健壮、用户友好的Web表单。

最直接且最常用的方法是使用disabled属性，它是一个布尔属性，只需在表单元素上添加disabled即可使其不可编辑、不可点击且无法通过Tab键聚焦，同时该元素的值不会随表单提交；disabled可用于input、textarea、select、button和fieldset等元素，而与readonly的区别在于：disabled完全禁用元素并阻止其值提交，readonly仅禁止修改但保留提交功能；通过JavaScript可动态控制disabled状态，设置element.disabled = true或false实现禁用与启用，典型应用场景包括条件表单、表单验证和防止重复提交；关键要点是被disabled的表单元素值不会被提交到服务器，这是HTML规范的要求，旨在确保数据完整性与业务逻辑一致性，因此在需要提交不可修改值时应使用readonly或hidden输入框。

HTML中要设置表单输入禁用，最直接也最常用的方法就是使用 disabled 属性。当你给一个表单元素加上这个属性，它就会变得不可编辑、不可点击，并且更关键的是，它的值不会被提交到服务器。

这个 disabled 属性，其实是一个布尔属性，这意味着你只需要在元素标签里写上 disabled 这个词，它就生效了。你不需要给它赋值，比如 disabled="true" 或者 disabled="disabled"，虽然这些写法也通常有效，但最标准的做法就是直接写 disabled。

它能用在很多表单元素上，比如：

• <input> (各种类型，如 text, checkbox, radio, button, submit 等)
• <textarea>
• <select> (以及其内部的 和 )
• 甚至
  ，如果你想禁用一整个区域的表单元素，这是个非常方便的办法。

举几个例子吧：

<input type="text" value="这段文字不能改" disabled>

<textarea disabled>
这段文本区域也不能编辑。
</textarea>

<select disabled>
  <option value="apple">苹果</option>
  <option value="banana" selected>香蕉 (选了也提交不了)</option>
&lt;/select&gt;

<button type="button" disabled>我是一个被禁用的按钮</button>

<fieldset disabled>
  <legend>这个区域都不能动</legend>
  &lt;input type=&quot;text&quot; value=&quot;输入框1&quot;&gt;
  &lt;input type=&quot;checkbox&quot;&gt; 复选框
</fieldset>

当一个元素被 disabled 后，它通常在视觉上会呈现出一种灰化的状态，用户无法通过鼠标点击、键盘输入或Tab键聚焦到它上面。最重要的是，当表单被提交时，所有带有 disabled 属性的表单元素，它们的值都不会作为表单数据的一部分发送到服务器。这在我看来，是 disabled 属性最核心的特性，也是它和 readonly 最本质的区别。

禁用（disabled）与只读（readonly）有什么区别？

这真的是一个老生常谈的问题，也是很多初学者容易混淆的地方。我个人在项目里，如果对这两个属性的理解不够透彻，就很容易在用户体验和数据处理上踩坑。

简单来说：

• disabled (禁用)：这个元素就“死”了。它不参与表单提交，用户不能与之互动（不能输入、不能点击、不能聚焦），视觉上通常是灰色的。你可以把它想象成一个被“冻结”的控件。它主要用于那些在特定条件下不应被用户操作或提交的数据。比如，一个注册表单，你可能需要用户勾选同意协议后，提交按钮才能被启用。
• readonly (只读)：这个元素是“活”的，但被“锁”住了。用户可以看到它的值，但不能修改它。然而，它仍然可以被聚焦，并且最关键的是，它的值会被提交到服务器。这就像你拿到一份合同，可以看，但不能在上面写字。readonly 主要用于展示信息，但又需要这些信息参与表单提交的场景。例如，一个用户ID，虽然用户不能改，但提交表单时需要这个ID。

来看看代码：

<!-- disabled 示例 -->
&lt;input type=&quot;text&quot; value=&quot;我被禁用了，不能改，也不会提交&quot; disabled&gt;

<!-- readonly 示例 -->
&lt;input type=&quot;text&quot; value=&quot;我只读，不能改，但会提交&quot; readonly&gt;

我经常这样理解：disabled 是关于“权限”和“状态”的控制，这个元素现在不应该被操作；而 readonly 则是关于“可编辑性”的控制，这个值是固定的，但它仍然是表单数据的一部分。搞清楚这个，能避免很多不必要的调试时间。

如何动态地启用或禁用表单元素？

在实际的网页应用中，表单元素的状态往往不是一成不变的，它会根据用户的操作或者某些业务逻辑动态地变化。这时候，JavaScript就派上用场了。

动态启用或禁用一个表单元素，其实就是操作它的 disabled 属性。JavaScript中，你可以通过访问DOM元素的 disabled 属性来设置它的状态，它也是一个布尔值。

• 禁用元素：将元素的 disabled 属性设置为 true。 element.disabled = true;
• 启用元素：将元素的 disabled 属性设置为 false。 element.disabled = false;

举个很经典的例子，一个复选框控制一个文本输入框的启用/禁用状态：

<input type="checkbox" id="enableInput">
<label for="enableInput">启用下方输入框</label>
<br>
&lt;input type=&quot;text&quot; id=&quot;myTextInput&quot; value=&quot;默认禁用&quot; disabled&gt;

<script>
  const enableCheckbox = document.getElementById('enableInput');
  const textInput = document.getElementById('myTextInput');

  enableCheckbox.addEventListener('change', function() {
    // 当复选框状态改变时
    if (this.checked) {
      textInput.disabled = false; // 启用输入框
      textInput.value = "现在可以输入了";
    } else {
      textInput.disabled = true;  // 禁用输入框
      textInput.value = "默认禁用";
    }
  });
</script>

这种动态控制在很多场景都非常有用，比如：

• 条件表单：只有当用户选择了某个选项后，相关的输入框才可用。
• 表单验证：在所有必填项都填写正确之前，提交按钮保持禁用状态。
• 防止重复提交：用户点击提交按钮后，立即禁用按钮，直到服务器响应。 对我来说，理解并灵活运用JavaScript来操作 disabled 属性，是构建交互式和用户友好型表单的关键一步。它不仅仅是视觉上的变化，更是对用户操作流程的一种引导和限制。

禁用元素的值还会被提交吗？

这是一个非常重要的问题，我发现很多人在使用 disabled 属性时，会忽略或者误解这一点。答案非常明确：被 disabled 的表单元素，它的值不会被提交到服务器。

这是HTML规范明确规定的行为。当浏览器准备发送表单数据时，它会遍历所有表单元素，但会跳过那些被标记为 disabled 的元素。这意味着，无论这些元素里面有什么默认值，或者它们在被禁用之前用户输入了什么，这些数据都不会出现在HTTP请求的参数中。

为什么要这样设计呢？我认为这主要是出于以下几个考量：

• 数据完整性与业务逻辑：如果一个元素被禁用，通常意味着它在当前状态下不应该参与到业务逻辑中。例如，一个订单确认页面，如果用户选择了“货到付款”，那么信用卡支付的输入框就应该被禁用，并且它的值（即使有）也不应该被提交，因为它与当前的支付方式不符。
• 避免不必要的数据传输：禁用元素的值不提交，可以减少网络传输的数据量，尽管对于单个元素来说微不足道，但在复杂的表单中累积起来也会有影响。
• 安全考量（部分）：虽然客户端的禁用状态不能作为后端安全验证的唯一依据（因为恶意用户可以轻易地通过开发者工具移除 disabled 属性），但它至少能在一定程度上防止普通用户误操作或提交不应提交的数据。后端始终需要对所有接收到的数据进行严格的验证。

与此形成鲜明对比的是 readonly 属性。一个 readonly 的输入框，虽然用户不能修改其内容，但它的值会被提交。所以，如果你需要某个值在表单提交时始终存在，但又不希望用户修改它，那么 readonly 才是正确的选择。

我个人在开发时，会特别注意这一点。如果我需要一个隐藏的值被提交，但我又不想让用户看到或修改，我会用 type="hidden" 的 input 标签。如果我需要一个值显示给用户看，但不能改，且需要提交，那就用 readonly。如果一个元素在当前状态下完全不应该参与表单提交，那就毫不犹豫地用 disabled。这种区分，对于构建健壮且逻辑清晰的表单至关重要。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~