HTML：发布空/禁用表单元素的最佳实践答案

【问题标题】：HTML: Best practice for POSTing empty/disabled form elementsHTML：发布空/禁用表单元素的最佳实践
【发布时间】：2012-04-17 19:14:55
【问题描述】：

我有一个表单，它用作数据库记录上 CRUD 的接口。表单上的某些元素是相互依赖的，因此如果一个字段的值为 X，则其他字段应由用户填写并填写。

一个简单的例子可能是个人信息部分：

<select name="relationship-status">
    <option value="single">Single</option>
    <option value="married">Married</option>
</select>

<input type="text" name="spouse-first-name" />
<input type="text" name="spouse-last-name" />

...如果 relationship-status 设置为 married，则需要字段 spouse-first-name 和 spouse-last-name，否则将被禁用（或隐藏）。

我的问题是，在这个例子中，当一个人从已婚变成单身并想要更新他们的数据时，我们还想清除配偶姓名值并将其发布回服务器，以便清除这些值在数据库中。当它们更改为single 时，我们可以使用 JavaScript 为它们清除字段，但是如果我们禁用表单元素以使它们无法编辑它们，那么在提交表单时它们不会被 POST。

我可以想到以下解决方案：

我们可以将它们设为 readonly 而不是 disabled，但该方法仅适用于某些表单控件（具体而言，它不适用于其他 select 元素），因此这不是一个选项.
我们可以将这些字段中的每一个复制为 hidden 输入，该输入将随表单一起发布，但用户不可编辑，但这似乎是一种 hack。
我们还可以在提交之前启用禁用的字段，然后在之后重新禁用它们。这是我现在正在使用的方法，但我觉得我错过了一些东西，并且必须有更好的方法。

有什么我没有想到的，或者更明智的方式来完成这两者：

不允许用户编辑字段，并且
允许字段的值与表单一起发布，即使是空白。

【问题讨论】：

您应该努力在服务器端强制执行数据有效性。这意味着当某人将状态更改为“单身”时，无论 POST 值如何，服务器都应清除配偶姓名。
同意。客户端验证是为了制作更好的 UI。 服务器端验证是为了强制执行数据完整性和业务规则。
谢谢你们，我可能会出于其他原因这样做；但是，它并没有真正回答我提出的问题。在其他情况下，服务器验证根本无济于事。

标签： html forms

【解决方案1】：

我的建议是，除了在客户端进行验证之外，在javascript中添加函数form.submit()，如果有人禁用JS将无法提交表单，另外同意其他人cmets，添加服务器验证。

【讨论】：

【解决方案2】：

我发现最强大和最不笨拙的解决方案是对除<select> 之外的所有元素使用readonly 属性。对于<select> 元素，我只是禁用了<option> 子元素当前未被选中。这有效地防止了用户改变值。然后我为<select> 着色，就好像它被禁用了灰色背景一样以完成错觉。此时，所有表单元素都将随表单一起发布，即使没有值，也不管它们是否“禁用”。

【讨论】：