使用表单属性并将输入元素放在 HTML 中的表单标记之外是一种好习惯吗？
Posted
技术标签:
【中文标题】使用表单属性并将输入元素放在 HTML 中的表单标记之外是一种好习惯吗？【英文标题】：Is it good practice to use the form attribute and put input elements outside form tag in HTML? 【发布时间】：2015-01-16 02:37:02 【问题描述】：今天我注意到了一种将输入元素放置在表单标签之外的有趣方式。
<html>
<!-- the form element -->
<form id="testform" method="post" action="index.asp">
<label for="text1">Text: </label>
<input type="text" id="text1" name="text1" />
<button type="submit">Submit</button>
</form>
<!--- element outside form tag -->
<label for="text2">Additional Text: </label>
<input type="text" id="text2" name="text2" form="testform" />
</html>
我只是想知道这样做是否很常见。应该避免这种方法吗？ 尝试在谷歌上搜索类似的讨论，但我真的不知道如何表达。
【问题讨论】：
这样使用没有坏处。form标签的创建只是为了指定输入属于哪个，发布方式等...
我想知道这方面的最佳实践/性能问题。目前我可以想象的问题是，这种将元素放置在表单标签之外的方法似乎引入了 UI 灵活性，但增加了 DOM 操作的工作量。
【参考方案1】：
是的，从 HTML5 开始，您绝对可以这样做，在位于 form 元素之外的输入上使用 form 属性；就像你一样。
有关更多详细信息和示例，请参阅 W3 学校的HTML <input> form Attribute。
【讨论】：
form 的 MDN 文档：developer.mozilla.org/en-US/docs/Web/HTML/Element/…【参考方案2】：
是的，您可以将输入元素放在表单之外，但您将如何决定如何以及在何处发布这些元素的值。
【讨论】：
【参考方案3】：这不是常见的做法。在大多数情况下，它没有任何好处，但也有一个缺点：一些旧浏览器不支持 form 属性，所以对它们不起作用。
始终允许在 form 元素之外的 input 元素。如果没有form 属性，这样的元素就不会参与任何表单提交。但它可以与客户端脚本一起使用。
form 属性在支持的浏览器中将元素与表单相关联，就好像该元素在表单内一样。这在复杂的情况下很有用，例如表格的一行应该包含一个表单的字段，另一个表单的另一行字段，等等。你不能只在一个表单中包含一行，这里属性来拯救：你把一个form元素放在一个单元格中该行并在具有form 属性的其他单元格的字段中引用该元素。
【讨论】：
根据caniuse.com，IE 或 Edge浏览器仍然不支持form属性。 如果您想在 MS Edge 中查看表单属性，请在此处投票：wpdev.uservoice.com/forums/257854-microsoft-edge-developer/… @Henders 现在在 Edge 中！【参考方案4】：将它们放在那里没有任何问题，如果您使用 javascript 等进行某些操作，它们将在 DOM 中可用，但是当您提交表单时，您的字段值不会出现在提交的结果中。
【讨论】：
换句话说，当您将该表单提交到 index.asp 时，将没有 POST[text2] 可用（抱歉 php 家伙，不确定它在 asp 中的外观） text2其实是一起提交的。带文本1 我想这就是我不仔细阅读的结果。错过了表单属性。以上是关于使用表单属性并将输入元素放在 HTML 中的表单标记之外是一种好习惯吗？的主要内容，如果未能解决你的问题，请参考以下文章