使用表单时“Form elements must have labels”的处理

柑普柠檬

于 2024-03-28 10:28:09 发布

阅读量812

点赞数 8

分类专栏： Web 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/zy_2428364651/article/details/137099808

版权

Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

错误源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <input type="textInput" value="111">
        <br>
        <input type="password" value="222">
        <br>
        <input type="submit" value="Submit">
    </form>
</body>

</html>

用Microsoft Edge打开运行后，再按下F12键打开浏览器开发工具可查看到报错信息

Form elements must have labels: Element has no title attribute Element has no placeholder attribute

（表单元素必须具有标签：元素没有标题属性元素没有占位符属性）

解决方法

在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属性，也能消除错误提示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <label for="a">账号<input type="textInput" value=" "></label>
        <br>
        <label for="a">账号<input type="password" value=" "></label>
        <br>
        <input type="submit" value="Submit">
    </form>
</body>

</html>