html表单标签的用途是什么

2020/10/07 21:41 · php ·  · 0评论

我不了解html中的表单标签的用途。

我可以轻松地完美使用任何输入类型,而无需使用form标记。将其包装在输入周围几乎是多余的。

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

那么,为什么表格仍然如此广泛地用于诸如文本输入之类的简单事物呢?这似乎是一件非常古老且不必要的事情。

我只是看不到好处或需要它。也许我想念一些东西。

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

实际上,您几乎可以使用HTML5标记执行任何操作,大多数浏览器都会对其进行解析。上一次我检查时,WebKit / Blink甚至允许在元素内部<input>使用元素,这明显违反了规范-Gecko没有那么多。但是,就语义而言,对标记做任何您想做的事无疑会使它无效。

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

<form>元素还允许您定义methodaction属性,这些属性告诉浏览器提交表单时该怎么做。AJAX并不是100%覆盖率的工具,作为一名Web开发人员,您应该练习优雅的降级-即使关闭JS,也应能够提交表单并传输数据。

最后,所有表单都已在DOM中正确注册。我们可以使用JavaScript进行窥视。如果您在此页面上打开控制台,然后键入:

document.forms

您将在页面上获得所有表单的漂亮集合。搜索栏,评论框,答案框-所有正确的形式。该接口对于访问信息以及与这些元素进行交互很有用。例如,表单可以很容易地序列化

这是一些阅读材料:

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


这是我将问题翻转过来的答案的一部分。

我如何通过避免形式来使我的生活更艰难?

首先-容器元素。谁需要他们,对吗?

当然,您的little<input><button>elements嵌套某种容器元素内吗?他们不能只是在其他所有事物之间徘徊。那么,如果不是a <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>元素包装在容器中了吗?

那为什么还没有表格呢?

如果您希望能够不使用AJAX提交表单,表单标签仍然是必需的(这在开发的早期阶段可能会很有用)。但是,即使可以使用javascript提交没有表单标签的数据,仍然可以想到一些好处:

  1. 在某些情况下,使用表单标签可以通过显示意图来帮助人们阅读和理解您的代码。
  2. 表单上可以使用“提交”方法。如果您有一个带有输入[type = submit]的表单,并且未禁用它,那么当某人在填写其他表单输入之一时按下“输入”时,该表单将提交。您仍然可以通过侦听输入元素上的“ keydown”事件来做到这一点,但是可以通过表单标签免费获得很多ui。
  3. 还有一些其他事情仅适用于表单标签,或者更容易使用表单标签。开发人员最终将遇到这些情况,并决定仅在任何地方都使用它们并避免问题会更容易。确实,真正的问题是,为什么使用表单标签?

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

我们都熟悉html网页上的表单。由于许多不同的原因,人们或公司都要求我们提供电子邮件地址,名称和站点URL。如今,在Internet上购买产品通常是一件轻而易举的事,并且随着安全设备的出现,用于提交您的详细信息和来之不易的钱的方法通常通过表格来执行。

更多信息

链接一

链接二

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

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

本文地址:http://php.askforanswer.com/htmlbiaodanbiaoqiandeyongtushishenme.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!