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 中还可以用标签关联表单

Document

男女

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

label标签在H5中的应用相关推荐

html5video标签属性,H5中video标签那些属性和方法
前言最近在写一个自定义播放器, 写之前我们肯定要把播放器的属性和方法全部过一遍,知彼知己,方能百战不殆嘛...后面会把自己写的播放器和踩过的一些坑也上传上来 video标签行内属性 src:视频的U ...
H5中的label、textarea、select标签
一. label标签 1,如果你想让点击input输入框左边的文字就可以让输入框获取焦点,就可以使用label标签把文字和input包裹起来. 2,如果label里面有多个表单,想定位到某个,可以通过 ...
html5 video js控制摄像头的焦距,H5中使用video标签实现选择摄像头功能的示例
H5中使用video标签实现选择摄像头功能的示例发布时间:2020-12-05 10:48:03 来源:亿速云阅读:91 作者:小新小编给大家分享一下H5中使用video标签实现选择摄像头功能的 ...
label标签中的for属性
1. 使用介绍 label中的for属性规定了label与哪个表单元素绑定.for属性的值和表单元素的id值一样,即可完成该label标签与该表单元素的绑定. <label for=" ...
html label标签 ie6,说说HTML5中label标签的可访问性问题
一.开篇叨叨一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高 ...
php怎样查看视频播放的进度条,H5中视频与音频标签和进度条如何使用
这次给大家带来H5中视频与音频标签和进度条如何使用,H5中视频与音频标签和进度条使用的注意事项有哪些,下面就是实战案例,一起来看一下. 最近项目中使用Html5的video和audio标签来在线播放视 ...
html.textboxfor属性,label标签中的for属性与form属性
HTML中的label标签是干什么的?在讲这个标签之前先来做一个示范,请点击以下的文本框控件: 你的姓名是: 大家都知道上面的文本框使用的是input元素,当鼠标点击文本框时就能输入文本,若是点击文本 ...
antd-vue中的form表单label标签for导致点击文字触发输入框解决方案
antd-vue中的form表单label标签for导致点击文字触发输入框解决方案参考文章: (1)antd-vue中的form表单label标签for导致点击文字触发输入框解决方案 (2)http ...
label标签中for的使用
<label for='btn'>label标签的作用</label> <button id='btn' οnclick='alert(1)'>点击弹窗</b ...

label标签在H5中的应用

label标签在H5中的应用相关推荐

最新文章

热门文章