label标签&datalist标签

label

一般默认情况下文字和输入框是没有关联的，想要点击文字时对对应的输入框进行聚焦，需要将文字和输入框绑定。
法一：官方推荐

1. 文字标签用label标签包裹起来
2. 为表单设置一个id，在label标签里用for关联起来

<form action="http://www.baidu.com">
    <label for="username">username:</label><input type="text" id="username">
    <br>
    <label for="pwd">password:</label><input type="password" id="pwd">
    <input type="submit" value="提交">
</form>

法二
直接将文本与表单包裹在label标签中

<form action="http://www.baidu.com">
    <label>
        username：<input type="text">
    </label>
</form>

有局限性：只能对应的绑定，不能交叉绑定，例如想要实现用户名和密码框绑定就不可以，只能用户名和用户名框绑定在一起。

datalist（很多浏览器并不支持）

<form>
    输入车型：<input type="text" list="cars">
    <datalist id="cars">
        <option>宝马</option>
        <option>宾利</option>
        <option>路虎</option>
        <option>奥迪</option>
        <option>奔驰</option>
    </datalist>
</form>