网页报错“Form elements must have labels”的处理

news2025/2/24 7:36:10

网页报错“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(无问题)!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405820.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

uniapp中单选按钮的实现

标签说明&#xff1a; radio-group&#xff1a;单项选择器&#xff0c;内部由多个 <radio> 组成。通过把多个radio包裹在一个radio-group下&#xff0c;实现这些radio的单选。 radio&#xff1a;单选项目 属性说明&#xff1a; change&#xff1a;<radio-group>…

Vue中使用element-ui 给按钮绑定一个单击事件,实现点击按钮就弹出一个dialog对话框

1.需求描述 想要实现点击一个按钮就弹出一个对话框&#xff0c;在对话框中可输入数据进行提交&#xff0c;在点击取消时对话框关闭 2.功能实现 1.创建按钮 在element中把找到按钮的代码放到div里 <el-row><el-button type"primary" plain>新增</el…

Java支付宝沙箱环境支付,SDK接口远程调试【内网穿透】

文章目录1.测试环境2.本地配置3. 内网穿透3.1 下载安装cpolar内网穿透3.2 创建隧道4. 测试公网访问5. 配置固定二级子域名5.1 保留一个二级子域名5.2 配置二级子域名6. 使用固定二级子域名进行访问1.测试环境 MavenSpring bootJdk 1.8 2.本地配置 获取支付宝支付Java SDK,ma…

Vue--》过滤器介绍及其使用方法

目录 过滤器 过滤器的兼容性 私有过滤器和全局过滤器 过滤器的连续调用 过滤器进行传参 过滤器 过滤器的兼容性 注意&#xff1a;Vue3中明确取消了过滤器这个功能&#xff0c;如果想使用只能在Vue2中进行&#xff0c;如果所做的项目是Vue2的话&#xff0c;可以了解一下这…

uni-app开发微信小程序,H5 关于压缩上传图片的问题

文章目录 前言 一、为什么要压缩图片 二、图片压缩方式 1. 微信小程序​​​​​​​ 2. H5 总结 前言 关于微信小程序、H5兼容性问题&#xff0c;今天就压缩以及上传图片做一个可实现方法的简要阐述。 一、为什么要压缩图片​​​​​​​ 在使用uni-app开发小程序及H…

深入了解-微信开发者工具

主要介绍微信开发者工具如何编译小程序代码&#xff0c;如何实现小程序模拟器以及如何调试小程序。 1 简介 虽然在开发语言层面小程序与传统的网页差别不大&#xff1a;是使用JavaScript 脚本语言编写逻辑代码、使用类似于HTML的WXML来描述页面的结构、使用类似于CSS的WXSS来…

B/S架构

目录 一、什么是B/S架构 二、三层架构 三、Active技术 四、网络节点 五、分布式网络计算 六、JavaScript 一、什么是B/S架构 1.B/S架构是软件系统体系结构&#xff0c;是指浏览器-Web服务器(Broswer-Server)&#xff0c;采用三层架构&#xff0c;即表现层、业务逻辑层、数据访问…

十分钟带你入门Chrome插件开发

一、简述 我们所说的chrome插件一般都是指chrome扩展程序&#xff08;Chrome Extension&#xff09;。chrome插件是一个用Web技术开发、用来增强浏览器功能的软件&#xff0c;它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的文件。chrome插件除了Chrome浏览器…

【TFS-CLUB社区 第4期赠书活动】〖Flask Web全栈开发实战〗等你来拿,参与评论,即可有机获得

文章目录❤️‍&#x1f525; 赠书活动 - 《Flask Web全栈开发实战》❤️‍&#x1f525; 编辑推荐❤️‍&#x1f525; 内容提要❤️‍&#x1f525; 赠书活动 → 获奖名单❤️‍&#x1f525; 赠书活动 - 《Flask Web全栈开发实战》 内容简介&#xff1a; 《Flask Web全栈开发…

flex布局 多种方法让两个盒子分布在左右两边

方法一&#xff1a; 一个父盒子里面包含了两个子盒子的&#xff0c;可以用justify-content:space-between属性 <div classparent> <div class"left"></div> <div class"right"></div> </div> .parent { disp…

FreeRTOS(教程非常详细)

