网页报错“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(表单元素必须具有标签:元素没有标题属性元素没有占位符属性)

form elements must have labels: element has no title attribute element has n,HTML5与CSS3,前端开发,前端,html

特别说明,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(无问题)!文章来源地址https://www.toymoban.com/news/detail-809546.html

到了这里,关于网页报错“Form elements must have labels”的处理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 如何将el-form-item中表单项label和表单项内容换行

    elemnet ui的el-form-item的表单项label和表单项内容原本是默认在同一行显示的,将el-form-item中表单项label和表单项内容换行怎么实现呢? 效果如下: 法1: elemnetUI官方的方法label-position=“top” 法2: 思路:将el-form或者el-form-item中的label-width属性去掉或者设置为0,如果label长度超出

    2024年02月13日
    浏览(52)
  • Element 多个Form表单 同时验证

    在一个页面中需要实现两个Form表单,并在页面提交时需要对两个Form表单进行校验,两个表单都校验成功时才能提交 所用技术栈:Vue2+Element UI 注意项: 两个form表单,每个表单上都设置单独的model和ref,不能同时使用,否则每个表单上的校验提示会失效 最后,👏👏 😀😀😀

    2024年02月07日
    浏览(45)
  • element+vue 之动态form

    1.页面部分 2.数据格式 3.数据处理 因为后端给的数据都是数组 表单有些需要数组有些需要字符串 4.关于图片部分的js 4.提交 //提交这里还是要按照上面的格式提交

    2024年02月14日
    浏览(34)
  • Element UI 多个Form表单同时验证

    这里讲的主要是Element UI 组件的表单验证,Element UI 的Form表单验证是依靠 ref 来进行的,但是当一个页面有用到多个Form表单的时候,又要同时对这多个表单进行验证,这个时候写在后面的Form表单会覆盖前面的样式,导致只会验证最后一个 解决方案:

    2024年02月11日
    浏览(39)
  • 【element】解决el-form和el-form-item不在同一行显示的问题

    页面效果: 解决方法: 给el-form-item设置label-witdh属性,调节width 页面效果:

    2024年02月12日
    浏览(52)
  • element-ui的form表单校验

    form表单校验基本三步: 1、定义验证规则 在data中定义表单校验规则,一个表单项可定义多条规则,表单项规则用数组,规则为对象,required为必须填写,message为校验提示信息,trigger为校验时机,可选blur和change,分别为失去焦点和数据变化;min/max为最小与最大字符个数,v

    2024年02月11日
    浏览(65)
  • Vue组件库Element-常见组件-Form表单

    Form表单 Form 表单:由输入框、选择器、单选框、多选框等控件组成,用以收集、检验、提交数据 具体关键代码如下: 运行效果如下:  点击最后一个按钮,并输入表格信息  点击提交   组件的使用最关键的就是仔细看官网文档,并且自己学会修改

    2024年02月12日
    浏览(30)
  • (el-Form)操作(不使用 ts):Element-plus 中 Form 表单组件校验规则等的使用

    1、 Element-plus 提供 Form 表单组件情况: 其一、 Element-plus 自提供的 Form 代码情况为(示例的代码): 代码地址( 直接点击下面 url 跳转 ):https://element-plus.gitee.io/zh-CN/component/form.html#自定义校验规则 其二、页面的显示情况为: 2、目标想修改后的情况: // 此时虽然页面的样式有些变

    2024年02月13日
    浏览(51)
  • element-ui form表单校验 失败的原因

    1、没有在el-form上指定model 2、el-form-item上的prop名称不对,应当与rules中的名称一致; 3、绑定的属性没有在data中声明; 4、特别重要的一点是ruleForm(数据)和rules(校验规则)里面对应的key一定要相同,一个是数据绑定的值 另外一个是值的规则。

    2024年02月11日
    浏览(47)
  • element - - - - - form表单rules初始化校验飙红?

    通过form组件属性配置解决(validate-on-rule-change=“false”)

    2024年02月13日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包