HTML表单标签的目的是什么？

Question

我不明白HTML中form标签的目的。

我可以很容易地使用任何输入类型，而不必使用form标签。将它包裹在输入框周围似乎几乎是多余的。

此外，如果我使用AJAX调用服务器端页面，我可以简单地使用jQuery来实现。唯一的例外是我注意到必须将上传脚本包裹在form标签中，原因不明。

那么为什么在像文本输入这样简单的事情上，表单仍然被广泛使用呢？这似乎是一种非常陈旧和不必要的做法。

我只是看不到它的好处或需要。也许我漏掉了什么。

- D-Marc

---

你如何在没有HTML <form>标签的情况下定义表单的操作和方法？ - Darian

Ajax只是提交表单的另一种选择。表单可以用来发送请求，指定“方法、操作”，有些人希望回发以刷新其输入控件状态。 - Oluwafemi

如果我要用jQuery进行操作，我会在按钮上使用click()函数，并在其中使用ajax()函数。在我看来，这样的代码更简单易读。而且我可以轻松地用简单的javascript刷新页面。 - D-Marc

我很惊讶这个问题会收到踩。我刚刚在谷歌上搜索过这个问题。 - dwjohnston

@dwjohnston，你一定是新来的... - Stefano Borini

好问题！我不喜欢使用表单的其他原因包括它限制了你的页面结构（因为你不能在表单内嵌套表单），一些序列化怪癖，比如如果未勾选复选框，则会被忽略（这意味着通常我最终需要手动准备提交数据），以及因为HTML基本上是页面内容和结构，而JS则是动态的。表单元素有点重叠了JS的工作，而我喜欢我的页面结构化。 - 3snoW

Answer 1

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

实际上，你几乎可以使用任何HTML5标记，大多数浏览器都会解析它。我上次检查时，WebKit / Blink甚至允许在<input>元素中使用伪元素（pseudo-elements），这明显违反了规范，而Gecko则不太支持。然而，随意使用你的标记无疑会使其在语义方面失效。

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

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

最后，所有表单都已正确注册在DOM中。我们可以使用JavaScript查看此内容。如果您在此页面上打开控制台并键入：

document.forms

你将获得页面上所有表单的完整集合。搜索栏、评论框、答案框等所有适当的表单。此界面可用于访问信息，并与这些元素进行交互。例如，表单可以非常容易地序列化。

以下是一些阅读材料：

• 语义化HTML
• HTML表单指南

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

---

这是我反问问题的部分。

避免使用表单会让我的生活变得更加困难，首先是容器元素。谁需要它们呢？！

当然，你的小和元素嵌套在某种容器元素内部？它们不能漂浮在其他所有元素中间。那么如果不用，用什么？

？？

这些元素必须存在于某个地方，除非你的标记混乱无比，否则容器元素可以是一个表单。

不行吗？哦。

在这一点上，我脑海中的声音非常好奇，想知道您如何为所有这些不同的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 的

元素中 - 然后我就可以使用.find 来粗略地定位输入元素，并使用 .serialize 对它们进行序列化，等等……”

哦，原来如此！你实际上是将 元素包装在容器中？

那么为什么还不是一个表单呢？

- Oka

---

看所有表单是个好主意，这点很有道理。除此之外，你为什么说输入应该放在表单里？这似乎并没有提供任何真正的优势，只多出了一些代码。我从来没有在网上读到过把输入放在表单以外是语义不正确的，所以我觉得把它与 ul 和 ol 相提并论是不公平的。而且实际上，如果用户禁用 JavaScript，我也不希望他们使用我的网站。况且这可能只占在线用户的 1%。 - D-Marc

听起来你更像是想要确认自己标记语言的选择，而不是寻找为什么我们使用<form>元素的答案。这没关系，就像我说的，你可以随意使用任何你喜欢的标记语言，但是我已经解释了开发人员使用表单的主要原因。请注意，我的翻译尽可能保持原意，同时使语言更加通俗易懂。 - Oka

你提出了很好的观点。我真的很感激你花时间更详细地阐述你的答案并提供真实的代码示例。我会再试试表单，看看是否更喜欢这样做。再次感谢你的帮助。不过，你不觉得把一个表单包裹在一个文本框周围是毫无意义的吗？ - D-Marc

根据上下文而定。像搜索框这样的输入框，如果仅通过 AJAX 在“提交”以外的事件中轮询 API 端点，则可以省略包装在表单中，因为它没有任何功能没有 JavaScript。在<form>之外有一个<input>不是无效标记，但可能语义不佳。如果有一种方法可以通过适当的“提交”事件提交数据而不使用 AJAX，则最好使用表单。同样，元素需要一个容器，<form>元素默认为块级元素，因此它们的行为就像<div>。 - Oka

Answer 2

如果您想在不使用 AJAX 的情况下提交表单（在开发早期可能有用），则仍然需要使用表单标签。但即使可以使用 JavaScript 提交数据而不使用表单标签，仍然有一些好处：

1. 在某些情况下，使用表单标签可以帮助人们阅读和理解您的代码，从而了解您的意图。
2. 表单上可用“submit”方法。 如果您有一个带有input[type=submit]的表单，并且它未被禁用，则当某个人在填写其他表单输入项时按下“Enter”键时，表单将被提交。 您仍然可以通过在输入元素上监听“keydown”事件来实现这一点，但是表单标签提供了一个免费的 UI 细节。
3. 还有一些只能使用表单标签才能完成或使用表单标签更容易完成的其他事情。开发人员最终会遇到这些情况，并决定在任何地方始终使用它们以避免问题。 实际上，真正的问题是，为什么不使用表单标签呢？

- Michael Hewson

---

此外，像 jQuery 的 .serialize() 这样的东西只能在表单元素上工作。 - EJTH

Answer 3

我遇到了这样一种情况，一个网页上有3个表单，每个表单都有独立的电子邮件字段（具有不同的ID）。起初，我将它们分别包装在不同的<div>标签中。直到我将它们全部包装在<form>标签中，iOS Safari的自动填充功能才正常工作。其中一个表单只有一个输入字段，用于订阅新闻通讯。当用户自动填充该输入字段时，网页会滚动到页面不同部分的下一个输入字段。

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

- IOOIIIO

---

在我看来，这是最好的答案。多年后，我的结论是，在移动设备上适当处理表单可能是使用表单标签的最好理由。 - D-Marc

此外，屏幕阅读器也是如此。基本上，<form> 提供了一种标准化的方式，在不同的设备上逻辑分组表单元素，无论是移动设备还是屏幕阅读器。 - D-Marc

Answer 4

HTML元素表示包含交互控件以将信息提交到Web服务器的文档部分。

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

更多信息

链接一

链接二

- Rohit Azad Malik

---

是的，但您不需要在表单中包装文本输入，例如电子邮件地址或密码，以提交数据。我可以轻松使用ajax完成这项工作。表单不提供任何额外的安全性。但是，如果我加密数据，我可以使用php来实现这一点。 - D-Marc