html表单标签的用途是什么

Question

我不明白 html 中表单标签的用途。

我可以轻松地完美地使用任何输入类型，而无需使用表单标签。 将它包裹在输入周围似乎是多余的。

此外，如果我使用 ajax 调用服务器端页面，我可以简单地使用 jQuery。 唯一的例外是我注意到出于某种原因您必须将上传脚本包装在表单标签周围。

那么为什么表单仍然如此广泛地用于简单的事情，比如文本输入？ 这似乎是一件非常陈旧且不必要的事情。

我只是没有看到它的好处或需要。 也许我错过了一些东西。

Answer 1

您缺少的是对语义标记和 DOM 的理解。

实际上，您几乎可以使用 HTML5 标记做任何您想做的事情，并且大多数浏览器都会解析它。 上次我检查时，WebKit / Blink 甚至允许在<input> elements 中使用伪元素，这显然违反了规范 - Gecko 并没有那么多。 然而，就语义而言，对标记做任何你喜欢的事情无疑会使其无效。

为什么我们把<input>元素放在<form>元素里面？ 出于同样的原因，我们将<li>标签放在<ul>和<ol>元素内 - 这是它们所属的地方。 它在语义上是正确的，有助于定义标记。 当标记在语义上正确时，解析器、屏幕阅读器和各种软件可以更好地理解您的标记 - 当标记具有意义，而不仅仅是结构时。

<form>元素还允许您定义method和action属性，它们告诉浏览器在提交表单时要做什么。 AJAX 不是 100% 覆盖率的工具，作为 Web 开发人员，您应该练习优雅的降级 - 即使关闭 JS，也应该能够提交表单和传输数据。

最后，表单都在 DOM 中正确注册。 我们可以用 JavaScript 看一看。 如果你在这个页面上打开你的控制台，然后输入：

document.forms

您将获得页面上所有表单的精美集合。 搜索栏、评论框、答案框 - 所有适当的形式。 此界面可用于访问信息以及与这些元素进行交互。 例如，表单可以很容易地序列化。

这里有一些阅读材料：

• 语义 HTML
• HTML 表单指南

注意： <input>元素可以在表单之外使用，但是如果您打算以任何方式提交数据，则应该使用表单。

---

这是我翻转问题的答案的一部分。

我如何通过避免形式让我的生活变得更艰难？

首先也是最重要的 - 容器元素。 谁需要他们，对吧？！

您的小<input>和<button>元素肯定嵌套在某种容器元素中吗？ 他们不能只是漂浮在其他一切事物的中间。 所以如果不是<form> ，那又怎样？ 一个<div> ？ <span> ?

这些元素必须驻留在某处，除非你的标记是一团糟，否则容器元素可以只是一个表单。

不？ 哦。

在这一点上，我脑海中的声音非常好奇您如何为所有这些不同的 AJAX 情况创建事件处理程序。 如果您需要减少标记以节省字节，则必须有很多。 然后，您必须为与每个元素“集合”相对应的每个 AJAX 事件创建自定义函数 - 您必须单独或与类一起定位，对吗？ 没有办法真正对这些元素进行通用分组，因为我们已经确定它们只是在标记周围漫游，做任何事情直到需要它们。

所以你自定义了一些处理程序。

 $('#searchButton').on('click', function (e) { e.preventDefault(); var search = $('#mySearch'); $.ajax({ url: 'http://example.com/text', type: 'GET', dataType: 'text', data: 'query=' + search.val(), success: function (data) { console.log(data); } }); }); $('#login').on('click', function (e) { e.preventDefault(); var user = $('#username'), pass = $('#password'), rem = $('#remember'); $.ajax({ url: 'http://example.com/login', type: 'POST', data: user.add(pass, rem).serialize(), dataType: 'text', success: function (data) { console.log(data); } }); });

 <!-- No containers, extra markup is silly. --> <input type="text" id="mySearch" value="query" /> <button id="searchButton">Search</button> <input type="text" id="username" name="username" value="user" /> <input type="password" id="password" name="password" value="pass" /> <input type="checkbox" id="remember" name="remember" checked /> stay logged in <button id="login">Login</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

