百度智能小程序 表單組件標簽

label 表單組件標簽

解釋：為鼠標用戶改進表單的可用性。使用 for 屬性找到對應的 id（必須寫 for），當點擊時，就會觸發(fā)對應的控件。for 優(yōu)先級高于內(nèi)部控件，內(nèi)部有多個控件的時候默認觸發(fā)第一個控件。目前可以綁定的控件有：?<button/>?、? <checkbox/>?、 ?<radio/>?、?<switch/>?。

屬性說明

示例 

在開發(fā)者工具中打開

代碼示例 1 - label 用 for 標識表單組件

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">label用for標識表單組件</view>
        <radio-group class="group">
            <view s-for="item, index in radioItems">
                <label class="block {{item.checked == 'true' ? 'border-bottom': ''}}">
                    <radio id="{{item.name}}" value="{{item.name}}" checked="{{item.checked}}"></radio>
                    <label for="{{item.name}}"><text>{{item.value}}</text></label>
                </label>
            </view>
        </radio-group>
    </view>
</view>

Page({
    data: {
        radioItems: [
            {name: 'CHN', value: '中國', checked: 'true'},
            {name: 'USA', value: '美國'}
        ]
    }
});

代碼示例 2 - 表單組件在 label 內(nèi)

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">表單組件在label內(nèi)</view>
        <checkbox-group class="group">
            <view s-for="item, index in checkboxItems">
              <label class="block {{item.checked == 'true' ? 'border-bottom': ''}}">
                <checkbox value="{{item.name}}" checked="{{item.checked}}"></checkbox>
                <text>{{item.value}}</text>
              </label>
            </view>
        </checkbox-group>
    </view>
</view>

Page({
    data: {
        checkboxItems: [
            {name: 'CHN', value: '中國', checked: 'true'},
            {name: 'USA', value: '美國'}
        ]
    }
});

代碼示例 3 - label 內(nèi)有多個選項時，選中第一個

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">label內(nèi)有多個選項時，選中第一個</view>
        <label>         
            <label class="block border-bottom">
                <checkbox>選項一</checkbox>
            </label>
            <label class="block border-bottom"> 
                <checkbox>選項二</checkbox>
            </label> 
            <label class="block border-bottom"> 
                <checkbox>選項三</checkbox>      
            </label>
            <view class="near-button">
                點擊選中第一項
            </view>
        </label>
    </view>
</view>

代碼示例 4 - label 可控制熱區(qū) ： 

在開發(fā)者工具中打開

<view class="wrap">
    <view class="card-area">
        <view class="top-description">控制熱區(qū)為整行</view>
        <label class="label border-bottom">
            <checkbox/>
            <text>智能小程序</text>
        </label>
        <label class="label border-bottom">
            <radio/>
            <text>智能小程序</text>
        </label>
        <label class="label border-bottom">
            <switch/>
            <text style="vertical-align:.1rem">智能小程序</text>
        </label>  
    </view>
</view>

.wrap {
    font-size: .16rem;
}

.label {
    display: block;
    padding: .2rem;
}