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

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

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

那么，为什么表单仍然如此广泛用于文本输入等简单事物呢？这似乎是一件非常古老和不必要的事情。

我只是看不到它的好处或必要性。也许我错过了什么。

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

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

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

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

最后，表单都在 DOM 中正确注册。我们可以用 JavaScript 来了解一下。如果您在此页面上打开控制台，然后键入：

document.forms

您将获得页面上所有表单的良好集合。搜索栏，评论框，答案框 - 所有正确的形式。此接口可用于访问信息以及与这些元素交互。例如，表单可以非常容易地序列化。

以下是一些阅读材料：

语义网页
网页表单指南

注意：<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>元素包装在一个容器中？

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

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

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

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

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

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

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

更多信息

链接一

链接二

html 表单标记的用途是什么

What is the purpose of the html form tag

如何通过避免形式来使我的生活更艰难？