网页历史记录恢复33300.4com（网页报错“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(无问题)！
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！