html表单标记的用途是什么

Question

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

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

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

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

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

Answer 1

你缺少的是对语义标记和DOM 的理解.

实际上,你可以用HTML5标记做任何你想做的事情,大多数浏览器都会解析它.我上次检查时,WebKit/Blink甚至允许在元素内部<input>使用伪元素,这明显违反了规范 - Gecko并没有那么多.但是,就语义而言,用你的标记做任何你喜欢的事情无疑会使它失效.

为什么我们将<input>元素放在<form>元素中？出于同样的原因,我们将<li>标签放在内部<ul>和<ol>元素中 - 这是它们所属的位置.它在语义上是正确的,并有助于定义标记.解析器,屏幕阅读器和各种软件可以在语义正确时更好地理解您的标记 - 当标记具有意义时,而不仅仅是结构.

该<form>元素还允许您定义method和action属性,告诉浏览器在提交表单时要执行的操作.AJAX不是100%覆盖率工具,作为Web开发人员,您应该练习优雅降级 - 表单应该能够提交,并且即使在JS关闭时也可以传输数据.

最后,表单都在DOM中正确注册.我们可以用JavaScript来看一看.如果您在此页面上打开控制台,请键入:

document.forms

您将获得页面上所有表单的精美集合.搜索栏,评论框,答案框 - 所有正确的表格.此接口可用于访问信息以及与这些元素交互.例如,表单可以很容易地序列化.

这是一些阅读材料:

• 语义HTML
• HTML表单指南

注意:<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只是担心它自己的东西,比如隐藏适当的元素,或处理我们得到的任何响应.

现在你说:

'但是我将伪表单包装在<div>具有特定ID的元素中 - 然后我可以使用with .find和.serialize它们来松散地定位输入,并且......

哦,那是什么？你实际上将你的<input>元素包装在一个容器中？

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

Answer 2

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

1. 在某些情况下，通过向人们展示您的意图，使用表单标签可以帮助人们阅读和理解您的代码。
2. “提交”方法在表单上可用。如果您有一个带有 input[type=submit] 的表单，并且它没有被禁用，那么当有人在填写其他表单输入之一时点击“输入”时，表单将提交。您仍然可以通过侦听输入元素上的 'keydown' 事件来做到这一点，但这是一个很好的用户界面，您可以通过表单标签免费获得。
3. 还有一些其他东西只适用于表单标签，或者使用表单标签更容易。开发人员最终会遇到这些情况，并决定始终在任何地方使用它们并避免问题更容易。真的，真正的问题是，为什么不使用表单标签？