您缺少的是对语义标记和DOM 的理解。
实际上，您几乎可以使用HTML5标记做任何您想做的事，大多数浏览器都会对其进行解析。上一次我检查时，WebKit / Blink甚至允许在元素内部<input>使用伪元素，这明显违反了规范-Gecko没有那么多。然而，就语义而言，对标记做任何您想做的事无疑会使它无效。
为什么我们将<input>元素放在元素内部<form>？出于同样的原因，我们将<li>标签放在<ul>和<ol>元素内-这就是它们所属的位置。从语义上讲它是正确的，并且有助于定义标记。语法正确的语法分析器，屏幕阅读器和各种软件可以更好地理解您的标记-当标记具有含义而不仅仅是结构时。
该<form>元素还允许您定义method和action属性，这些属性告诉浏览器提交表单时该怎么做。AJAX并不是100％覆盖率的工具，作为一名Web开发人员，您应该练习优雅的降级-即使关闭JS，也应能够提交表单并传输数据。
最后，所有表单都已在DOM中正确注册。我们可以使用JavaScript进行窥视。如果您在此页面上打开控制台，然后键入：
document.forms
您会在页面上获得所有表单的漂亮集合。搜索栏，评论框，答案框-所有正确的形式。该接口对于访问信息以及与这些元素进行交互很有用。例如，表格可以序列化很容易地。
这是一些阅读材料：
注意：<input>元素可以在表单之外使用，但是如果您打算以任何方式提交数据，则应该使用表单。
这是我将问题翻转过来的答案的一部分。
我如何通过避免形式来使我的生活更艰难？
首先，也是容器元素。谁需要他们，对吗？
当然，您的little <input>和<button>elements嵌套在某种容器元素内吗？他们不能只是在其他所有事物之间徘徊。那么，如果不是<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只是担心自己的事情，例如隐藏适当的元素或处理我们得到的任何响应。
现在你说：
“但是我将伪格式包装在<div>具有特定ID的元素中-然后可以使用.find，及其.serialize它们和...来宽松地定位输入。”
哦那是什么 您实际上将<input>元素包装在容器中了吗？
那为什么还没有表格呢？