一、lable标签
1.默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定
2.要想让输入框和文字绑定在一起, 那么我们可以使用Label标签,完成的动作就是当鼠标点到文字上时,文本输入框就应该聚焦,具体哪个文本输入框聚焦需要自己进行属性的设置
3.绑定的格式:
将文字利用label标签包裹起来
给输入框添加一个id属性
在label标签中通过for属性和输入框中的id进行绑定即可
<label for="account">账号:</label><input type="text" id="account">
完整代码实现如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>30-Label标签</title>
</head>
<body>
<form action="">
<label for="account">账号:</label><input type="text" id="account"><br>
<label for="pwd">密码:</label><input type="password" id="pwd"><br>
<hr>
<label>
账号:<input type="text">
</label><br>
<hr>
<label for="def">账号:</label><input type="text" id="abc"><br>
<label for="abc">密码:</label><input type="password" id="def"><br>
</form>
</body>
</html>
二、Datalist标签
1.datalist标签
作用: 给输入框绑定待选项,就是实现网页中的主搜索效果,输入第一个字就会出现很多待选项
2.datalist格式:
<datalist>
<option>待选项内容</option>
</datalist>
3.如何给输入框绑定待选列表
搞一个输入框
搞一个datalist列表
给datalist列表标签添加一个id
给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可
请输入你的车型: <input type="text" list="cars">
<datalist id="cars">
<option>奔驰</option>
<option>宝马</option>
<option>奥迪</option>
<option>路虎</option>
<option>宾利</option>
</datalist>