在使用表单的时候,通常会使用到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
如上图的单选效果,而使用radio+label就能很轻松的完成。
网友评论