其它综合

关注公众号 jb51net

关闭
首页 > 网络编程 > 其它综合 > 网页报错Form elements must have labels

网页报错"Form elements must have labels"的处理方法

作者：软件开发技术爱好者

这篇文章主要给大家介绍了关于网页报错"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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

阅读全文