我不明白html中表单标签的用途。
我可以轻松地完美地使用任何输入类型，而无需使用表单标签。将其包装在输入周围似乎是多余的。
此外，如果我使用ajax来调用服务器端页面，我可以简单地使用jQuery。唯一的例外是，由于某种原因，我注意到您必须将上传脚本包装在表单标记周围。
那么，为什么表单仍然如此广泛地用于文本输入等简单事物呢？这似乎是一件非常古老和不必要的事情。
我只是没有看到它的好处或需要。也许我错过了一些东西。
您缺少的是对语义标记和 DOM 的理解。
实际上，你几乎可以用HTML5标记做任何你想做的事情，大多数浏览器都会解析它。上次我检查时，WebKit / Blink甚至允许伪元素<输入>元素，这明显违反了规范 - Gecko没有那么多。但是，就语义而言，对标记执行任何您喜欢的操作无疑会使它无效。
为什么我们要把元素放在元素里面？出于同样的原因，我们将标签放在元素内部 - 这是它们所属的地方。它在语义上是正确的，有助于定义标记。解析器、屏幕阅读器和各种软件可以在语义正确时更好地理解标记 - 当标记有意义而不仅仅是结构时。<input><form><li><ul><ol>
该元素还允许您定义和属性，这些属性告诉浏览器在提交表单时要执行的操作。AJAX不是一个100%覆盖的工具，作为一个Web开发人员，你应该练习优雅的降级 - 表单应该能够提交，数据传输，即使JS被关闭。<form>methodaction
最后，表单都在 DOM 中正确注册。我们可以用JavaScript来看看这一点。如果您在此页面上打开控制台，然后键入：
document.forms
您将获得页面上所有表单的精美集合。搜索栏，评论框，答案框 - 所有正确的形式。此接口可用于访问信息以及与这些元素进行交互。例如，表单可以非常容易地序列化。
以下是一些阅读材料：
注意：<输入>元素可以在表单之外使用，但如果您打算以任何方式提交数据，则应使用表单。
这是我翻转问题的回答部分。
首先也是最重要的 - 容器元素。谁需要他们，对吧？！
当然，你的小和元素嵌套在某种容器元素中？他们不能只是漂浮在其他一切的中间。那么，如果不是 一个 ，那又如何呢？一个？一个？<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松散地定位输入，并将它们.序列化，然后......”。
哦，那是什么？你真的把你的元素包装在一个容器里？<input>
那么，为什么它还不是一种形式呢？
如果您希望能够在没有 AJAX 的情况下提交表单，则表单标记仍然是必需的（这在开发的早期阶段可能很有用）。但是，即使可以使用javascript在没有表单标签的情况下提交数据，仍然会想到一些好处：
