草庐IT

网页报错“Form elements must have labels”的处理

软件开发技术爱好者 2023-04-03 原文

网页报错“Form elements must have labels”的处理

先给出错误现象源码：

<!DOCTYPE html> 
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" /> 
    <title>错误测试2</title>
</head>
<body">
    请输入文本<input type="text"/>
</body>
</html>

保存文件名为：错误发生2.html

顺便提示：打开浏览器开发工具（DevTools），可用下面方式之一：

按Ctrl+Shift+I（Windows、Linux）或 Command+Option+I （macOS）。

按 F12。

右键单击网页上的任何项，然后选择 “检查”。

用Microsoft Edge打开运行后，再按下F12键打开浏览器开发工具可查看到报错信息用浏览器打开，就会看到错误：

Form elements must have labels: Element has no title attribute Element has no placeholder attribute（表单元素必须具有标签：元素没有标题属性元素没有占位符属性）

特别说明，Microsoft Edge浏览器中有报错提示，这个报错提示不影响运行。使用Google Chrome和Firefox浏览器，没有报错提示。

原因及解决方法

在html中，<label>用于用户界面中某个元素的说明。<label>通常和<input>一起使用，<label> 的 for 属性应当与相关元素的 id 属性相同。

上面的“请输入文本<input type="text"/>”代码中，label元素使用不正确，因为label元素和input元素关联。要将label元素关联到特定的输入元素，请使用以下任一选项：

将input元素嵌套在label元素中。

在label元素中，添加与input元素的id属性（attribute）匹配的for属性——label标签中的for值等于input标签的id值。

当将label元素关联到特定的输入元素后，点击label标签里面的文字时，光标会定位在特定的输入元素中。

另外，使用input元素的placeholder属性，也能消除错误提示。

【参考：Axe Rules | Deque University | Deque Systems】

对于本例，可将  请输入文本<input type="text" />  改为：

<label>请输入文本<input type="text"/></label>

或

<label for="abc">请输入文本</label> <input type="text" id="abc" />

或

请输入文本<input type="text" placeholder ="可在此输入文字" />

修改后源码如下：

<!DOCTYPE html> 
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" /> 
    <title>错误修改2</title>
</head>

<body">
<label for="abc">请输入文本</label> <input type="text" id="abc" />
</body>
</html>

再用 Microsoft Edge 中打开浏览器测试，No Issues(无问题)！

elementslabelsmargin-lefttext-alignjustify前端$html

