HTML：发布空白/禁用表单元素的最佳做法

我有一个表单用作数据库记录CRUD的接口。表单中的某些元素是相互依赖的，因此如果一个字段的值为X，则其他字段应由用户填写并填写。HTML：发布空白/禁用表单元素的最佳做法

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

<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设置为marriedspouse-first-name和spouse-last-name会被要求，将被禁用（或隐藏）除此以外。

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

我能想到以下解决方案：

我们可以让他们readonly，而不是disabled，但该方法只适用于某些表单控件（具体而言，它并不适用于其他select元素工作），所以这不是一个选项。
我们可以复制这些字段作为hidden输入，将与形式发布的，而不是由用户可编辑的，但是这似乎是这样的黑客。
我们也可以在提交之前启用禁用的字段，然后再重新禁用它们。这是我现在使用的方法，但我觉得我错过了一些东西，而且必须有更好的方法。

有什么我没有想到的，或者实现两者的更明智方式：

没有允许用户编辑字段，
允许该字段的值即使空白，也可以使用表单发布。

来源

2012-04-17 FtDRbwLXw6

您应该努力在服务器端强制执行数据有效性。这意味着当有人将状态更改为“单个”时，配偶名称应由服务器清除，而不管POST值如何。 – 2012-04-17 19:18:22

同意。客户端验证是为了制作更好的用户界面。 *服务器端*验证是为了执行数据完整性和业务规则。 – David 2012-04-17 19:19:43

谢谢你们，我可能会这样做是出于其他原因;然而，它并没有真正回答我提出的问题。还有其他的场景，服务器验证根本没有帮助。 – FtDRbwLXw6 2012-04-17 19:36:42

我发现最稳健和最不灵活的解决方案是对<select>以外的所有元素使用readonly属性。对于<select>元素，我只是禁用<option>子元素，目前未选中。这有效地防止了用户改变值。然后，我将<select>的颜色变为灰色背景以禁用，以完成错觉。在这一点上，所有的表单元素都将随表单一起发布，即使没有值，也不管它们是否“禁用”。

来源

2012-07-10 21:03:30 FtDRbwLXw6

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

来源

2012-04-17 19:34:09 jcho360

HTML：发布空白/禁用表单元素的最佳做法

回答

相关问题