当前位置:首页 > 前端开发 > 正文内容

Input报错“Form elements must have labels: Element has no title attribute Element has no placeholde”

邻居的猫1个月前 (12-09)前端开发677

喵~
项目开发难免会遇到些不解的问题,以下总结的是简化版,重在复现问题,解决问题。

写表单时,假如仅仅独自写了input元素,发现在后台管理睬飘红。感觉很古怪,分明没有写错语法,为什么会飘红呢?

1、写一段最一般的html页面

2、右键,挑选 “查看”,翻开后台管理器,指向input元素

此刻,能够看到飘红的input,鼠标指向input,会显现一段提示:

3、依照提示,Shift + Click,可直接跳至过错的具体阐明

Form elements must have labels: Element has no title attribute Element has no placeholder attribute
简而言之便是说:input 元素要有配套的label元素,还要有 title 和 placeholder 特点

也便是说,依照规范来讲,它是主张咱们补全对应的配套标签和特点的。

我趁便测验了Chrome浏览器,并没有呈现Error提示,只要运用Edge浏览器才会呈现。

所以,这个问题,实际上不能算 Error 吧,最多是 Warning ~

已然呈现了,就接着测验,假如你的项目便是单纯的需求一个独立的Input,请往下看:

通过测验,三种状况能够消除Error:

4、解决方案
4.1 增加 title 特点

<input type="text" title="Please input">

4.2 增加 placeholder 特点

<input type="text" placeholder="Please input">

以上便是,无需 label 标签,只需给 input 增加 title 或 placeholder 任一特点,即可消除Error。
当然啦,假如想更规范,写全套就更好了:
<label for="target"></label>
<input type="text" id="target" title="input title" placeholder="Please input">

扫描二维码推送至手机访问。

版权声明:本文由51Blog发布,如需转载请注明出处。

本文链接:https://www.51blog.vip/?id=431

分享给朋友:

“Input报错“Form elements must have labels: Element has no title attribute Element has no placeholde”” 的相关文章

vxe-table 一键切换修改形式、只读形式

vxe-table 一键切换修改形式、只读形式

vxe-table 能够修改形式和只读形式的参数是 editConfig.enabled 当需求修改时就启用,当不需求修改时就封闭 官网:https://vxetable.cn/ <template> <div> <vxe-button status="...

vue官网,前端开发的利器

vue官网,前端开发的利器

您可以通过以下链接访问Vue.js的官方网站:这两个网站提供了Vue.js的详细文档、API、教程、生态系统和资源等信息。您可以根据需要选择访问中文或英文版本。Vue官网深度解析:前端开发的利器一、Vue.js简介Vue.js,简称Vue,是由尤雨溪(Evan You)于2014年创建的一个渐进式J...

jq设置css样式

jq设置css样式

在jQuery中,你可以使用`.css`方法来设置元素的CSS样式。这个方法可以用来获取或设置一个或多个CSS属性。 基本用法1. 获取CSS属性: ```javascript var color = $.css; ```2. 设置CSS属性: ```javascript $.c...

vue导航栏, 导航栏的重要性

vue导航栏, 导航栏的重要性

Vue导航栏:构建高效且响应式的用户界面在Web开发中,导航栏是用户与网站交互的第一步,它不仅提供了访问网站不同部分的入口,还影响了用户体验的整体质量。Vue.js,作为一款流行的前端框架,提供了强大的工具来创建动态和响应式的导航栏。本文将深入探讨如何在Vue项目中实现一个高效且响应式的导航栏。...

html写表格,```html    HTML 表格示例

html写表格,```html HTML 表格示例

当然可以。HTML(超文本标记语言)是用于创建网页的标准标记语言。在HTML中,您可以使用``元素来创建表格。以下是一个基本的HTML表格示例:```html HTML 表格示例简单的 HTML 表格 姓名 年龄 职业...

css内阴影,CSS内阴影的强大应用与实现方法

css内阴影,CSS内阴影的强大应用与实现方法

CSS内阴影(inner shadow)是CSS3中新增的一种阴影效果,它允许你为元素添加向内凹陷的阴影效果。与传统的盒阴影(boxshadow)不同,内阴影是在元素的内部创建的,使得阴影看起来像是元素的一部分。要使用CSS内阴影,你需要使用`boxshadow`属性,并指定相应的值。内阴影的语法与...