label标签在H5中的应用

一、label标签的作用

label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单内容上。

在HTML中标签不会向用户展示任何特殊内容,它的作用是把自己与其他标签"绑定"起来，也可以说是与其他元素关联到一起，粗暴点说就是 有一腿。

与其他标签关联的方式
与其他元素关联的方式有两种

1、显式联系：显式联系通过的 “for” 属性和目标标签的 ID 来完成

2、隐式联系：隐式联系可通过标签嵌套完成

显式联系
定义一个表单，表单中有单选框，看下面HTML代码

    <input type="radio" name="yes-no" id="yes">确定

    <input type="radio" name="yes-no" id="no">取消

现在我们用显式的方式来为两个选项创建额外的"选择按钮"，接着上面代码写。

    <input type="radio" name="yes-no" id="yes">

    <input type="radio" name="yes-no" id="no">

点击这里也可选择 确定 选项

点击这里也可以选择 取消 选项

我们通过点击标签可以间接的选择表单中的选项了。

隐式联系
由于隐式联系不需要用 标签的 ID 所以我把第一个例子中的表单代码中的标签的ID去掉

    <input type="text" name="yes-no">确定

    <input type="text" name="yes-no">取消

把鼠标移动到 "确定" 或 "取消" 时，鼠标变为了 "工" 形，是不可以点击的

现在我把标签嵌套到标签中

    <label><input type="radio" name="yes-no">确定</label>

    <label><input type="radio" name="yes-no">取消</label>

把鼠标移动到 "确定" 或 "取消" 上时，鼠标并没有改变样式，是可点击的。当我点击 "确定" "取消" 时，也可以把选项选上，这是因为我点击 "确定" "取消" 其实是点击了 ，由于我们把与隐式关联了。所以达到了点击文字确定选项的效果。

在 H5 中还可以用标签关联表单

不要小看这段代码，这段代码会提高用户体验度，尤其是手机用户。手机屏幕本身就小，如何让用户这么小的屏幕下，更方便地填写表单信息。因为 标签能增强input的响应区，也就是点击 标签后，能触发其对应的input标签。我发现很多网站都没有。
转载：https://blog.csdn.net/weixin_43073143/article/details/101027006