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

Question

我希望有一组HTML文本<input>可以同时显示为灰色(禁用).我也希望他们所处的整个区域都以某种方式变灰或至少明显禁用.我在桌面应用程序中看到过这样的事情.

有什么想法以简单/优雅的方式去做吗？我试图避免手动每个设置到disabled="disabled",并且还具有一个区域包围<input>的,指示该表格的整个部分是不可编辑的.

编辑:对不起,我应该提一些事情......

1. 一切都是本地的.我没有使用PHP或ASP或类似的东西......只是HTML,JavaScript和CSS.也没有jquery!
2. 我想用JavaScript动态启用/禁用"区域"
3. 这不是一个<form>,只是一堆<input>的

Answer 1

disabled ="disabled"参数是执行此操作的标准方法,您可以使用类似jQuery的方法动态禁用字段集中包含的所有表单元素(这是对相关表单元素进行分组的标准方法).

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

Answer 2

for(i=0; i<document.FormName.elements.length; i++) {
    document.FormName.elements[i].disabled=true;
}
document.getElementById("surroundingarea").style.backgroundColor = "#CCCCCC";

使用名称FormName循环遍历表单元素并禁用每个元素..然后更改周围元素的背景颜色

Answer 3

请注意：如果你这样做 disabled

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

你想要做的是：

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

如果您的表单在一个

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

这能切蛋糕吗？

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