一般在页面注册的用户名标签或者密码标签时,为了增进用户体验,会使单击“用户名”或者“密码”的时候将光标也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框中!