草庐IT

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

coder 2023-04-28 原文

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

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

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

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

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

最佳答案

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

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

为什么要放<input> <form> 内部的元素元素?出于同样的原因,我们把 <li> <ul> 内的标签和 <ol>元素 - 这是它们所属的地方。它在语义上是正确的,有助于定义标记。当语义正确时,解析器、屏幕阅读器和各种软件可以更好地理解您的标记 - 当标记具有意义,而不仅仅是结构时。
<form>元素还允许您定义 methodaction属性,它告诉浏览器在提交表单时要做什么。 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>容器中的元素?

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

    关于javascript - html表单标签的用途是什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31066693/

    有关javascript - html表单标签的用途是什么的更多相关文章

    1. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法? - 2

      类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

    2. ruby-on-rails - Rails - 子类化模型的设计模式是什么? - 2

      我有一个模型:classItem项目有一个属性“商店”基于存储的值,我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式?如果方法中没有大的if-else语句,这是如何干净利落地完成的? 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.co

    3. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

      我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

    4. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

      我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

    5. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们? - 2

      我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

    6. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

      我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

    7. ruby - 为什么 4.1%2 使用 Ruby 返回 0.0999999999999996?但是 4.2%2==0.2 - 2

      为什么4.1%2返回0.0999999999999996?但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意,这不是与Ruby相关的问题,而是与所有编程语言相关的问题,因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返

    8. ruby - 在院子里用@param 标签警告 - 2

      我试图使用yard记录一些Ruby代码,尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么?

    9. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

      在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这

    10. ruby - ruby 中的 TOPLEVEL_BINDING 是什么? - 2

      它不等于主线程的binding,这个toplevel作用域是什么?此作用域与主线程中的binding有何不同?>ruby-e'putsTOPLEVEL_BINDING===binding'false 最佳答案 事实是,TOPLEVEL_BINDING始终引用Binding的预定义全局实例,而Kernel#binding创建的新实例>Binding每次封装当前执行上下文。在顶层,它们都包含相同的绑定(bind),但它们不是同一个对象,您无法使用==或===测试它们的绑定(bind)相等性。putsTOPLEVEL_BINDINGput

    随机推荐