网页报错"Form elements must have labels"的处理方法
网页报错“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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天用Typora因为升级了一下，所以需要激活虽然勉强能用，但是老是弹出激活页面，很是苦恼，只能通过百度找方法进行解决一下了，下面跟随小编看下Typora使用方法,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了VScode中配置使用fortran的方法,本文通过图文实例代码相结合给大家介绍的非常详细，需要的朋友可以参考下2021-07-07
这篇文章主要为大家介绍了测试框架JUnit VS TestNG对比分析详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
关于前端数据Fail to load response data问题的解决方法
这篇文章主要给大家介绍了关于前端数据Fail to load response data问题的解决方法,Fail to load respond data"是一个英文短语,意思是加载响应数据失败,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了详解使用IDEA模拟git命令使用的常见场景，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
服务器首先产生ETag，服务器可在稍后使用它来判断页面是否已经被修改。本质上，客户端通过将该记号传回服务器要求服务器验证其（客户端）缓存。这种机制允许缓存更有效并节省带宽，因为如果内容没有更改，Web 服务器不再需要发送完整的响应。2023-05-05
这篇文章主要为开发人员收录了18个最好的代码编辑器/IDE工具，希望你会喜欢2014-05-05
国内环境搭建私有知识问答库踩坑记录(ollama+deepseek+ragflow)
本文给大家利用deepseek模型搭建私有知识问答库的详细步骤和遇到的问题及解决办法,感兴趣的朋友一起看看吧2025-03-03
当你写项目的时候，如何快速的完成一个项目的搭建，这个时候就需要借助到一些模板了，前端开发的一个好处就是，各类UI模板都是相当的齐全的，本文就介绍几个前端框架，感兴趣的可以了解一下2021-06-06
这篇文章主要介绍了xmind2022下载非试用（超详细 图文预警）,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-10-10
最新评论