小开

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

我们都熟悉 html 网页上的表单。出于许多不同的原因，人们或公司要求我们提供电子邮件地址、姓名和网站 URL。如今在互联网上购买产品几乎是小菜一碟，随着安全设备的出现，提交你的详细信息和辛苦挣来的钱的方法通常是通过表格完成的。

更多信息

链接一

二号连接

小开

最佳答案

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

实际上，您可以对 HTML5标记做任何您想做的事情，并且大多数浏览器都会解析它。据我所知，WebKit/Blink 甚至允许使用 <input>元素中的伪元素，这显然违反了规范—— Gecko 就没那么严重了。但是，对标记做任何您喜欢的事情，无疑会使它在语义方面失效。

为什么我们把 <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 = commit ] ，并且它没有被禁用，那么当有人在填写其他表单输入时点击“ enter”，表单将被提交。您仍然可以通过侦听输入元素上的“ keydown”事件来实现这一点，但是通过表单标记可以免费获得一些 UI。
还有一些其他的东西只能用于表单标记，或者更容易用于表单标记。开发人员最终会遇到这些情况，并决定总是在任何地方使用它们并避免问题会更容易。真正的问题是，为什么没有使用表单标记？

小开

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

所以，感谢欧卡的长期职位。只要有可能，就应该使用具有语义意义的标记，因为您永远不知道哪个浏览器/设备不能很好地处理其他解决方案。

Html 表单标记的用途是什么

我怎么会因为不填表格而让我的生活更艰难呢？