我如何通过避免形式来改变我的生活？

Question

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

我可以轻松地完全使用任何输入类型而无需使用表单标记。将输入包裹起来几乎是多余的。

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

那么为什么表单仍然广泛用于文本输入这样的简单事情？这似乎是一个非常古老和不必要的事情。

我只是没有看到它的好处或需要。也许我错过了什么。

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。

以下是一些阅读材料：

注意：<input>元素可以在表单之外使用，但如果您打算以任何方式提交数据，则应该使用表单。

这是我回答问题的答案的一部分。

我如何通过避免形式来改变我的生活？

首先 - 容器元素。谁需要他们，对吧？！

当然，您的小<input>和<button>元素嵌套在里面某种容器元素？他们不能只是在其他一切中间漂浮。所以，如果不是<form>，那么呢？一个<div>？一个<span>？

这些元素有驻留在某处，除非你的标记是一个疯狂的混乱，容器元素只能是一个表单。

没有？哦。

此时我头脑中的声音对于如何为所有这些不同的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>元素包装在容器中吗？

那么为什么它不是形式呢？

Answer 2

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

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

Answer 3

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

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

更多信息

link one

link two

Answer 4

我有一个场景，其中单个网页具有3种形式，所有形式都有单独的电子邮件字段（具有不同的ID）。首先，我将它们包装在单独的<div>中。直到我将所有包装都包裹在<form>标签中，iOS上Safari的自动填充功能才表现出奇怪的效果。其中一种形式只有一个输入字段，用于订阅新闻通讯。当用户自动填写该输入内容时，网页将滚动到位于页面不同部分的下一个输入字段。

因此，感谢Oka的冗长帖子。应当尽可能使用带有语义含义的标签，因为您永远不知道哪个浏览器/设备不能很好地处理其他解决方案。

html表单标记的用途是什么

4 个答案:

我如何通过避免形式来改变我的生活？