label
描用来改进表单组件的可用性。
使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。 for优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。 目前可以绑定的控件有:button, checkbox, radio, switch, input, textarea。
示例代码:
<!--pages/component/pages/label/label.mcml-->
<view class="container">
<view class="statement">标签。</view>
<view class="cssname">表单控件在label中</view>
<view>
<label><checkbox></checkbox>多选</label>
<label><radio></radio>单选</label>
<label><switch></switch>开关</label>
<label><button bindtap="bindtap" size="mini" id="button">button{{index}}</button>按钮</label>
</view>
<view class="cssname">for绑定表单控件</view>
<view>
<view class="labelFor">
<checkbox id="checkbox"></checkbox><label for="checkbox">for多选</label>
</view>
<view class="labelFor">
<radio id="radio"></radio><label for="radio">for单选</label>
</view>
<view class="labelFor">
<switch id="switch"></switch><label for="switch">for开关</label>
</view>
<view class="labelFor">
<button bindtap="bindtap" size="mini" id="button">button{{index}}</button><label for="button">for按钮</label>
</view>
<view class="labelFor">
<input id="input" style="background-color: lightgray;" /><label for="input">for输入框</label>
</view>
<view class="labelFor">
<textarea id="textarea" style="background-color: lightgray;" /><label for="textarea">for textarea</label>
</view>
</view>
</view>
// pages/component/pages/label/label.js
Page({
data: {
index: 0
},
bindtap:function(){
this.setData({
index: this.data.index + 1
})
}
})