javascript - html表单标签的用途是什么

Question

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

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

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

那么为什么表单仍然如此广泛地用于简单的事情，比如文本输入？这似乎是一件非常陈旧且不必要的事情。

我只是没有看到它的好处或需要。也许我错过了一些东西。

Answer 1

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

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

为什么要放<input> <form> 内部的元素元素？出于同样的原因，我们把 <li> <ul> 内的标签和 <ol>元素 - 这是它们所属的地方。它在语义上是正确的，有助于定义标记。当语义正确时，解析器、屏幕阅读器和各种软件可以更好地理解您的标记 - 当标记具有意义，而不仅仅是结构时。
<form>元素还允许您定义 method和 action属性，它告诉浏览器在提交表单时要做什么。 AJAX 不是 100% 覆盖率的工具，作为 Web 开发人员，您应该练习优雅的降级 - 即使关闭 JS，也应该能够提交表单和传输数据。

最后，表单都在 DOM 中正确注册。我们可以用 JavaScript 看一看。如果你在这个页面上打开你的控制台，然后输入:

document.forms

您将获得页面上所有表单的精美集合。搜索栏、评论框、答案框 - 所有适当的形式。此界面可用于访问信息以及与这些元素进行交互。例如，表单可以是 serialized很容易。

这里有一些阅读 Material :

Semantic HTML

HTML forms guide

注: <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 只关心它自己的事情，比如隐藏适当的元素，或者处理我们得到的任何响应。

现在你说:

'但我将我的伪形式包裹在 <div> 中具有特定 ID 的元素 - 然后我可以使用 .find 松散地定位输入, 和 .serialize他们，还有……”

哦，那是什么？你实际上包装了你的 <input>容器中的元素？

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