这是你说的部分：

'虽然我完全使用可重用的功能。 别夸大其词了。

很公平，但您仍然需要创建这些独特元素集或目标类集，对吗？ 您仍然必须以某种方式对这些元素进行分组。

借给我你的眼睛（或耳朵，如果你正在使用屏幕阅读器并需要一些帮助——我们可以为所有这些语义标记添加一些ARIA ，对吧？），看看通用形式的力量。

 function genericAjaxForm (e) { e.preventDefault(); var form = $(this); return $.ajax({ url: form.attr('action'), type: form.attr('method'), dataType: form.data('type'), data: form.serialize() }); } $('#login-form').on('submit', function (e) { genericAjaxForm.call(this, e).done(function (data) { console.log(data); }); });

 <form action="http://example.com/login" method="POST" data-type="text" id="login-form"> <input type="text" name="username" value="user" /> <input type="password" name="password" value="mypass" /> <label> <input type="checkbox" name="remember" /> Remember me </label> <button type="submit">Login</button> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

我们可以将它与任何常见的形式一起使用，保持我们优雅的退化，并让形式完整地描述它应该如何运作。 我们可以在保持通用风格的同时扩展这个基本功能——更模块化，更少麻烦。 JavaScript 只关心它自己的事情，比如隐藏适当的元素，或者处理我们得到的任何响应。

现在你说：

'但我将我的伪表单包装在具有特定 ID 的<div>元素中 - 然后我可以使用.find松散地定位输入，并.serialize它们，然后......'

哦，那是什么？ 您实际上将<input>元素包装在容器中吗？

那么为什么它还不是一种形式呢？

Answer 2

如果您希望能够在没有 AJAX 的情况下提交表单（这在开发的早期阶段可能很有用），那么表单标签仍然是必要的。 但即使可以使用 javascript 在没有表单标签的情况下提交数据，但仍然可以想到一些好处：

1. 在某些情况下，通过向人们展示您的意图，使用表单标签可以帮助人们阅读和理解您的代码。
2. “提交”方法在表单上可用。 如果您有一个带有 input[type=submit] 的表单，并且它没有被禁用，那么当有人在填写其他表单输入之一时点击“输入”时，表单将提交。 您仍然可以通过侦听输入元素上的 'keydown' 事件来做到这一点，但这是一个很好的 ui，您可以通过表单标签免费获得。
3. 还有一些其他东西只适用于表单标签，或者使用表单标签更容易。 开发人员最终会遇到这些情况，并决定始终在任何地方使用它们并避免问题更容易。 真的，真正的问题是，为什么不使用表单标签？

Answer 3

我有一个场景，单个网页有 3 个表单，所有表单都有单独的电子邮件字段（具有不同的 ID）。 起初我将它们包裹在单独的<div>中。 Safari 上的 iOS 自动填充行为很奇怪，直到我将它们全部包裹在<form>标签中。 其中一个表单只有一个输入字段，用于订阅新闻通讯。 当用户自动填写该输入时，网页将滚动到位于页面不同部分的下一个输入字段。

所以，感谢 Oka 的长篇文章。 应尽可能使用具有语义意义的标签，因为您永远不知道哪个浏览器/设备不能很好地处理其他解决方案。

Answer 4

HTML 元素表示一个文档部分，其中包含用于向 Web 服务器提交信息的交互式控件。

我们都熟悉 html 网页上的表单。 出于许多不同的原因，人们或公司要求我们提供电子邮件地址、名称和站点 URL。 如今在 Internet 上购买产品几乎是轻而易举的事，而且随着安全设备的出现，用于提交您的详细信息和辛苦赚来的钱的方法通常是通过表格执行的。

更多信息

链接一

链接二