没有 <form> 的 <input> 格式是不是正确？

Posted

技术标签:

【中文标题】没有 <form> 的 <input> 格式是不是正确？【英文标题】：Is <input> well formed without a <form>?没有 <form> 的 <input> 格式是否正确？ 【发布时间】：2011-03-18 16:45:25 【问题描述】：

&lt;input&gt; 不包含在&lt;form&gt; 中是否有效？

有一个标记页面中某些字段的过程，并且刚刚找到一个页面，其中的输入字段没有按我的预期进行标记。 我花了一段时间，但发现获取表单元素然后获取字段的过程是导致这些被遗漏的原因，因为没有表单。

【问题讨论】：

@Adriano - 我的想法完全正确。跑过去看看！ 当然w3c validator，我真的应该补充一下为什么会很好。 我的意思是它可能对某些版本的 html 有效，但对其他版本无效，在这种情况下，验证器比阅读标准要快得多。 另见：Is there any danger to using input fields outside/without forms in HTML/javascript pages? 【参考方案1】：

&lt;input&gt; 没有&lt;form&gt; appears valid，是的（至少对于 html 4.01，请看接近 17.2.1 的末尾）：

用于创建控件的元素 通常出现在 FORM 中 元素，但也可能出现在外部 一个 FORM 元素声明的时候 它们用于构建用户 接口。这在 关于内在事件的部分。注意 窗体外的控件不能 成功控制。

【讨论】：

能够将表单数据提交到服务器（Ajax 除外）。 @PhilipSmith 我知道您的评论是在 很久 之前写的。但为什么你认为这很奇怪或毫无意义？如果控件不与服务器通信，我为什么要创建表单？ 什么是“成功控制”？ 当提交表单进行处理时，某些控件的名称与当前值配对，这些对与表单一起提交。提交名称/值对的那些控件称为成功控件。 w3c @adam-beck 例如，某个 AngularJS 网站处理输入，操作数据，并将其发送到 api。表单的 HTML 模板可以在没有任何表单标签的情况下编写，并且它们与服务器通信很好。【参考方案2】：

我使用W3C validator 检查了以下内容，并确认这是有效的。

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
</head>
<body>
  <input type='text' />
</body>
</html>

【讨论】：

【参考方案3】：

参考更新的规范：

HTML 5.2 - W3C Recommendation (14 December 2017)

与表单相关的元素可以与 &lt;form&gt; 元素有关系，该元素称为元素的表单所有者。如果与表单相关的元素没有与&lt;form&gt; 元素关联，则称其表单所有者为空。

【讨论】：

【参考方案4】：

According to MDN it is possible:

请注意，始终可以在元素之外使用表单小部件，但如果您这样做，则该表单小部件与任何表单无关。这样的小部件可以在表单之外使用，但是你应该对这样的小部件有一个特殊的计划，因为它们自己不会做任何事情。您必须使用 JavaScript 自定义它们的行为。

HTML5 在 HTML 表单元素上引入了 form 属性。它应该让您显式地将元素与表单绑定，即使它没有包含在表单标记中。不幸的是，目前，跨浏览器的此功能的实现还不足以依赖它。

【讨论】：

【参考方案5】：

我知道这个问题很老了，但是，我已经成功地构建了许多没有表单标签的复杂数据输入页面。尽管许多人不认为它是“标准的”，但在没有&lt;form&gt; 的情况下使用输入并不是不合适的。在我的项目中，我需要完全控制页面的行为方式，而默认的表单行为会妨碍我。能够执行页面和字段级别的验证（使用 JS）并通过 Ajax 调用等“提交”数据......事实上，这是我这些天的首选方式。

需要大量的 JS，但它并不难，并且很容易作为可重用代码完成。

还有其他一些情况，我不使用带有输入的表单，例如登录页面。

希望这个推荐对某人有所帮助。

【讨论】：

【参考方案6】：

在我看来，我们可以在表单之外使用输入，甚至可以将数据发送到服务器而不将输入放在表单中，但是为了 SEO 和网站可读性（对于视障人士）（与一些 HTML5 中的语义内容标签，如部分、页脚、页眉之类的），我们必须在表单标签中使用输入。重要的是，我们确保我们使用的代码对包括视障人士在内的所有人都可用，因为它是不仅仅是网站，而是为每个人提供信息访问。

【讨论】：

【参考方案7】：

是的，您可以在没有表单的情况下进行有效输入。

【讨论】：

嗯，你可以在“是”的背后添加一些证据。或者澄清这适用于哪些版本的 HTML。不过，我不会贬低你。 那么根据你的理由，如果用户可以直接去 W3 并自己查找它，为什么还要有 SO 呢？我也不会对您投反对票，但我必须同意以清晰简洁的方式进行更多解释的人会获得赞成票，因为解释和正确答案是对 SO 最有帮助的。

以上是关于没有 <form> 的 <input> 格式是不是正确？的主要内容，如果未能解决你的问题，请参考以下文章

JavaScriptDOM之表单操作

form表单提交页面不发生跳转

Jquery获取元素#form1：input和#form1 input 的区别

如何自定义自动完成视图？

如何通过js获得form中的input的value值，我的是document.form1.username.value 获取不到

图片选择器