我有一个页面，用户可以使用很少的选项编辑大量（〜）数量的小项目，例如删除，关闭，打开和编辑项目名称。
我不知道为什么，但我现在使用的方法并没有给我“好代码”的感觉。我为每个项目的每个动作创建一个表单，所以我每个项目都有3个表单。我觉得表格是为了提交更多的信息。
幸运的是，我发现表格*属性html5提供（HTML5，yayy！）这种允许。我在页面上创建了一个删除表单，然后在每个项目上添加了一个按钮，在表单之外。
<button type="submit" form="delete_form" name="item-id" value="1">Delete</button>
不幸的是，编辑名称表格并非如此。如果我在页面上添加单个表单，则在每个项目上都有名称的输入元素，例如
<input name="item-name" type="text" form="update_form"/>
<button type="submit" form="update_form" name="item-id" value="1">Update</button>
...
<input name="item-name" type="text" form="update_form"/>
<button type="submit" form="update_form" name="item-id" value="2">Update</button>
然后在着陆页上，item-name将始终是最后一个输入的值。我没有测试过这个，但我假设在提交表单时，正在收集并发送指向该表单的所有输入字段及其form属性，然后在另一方面它们都被处理，我是获得最后一个因为它们都具有相同的名称并被覆盖。
如果有的话，我是否只能提交某个输入，具体取决于点击了哪个按钮，而不是全部？
注意：我可以想到一些hacky方式，比如在输入名称中包含item id，但它似乎不正确，如果根本没有id，那该怎么办。
答案 0 :(得分：1)
如果特定按钮只发布特定输入，那么制作单独的表单听起来就像是正确的方法。
顺便说一句，你的假设是正确的，所以另一个解决方案是将所有输入放在同一个表单中，但是给它们不同的名称，实际上是基于项目ID。添加唯一ID或名称是正确的方法。毕竟，如果你没有身份证，你怎么知道你在编辑什么？目前ID也在按钮中，对吧？你需要它。
无论如何，使用这样的表格，您只需点击一下提交按钮即可保存所有表格。
从用户体验的角度来看，也许这也是一种更好的方法。现在你必须分开保存每个编辑，这会导致页面刷新，这可能很烦人而且很慢。
我会在两个版本中制作一个表格。
非的Javascript
基本表单显示了要编辑的所有项目，每个项目后面都有一组单选按钮，可用于更新，删除，打开或关闭项目。
表单有一个大提交按钮，可以发布整个表单。根据单选按钮更新所有项目或更改其状态。
这样，用户可以相对轻松地编辑所有项目并发布更改，而无需进行大量页面刷新。
JavaScript添加
使用JavaScript / JQuery，您可以修改表单。将单选按钮更改为普通按钮并使用AJAX执行操作，但仅适用于它们所属的项目。最后的大按钮可以删除，表单可以更改，因此不再提交。这样，用户就可以进行丰富的交互，而不会不断重新加载页面。