有关网页报错“Form elements must have labels”的处理的更多相关文章

  1. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  2. 深度学习部署：Windows安装pycocotools报错解决方法 - 2

    深度学习部署：Windows安装pycocotools报错解决方法1.pycocotools库的简介2.pycocotools安装的坑3.解决办法更多Ai资讯：公主号AiCharm本系列是作者在跑一些深度学习实例时，遇到的各种各样的问题及解决办法，希望能够帮助到大家。ERROR:Commanderroredoutwithexitstatus1:'D:\Anaconda3\python.exe'-u-c'importsys,setuptools,tokenize;sys.argv[0]='"'"'C:\\Users\\46653\\AppData\\Local\\Temp\\pip-instal

  3. Ruby-vips 图像处理库。有什么好的使用示例吗？ - 2

    我对图像处理完全陌生。我对JPEG内部是什么以及它是如何工作一无所知。我想知道，是否可以在某处找到执行以下简单操作的ruby​​代码:打开jpeg文件。遍历每个像素并将其颜色设置为fx绿色。将结果写入另一个文件。我对如何使用ruby​​-vips库实现这一点特别感兴趣https://github.com/ender672/ruby-vips我的目标-学习如何使用ruby​​-vips执行基本的图像处理操作(Gamma校正、亮度、色调……)任何指向比“helloworld”更复杂的工作示例的链接——比如ruby​​-vips的github页面上的链接，我们将不胜感激!如果有ruby​​-

  4. RUBY - 网页抓取 - (OpenURI::HTTPError) - 2

    我正在尝试用ruby​​编写一个简单的网络抓取代码。它一直工作到第29个url，然后我收到此错误消息:C:/Ruby193/lib/ruby/1.9.1/open-uri.rb:346:in`open_http':500InternalServerError(OpenURI::HTTPError)fromC:/Ruby193/lib/ruby/1.9.1/open-uri.rb:775:in`buffer_open'fromC:/Ruby193/lib/ruby/1.9.1/open-uri.rb:203:in`blockinopen_loop'fromC:/Ruby193/lib/r

  5. ruby - Faye WebSocket，关闭处理程序被触发后重新连接到套接字 - 2

    我有一个super简单的脚本，它几乎包含了FayeWebSocketGitHub页面上用于处理关闭连接的内容:ws=Faye::WebSocket::Client.new(url,nil,:headers=>headers)ws.on:opendo|event|p[:open]#sendpingcommand#sendtestcommand#ws.send({command:'test'}.to_json)endws.on:messagedo|event|#hereistheentrypointfordatacomingfromtheserver.pJSON.parse(event.d

  6. ruby - 如何使用 Ruby HTTP::Net 处理 404 错误？ - 2

    我正在尝试解析网页，但有时会收到404错误。这是我用来获取网页的代码:result=Net::HTTP::getURI.parse(URI.escape(url))如何测试result是否为404错误代码？ 最佳答案 像这样重写你的代码:uri=URI.parse(url)result=Net::HTTP.start(uri.host,uri.port){|http|http.get(uri.path)}putsresult.codeputsresult.body这将打印状态码和正文。

  7. ruby-on-rails - 使用 Ruby 正确处理 Stripe 错误和异常以实现一次性收费 - 2

    我查看了Stripedocumentationonerrors，但我仍然无法正确处理/重定向这些错误。基本上无论发生什么，我都希望他们返回到edit操作(通过edit_profile_path)并向他们显示一条消息(无论成功与否)。我在edit操作上有一个表单，它可以POST到update操作。使用有效的信用卡可以正常工作(费用在Stripe仪表板中)。我正在使用Stripe.js。classExtrasController5000,#amountincents:currency=>"usd",:card=>token,:description=>current_user.email)

  8. ruby-on-rails - Rails 处理 .Erb 与 Nils - 2

    当profile为nil时，总是让我感到悲伤...我该怎么办？ 最佳答案 在View中使用变量之前，始终检查变量是否为nil。我确信这个问题有更优雅的解决方案，但这应该能让您入门。 关于ruby-on-rails-Rails处理.Erb与Nils，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/2709605/

  9. ruby-on-rails - 如何在多个环境中处理 OmniAuth 回调？ - 2

    我有一个应用程序专门使用Facebook作为身份验证提供程序，并正确设置了生产模式的回调。为了让它工作，您需要为您的Facebook应用程序提供一个站点URL和一个用于回调的站点域，在我的例子中是http://appname.heroku.com和appname。heroku.com分别。问题是我的Controller设置为只允许经过身份验证的session，所以我无法在开发模式下查看我的应用程序，因为Facebook应用程序的域显然没有设置为本地主机。如何在不更改Facebook设置的情况下解决这个问题？ 最佳答案 创建另一个域l

  10. python - 请在 Perl 或 Ruby 中引入多处理库 - 2

    在python中，我们可以使用多处理模块。如果Perl和Ruby中有类似的库，你会教它吗？如果您能附上一个简短的示例，我将不胜感激。 最佳答案 ruby:WorkingwithmultipleprocessesinRubyConcurrencyisaMythinRubyPerl:HarnessingthepowerofmulticoreWhyPerlIsaGreatLanguageforConcurrentProgramming此外，Perl的线程是native操作系统线程，因此您可以使用它们来利用多核。

随机推荐