label标签for属性与表单控件点击选中的联系(单选按钮为例)-阿里云开发者社区

开发者社区> 云计算> 正文
登录阅读全文

label标签for属性与表单控件点击选中的联系(单选按钮为例)

简介: input radio label for html 隐式联系 显式联系 点击文字 切换 选中 表单

表单中经常会出现单选按钮,也就是,但我们是否有注意到自己所写的单选按钮,能否在点击文字的时候进行选中切换。

其实这里面包含了一点点小窍门,也就是我们的标签

标签为input元素定义标记,其本身没有任何效果,但若在label元素内点击文本的话,就会触发此控件。所以,当用户选择标签时,浏览器就会自动将焦点转到和标签相关的控件上。

label与表单控件联系的方式有两种:

1.隐式联系--表单控件作为标记标签的内容

`

    <span>显式联系</span>
    <input type="radio" name="xs" id="xsTrue" />
    <label for="xsTrue">是</label>
    <input type="radio" name="xs" id="xsFalse" />
    <label for="xsFalse">否</label>
</div>`

2.显式联系--标记下的for属性命名目标表单id

`

    <span>隐式联系</span>
    <label>
        <input type="radio" name="ys" id="ysTrue" />是
    </label>
    <label>
        <input type="radio" name="ys" id="ysFalse" />否
    </label>
</div>`

我们给代码添加稍许样式
`form div span,
form div label {

display: inline-block;
width: 100px;
height: 55px;

}
form input[type="radio"],
form label {

cursor: pointer;

}`

下面,我们来看下代码显示的效果

label_for_

经过验证,两种联系方式均是可以进行点击文字选中的,而且浏览器兼容没有问题!!

小小的表单点击文字的选中,也不能漏掉呢!好的用户体验要靠我们来加油!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: