如何在单个表中处理多个<form>并进行HTML验证
Den*_*nis 8 html forms html-table html-validation
问题 - 似乎我不能将两个表单嵌入到单个表中并使我的HTML验证.例如,W3 Validator告诉我,Element <form> not allowed as child of element <tr> in this context. 我没有办法绕过验证错误.
我想要实现的是:
- 在一个html表"行"我有,可以更改一些输入值,然后在行的末尾使用我的"保存"按钮,以保存它们
- 如果我必须删除一行,我可以按删除按钮.
- 在UI方面,我有两个表单,每行一个用于保存/删除按钮,这对我来说是有意义的.
- 我可以有几行,每行都有自己的Save/Delete按钮
示例UI
数字是输入字段,保存/删除是按钮.
我在下面简化了不符合要求的HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
<table>
<tr>
<form>
<td><input type="text" name="row_id" value="1"></td>
<td><input type="text" name="five" value="5"></td>
<td><input type="text" name="three" value="3"></td>
<td><input type="submit" value="Save This Row"></td>
</form>
<td><form>
<input type="text" name="row_id" value="1">
<input type="submit" value="Delete This Row">
</form></td>
</tr>
</table>
</body>
</html>
HTML工作令人惊讶,但它没有验证.我正在寻求一个解决方案,它同时做到了 - 工作和验证.
你有几个选择:
- 保持您的代码不变.这是无效的,但它确实有效.它可能会在未来的某些浏览器中失败,但这不太可能.
- 重新组织代码,以便所有字段都在一个表单中,并将整个表放在该表单中.这可能需要更改服务器端表单处理程序,并且可能还需要更改HTML.
- 重新组织它,以便您有一个双列表,第一列包含包含内部单行表的表单.这要求您显式设置内部表的列宽,使整个看起来像一个表.
- 将"保存"按钮放在表单中(单元格内部),并
input使用form属性从按钮中引用这些表单.这样,每个表单都在一个单元格内部,并且input它将与那些属性之外的元素连接.这将是最干净的解决方案,但formIE不支持该属性.