问题 使用form属性并将输入元素放在HTML中的form标记之外是一种好习惯吗?


我刚刚注意到一种将输入元素放在form标签之外的有趣方法。

<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>

我只是想知道这样做是否常见。应该避免这种方法吗? 尝试谷歌搜索类似的讨论,但我真的不知道如何说这个。


5193
2017-11-18 19:19


起源

这样使用没有害处。 form 仅创建标记以指定属于哪个输入,发布方法等... - Litestone
我想知道这方面的最佳实践/性能问题。我可以想象的问题是,这种将元素放置在表单标记之外的方法似乎引入了UI灵活性,但为DOM操作添加了更多工作。 - Ji_in_coding


答案:


这不常见。在大多数情况下,它没有任何好处,但有一个缺点:一些旧的浏览器不支持 form 属性,所以事情就是不适用于它们。

一个 input 外面的元素 form 元素一直被允许。如果没有,这样的元素就不会参与任何表单提交 form 属性。但它可以与客户端脚本一起使用。

form 属性关联在支持浏览器时,元素具有表单,就像元素在表单内部一样。这在复杂的情况下是有用的,例如,表格的一行应该包含表单的字段,另一行表格的另一行等等。你不能在表单中只包含一行,这里属性来拯救:你放了一个 form 行的一个单元格内的元素,并在其他单元格的字段中引用该元素 form 属性。


10
2017-11-18 23:47



根据 caniuse.com IE中仍然不支持form属性 要么 边缘浏览器。 - Henders
如果您想在MS Edge中查看表单属性,请在此处投票: wpdev.uservoice.com/forums/257854-microsoft-edge-developer/... - mkurz
@Henders它现在在Edge! - Yuri


是的,你可以使用HTML5从HTML5开始 form 找到的输入属性  该 form 元件;就像你一样。

有关更多详细信息和示例,请参阅 HTML <input> 形式属性 在W3学校。


3
2017-11-18 19:24



MDN文档 form: developer.mozilla.org/en-US/docs/Web/HTML/Element/... - Max


将它们放在那里没有任何问题,如果您使用javascript等进行操作,它们将在DOM中可用,但是当您提交表单时,您的字段值将不会出现在提交的结果中。


1
2017-11-18 19:23



换句话说,当你将该表单提交到index.asp时,将没有可用的POST [text2](对不起php家伙,不知道在asp中看起来如何) - Dale
text2实际上是一起提交的。与text1 - Ji_in_coding
我想这就是我没有仔细阅读的原因。错过了表单属性。 - Dale


是的,您可以将输入元素放在表单之外,但是您将如何决定如何以及在何处发布这些元素的值。


0
2017-12-17 16:32