Lable标签和Datalist标签知识点

一、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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值