关于label标签的使用

最新推荐文章于 2024-07-29 16:22:26 发布

序列A

最新推荐文章于 2024-07-29 16:22:26 发布

阅读量1.6k

点赞数

分类专栏： web慢文章标签： html label 前端

本文链接：https://blog.csdn.net/lu10505/article/details/80281398

版权

web慢专栏收录该内容

32 篇文章 0 订阅

订阅专栏

一般在页面注册的用户名标签或者密码标签时，为了增进用户体验，会使单击“用户名”或者“密码”的时候将光标也focus到输入框，这是通过label标签来实现的，原理是将其囊括到同一个标签下，具体使用方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Lable</title>
</head>
<body>
	<label>用户名：<input type="text"></label>
</body>
</html>

但是当一个label标签中包括了两个或者两个以上的标签时，再单击没有focus的作用，需要锚点定位才能实现，具体使用方法如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Lable</title>
</head>
<body>
	<label>用户名：<input type="text"></label>
	<hr />
	<label for="pwd">
		用户名：<input type="text">
		<br />
		密码：<input type="password" id="pwd">
	</label>
</body>
</html>

这种情况下无论是单击“用户名”还是单击“密码”，label块中定位到的都是锚点所标记的输入框。

有趣的一点是，通过锚点定位的方式囊括的标签就算是在label标签之外也能被定位到，例如：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Lable</title>
</head>
<body>
	<label>用户名：<input type="text"></label>
	<hr />
	<label for="pwd">
	单击这里试试看
	</label>
	用户名：<input type="text">
	<br />
	密码：<input type="password" id="pwd">
</body>
</html>

比如在上述代码中，在页面中单击“单击这里试试看”也会定位到密码的input框中！

序列A

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于label标签的使用

一般在页面注册的用户名标签或者密码标签时，为了增进用户体验，会使单击“用户名”或者“密码”的时候将光标也focus到输入框，这是通过label标签来实现的，原理是将其囊括到同一个标签下，具体使用方法如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;t
复制链接

扫一扫