网页报错"Form?elements?must?have?labels"的处理方法
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
网页报错“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(无问题)！
总结
到此这篇关于网页报错"Form elements must have labels"的处理方法的文章就介绍到这了,更多相关网页报错Form elements must have labels内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！
相关文章
这篇文章主要为大家介绍了深度卷积神经网络各种改进结构块汇总，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-05-05
我们在写程序时，常常需要指明两条或者更多的执行路径，使得程序执行时，能够选择其中一条路径，去执行相应的语句，产生对应的结果 —— 这也是条件语句在程序中的作用。下面通过例子给大家介绍下if-else的使用，感兴趣的朋友一起看看吧2020-10-10
这篇文章主要介绍了Hadoop环境搭建过程中遇到的问题及解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2019-08-08
本文通过讲解TCP与UDP传输协议传输数据是的过程及详细介绍什么是 socket及现在我么们和大家一起来学习吧2021-08-08
这篇文章主要为大家介绍了CommonLisp中解析命令行参数示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了将ChatGPT接入微信实现智能回复功能,本项目是基于ChatGPT的微信聊天机器人，通过?OpenAI?接口生成对话内容，使用?itchat?实现微信消息的接收和自动回复，需要的朋友可以参考下2023-02-02
本文主要介绍了使用内网穿透工具Ngrok代理本地服务，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-03-03
这篇文章主要介绍了使用阿里大于(大鱼)平台进行发送手机验证码的流程,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-10-10
C++ Go语言实现将windows和linux文件删除至回收站
这篇文章主要为大家详细介绍了如何分别使用C++ Go语言实现将windows和linux文件删除至回收站,感兴趣的小伙伴可以跟随小编一起学习一下2023-12-12
win10环境下使用Hyper-V进行虚拟机创建的教程(图解)
这篇文章主要介绍了win10环境下使用Hyper-V进行虚拟机创建的教程，本文图文详解给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
最新评论