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
    })
  }
})

results matching ""

    No results matching ""

    results matching ""

      No results matching ""