HTML如何设置表单输入禁用？disabled属性的用法是什么？

最直接且最常用的方法是使用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>

  登录后复制
  (以及其内部的

  <option>

  登录后复制
  和

  <optgroup>

  登录后复制
  )

• <button>

  登录后复制
• 甚至

  <fieldset>

  登录后复制
  ，如果你想禁用一整个区域的表单元素，这是个非常方便的办法。

举几个例子吧：

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

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

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

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

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

当一个元素被

disabled

disabled

disabled

readonly

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

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

简单来说：

• disabled

  登录后复制
  (禁用)：这个元素就“死”了。它不参与表单提交，用户不能与之互动（不能输入、不能点击、不能聚焦），视觉上通常是灰色的。你可以把它想象成一个被“冻结”的控件。它主要用于那些在特定条件下不应被用户操作或提交的数据。比如，一个注册表单，你可能需要用户勾选同意协议后，提交按钮才能被启用。

• readonly

  登录后复制
  (只读)：这个元素是“活”的，但被“锁”住了。用户可以看到它的值，但不能修改它。然而，它仍然可以被聚焦，并且最关键的是，它的值会被提交到服务器。这就像你拿到一份合同，可以看，但不能在上面写字。

  readonly

  登录后复制
  主要用于展示信息，但又需要这些信息参与表单提交的场景。例如，一个用户ID，虽然用户不能改，但提交表单时需要这个ID。

来看看代码：

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

<!-- readonly 示例 -->
<input type="text" value="我只读，不能改，但会提交" readonly>

我经常这样理解：

disabled

readonly

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74

查看详情

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

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

动态启用或禁用一个表单元素，其实就是操作它的

disabled

disabled

• 禁用元素：将元素的

  disabled

  登录后复制
  属性设置为

  true

  登录后复制
  。

  element.disabled = true;

  登录后复制
• 启用元素：将元素的

  disabled

  登录后复制
  属性设置为

  false

  登录后复制
  。

  element.disabled = false;

  登录后复制

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

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

<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

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

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

  disabled

  登录后复制
  属性），但它至少能在一定程度上防止普通用户误操作或提交不应提交的数据。后端始终需要对所有接收到的数据进行严格的验证。

与此形成鲜明对比的是

readonly

readonly

readonly

我个人在开发时，会特别注意这一点。如果我需要一个隐藏的值被提交，但我又不想让用户看到或修改，我会用

type="hidden"

input

readonly

disabled

以上就是HTML如何设置表单输入禁用？disabled属性的用法是什么？的详细内容，更多请关注php中文网其它相关文章！