如何制作一个灰色的 HTML 表单？

Posted 2023-02-22

【中文标题】如何制作一个灰色的 HTML 表单？

【英文标题】：How to make a greyed-out HTML form?

【发布时间】：2011-04-16 22:23:32

【问题描述】：

我想要一组 html 文本 <input> 可以同时全部变灰（禁用）。我还希望他们所在的整个区域以某种方式变灰或至少明显禁用。我已经在桌面应用程序中看到过类似的事情。

有什么简单/优雅的方法吗？我试图避免手动将每个设置为disabled="disabled"，并且在<input> 周围还有一个区域，表示表单的整个部分都是不可编辑的。

编辑：对不起，我应该再提几件事...

一切都是本地的。我没有使用 php 或 ASP 或类似的东西...... 只是 HTML、javascript 和 CSS。也没有 jquery！ 我想使用 JavaScript 动态启用/禁用“区域” 不是<form>，只是一堆<input>的

【问题讨论】：

您想使用静态 HTML 禁用 <input/> 元素还是使用 javascript 或其他方式动态禁用这些元素？我在this question中对动态形式进行了一定程度的探索；甚至为它创建了一个jQuery plugin。

【参考方案1】：

请注意：如果你这样做了disabled

如果用户提交表单，输入元素将不会被传输。

你想要做的是：

<input type="text" name="surname" value="Korpela" readonly>

如果你的表单在一个

<div style="background-color: grey;">

这样会切蛋糕吗？

https://www.cs.tut.fi/~jkorpela/forms/readonly.html

【讨论】：

他想让它变灰。 readonly 不这样做，它只是禁用键盘控制。

【参考方案2】：

这里的人有循环的答案 - 没必要。使用.children()。

$('form').children().prop('disabled',true)

jsfiddle

【参考方案3】：

disabled="disabled" 参数是执行此操作的标准方法，您可以使用 jQuery 之类的东西动态禁用字段集中包含的所有表单元素（这是对相关表单元素进行分组的标准方法）苍蝇。

或者，您可以在字段集顶部放置一个部分透明的 div。这也将提供一些阻止鼠标点击的表单元素，但不能防止对它们进行制表符。您仍然应该禁用表单元素本身。

【讨论】：

我尝试在提交时禁用所有输入。这似乎会导致 MVC3 出现问题。当我禁用表单中的所有内容时，它不会正确回发模型。

默认情况下，禁用的 HTML 元素不会将它们的值传播到发布请求。如果不需要，请使用只读

请注意，OP 明确表示他不想要 jQuery 解决方案，这就是为什么我个人更喜欢***.com/a/3789857/1035977

【参考方案4】：

如果您说您不想使用“禁用”属性 - 那么您还可以在 HTML 表单上放置一些透明的 DIV，这（正确样式）可以使外观表单被禁用 - 用户将能够看到表单，但不要单击/输入任何信息...然后，根据某些事件，您只需使用 JS 删除/隐藏此 DIV 并使表单“启用”。

【讨论】：

我喜欢这个“灰色”区域的想法。如何让 div 漂浮在另一个区域上？我以前只做过内联 div...

您可以通过使用绝对/相对 CSS 定位来实现。可以直接通过 JS 或使用一些 JS 库如 jQuery 来调整这些，这让事情变得更容易......

【参考方案5】：

您可以简单地使用 jQuery 来禁用该区域中的所有表单元素，例如：

  //assuming that area is a div element with id lets say disabled-area
  $(document).ready(function()
    $("#disabled-area input").attr("disabled", "disabled");
  );

我没有检查它，所以我希望这会起作用:)

【讨论】：

OP 明确表示他不想要 jQuery 解决方案...

【参考方案6】：

for(i=0; i<document.FormName.elements.length; i++) 
    document.FormName.elements[i].disabled=true;

document.getElementById("surroundingarea").style.backgroundColor = "#CCCCCC";

遍历表单中名为 FormName 的元素并禁用每个元素。然后更改周围元素的背景颜色

【参考方案7】：

您可以单步执行所有表单元素并禁用它们。未经测试，但请尝试以下方法：

for (x=0; x<document.YOURFORM.elements.length; x++) 
     document.YOURFORM.elements[x].disabled=true;