表单之<label>标签

在使用表单的时候,通常会使用到input(HTML),一般来说,
都是搭配label来进行使用。
label的定义和用法:(W3school参考手册)
<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
微信小程序上也有label,目前可以绑定的控件有:<button>, <checkbox>, <radio>, <switch>。微信小程序官网文档定义:用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。for优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。
在微信小程序上,通常会使用到<button>, <checkbox>, <radio>, <switch>这几个标签都是添加hidden属性,然后再搭配label标签。通过label标签的for属性进行绑定,只要点击的label标签包含的内容区域,就相当于触发了该标签。这样往往极大的方便了小程序的页面需要点击各种特别的图案或者是区域来触发想要的标签效果。例如button,就能多元化,button将能是各种各样的页面元素,不再仅仅是特定的某几种样式。

image.png

image.png

如上图的单选效果,而使用radio+label就能很轻松的完成。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转自:HTML 表单之label标签介绍label标签介绍label标签为input元素定义标注(标记),它不会向...
    jasonhsu9阅读 1,848评论 0 0
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,377评论 1 41
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,119评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,879评论 1 45
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,273评论 4 61