概述&#xff1a; 之前写了关于FreeRTOS的部分内容&#xff0c;为了方便阅读&#xff0c;现在给汇总到一起了。全部学习完后&#xff0c;恭喜你对FreeRTOS有了更深的认知。 第一章 FreeRTOS移植到STM32 第二章 FreeRTOS创建任务 第三章 FreeRTOS任务管理 第四章 FreeRTOS消…

【springcloud 微服务】Spring Cloud Ribbon 负载均衡使用策略详解

目录 一、前言 二、什么是Ribbon 2.1 ribbon简介 2.1.1 ribbon在负载均衡中的角色 2.2 客户端负载均衡 2.3 服务端负载均衡 2.4 常用负载均衡算法 2.4.1 随机算法 2.4.2 轮询算法 2.4.3 加权轮询算法 2.4.4 IP地址hash 2.4.5 最小链接数 三、Ribbon中负载均衡策略…

Unity 实现A* 寻路算法

前言 A* 寻路算法是什么 游戏开发中往往有这样的需求&#xff0c;让玩家控制的角色自动寻路到目标地点&#xff0c;或是让 AI 角色移动到目标位置&#xff0c;实际的情况可能很复杂&#xff0c;比如地图上有无法通过的障碍或者需要付出代价&#xff08;时间或其他资源&#x…

XShell免费版的安装配置教程以及使用教程(超级详细、保姆级)

目录 一、 XShell的作用 二、 下载免费版XShell 三、 安装XShell 四、使用XShell连接Linux服务器 一、 XShell的作用 XShell 是一种流行且简单的网络程序&#xff0c;旨在模拟虚拟终端。XShell可以在Windows界面下来访问远端不同系统下的服务器&#xff0c;从而比较好的达到…

11.落地:微服务架构灰度发布方案

前置知识 1.nacos 服务注册与发现 2.本地负载均衡器算法 3.gateway 网关 4.ThreadLocal 1.什么是灰度发布&#xff1f; 2.什么是灰度策略? 3.灰度发布落地方案有哪些 4.灰度发布架构设计原理 nginxlua&#xff1f; 5.如何基于GateWayNacos构建灰度环境 6.GateWay负载均衡…

【云原生 • Kubernetes】认识 k8s、k8s 架构、核心概念点介绍

目录 一、Kubernetes 简介 二、Kubernetes 架构 三、Kunbernetes 有哪些核心概念&#xff1f; 1. 集群 Cluster 2. 容器 Container 3. POD 4. 副本集 ReplicaSet 5. 服务 service 6. 发布 Deployment 7. ConfigMap/Secret 8. DaemonSet 9. 核心概念总结 一、Kubern…

java程序员转正述职报告PPT

新公司转正述职报告&#xff0c;花了些时间准备了ppt和讲稿&#xff0c;这里分享一下 述职报告 时间过得很快&#xff0c;转眼就已经三个月了&#xff0c;三个月时间不长&#xff0c;完成的工作也有限&#xff0c;但是在这些工作中&#xff0c;我也学到了很多&#xff0c;现在…

Linux命令大全:2W多字,一次实现Linux自由

前言 大家好&#xff0c;我是40岁老架构师尼恩&#xff0c;Linux 的学习对于一个程序员的重要性是不言而喻的。 学好它却是程序员必备修养之一。 同时&#xff0c;也是很多公司的面试题。 比如说&#xff0c;曾有一个网易的面试题是&#xff1a; 聊聊&#xff1a;你常用的几…

docker入门,这一篇就够了。

Docker入门&#xff0c;这一篇就够了。 Docker容器虚拟化平台。 前言 接触docker很长时间了&#xff0c;但是工作中也没有用到&#xff0c;所以总是学了忘&#xff0c;忘了学。不过这次&#xff0c;我打算跟大家分享一下我的学习历程&#xff0c;也算是我的独特的复习笔记&…

双目三维重建系统(双目标定+立体校正+双目测距+点云显示)Python

双目三维重建系统(双目标定立体校正双目测距点云显示)Python 目录 双目三维重建系统(双目标定立体校正双目测距点云显示)Python 1.项目结构 2. Environment 3.双目相机标定和校准 (0) 双目摄像头 (1) 采集标定板的左右视图 (2) 单目相机标定和校准 (3) 双目相机标定和…