• label 表单组件标签
  • 属性说明
  • 示例
    • 代码示例 1：label 用 for 标识表单组件
    • 代码示例 2：表单组件在 label 内
    • 代码示例 3：label 内有多个选项时，选中第一个
    • 代码示例 4：label 可控制热区

label 表单组件标签

解释：表单组件标签，用来改进表单的可用性。使用 for 属性找到对应的 ID（必须写 for），当点击时，就会触发对应的控件。for 优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。目前可以绑定的控件有：<button>、<checkbox>、<radio>、<switch>。

属性说明

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：label 用 for 标识表单组件

• SWAN
• JS

 
 
 

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

代码示例 2：表单组件在 label 内

• SWAN
• JS

 
 
 

  
  
  
<view class="wrap">
  
  
  
 <view class="card-area">
  
  
  
 <view class="top-description border-bottom">表单组件在label内</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>
 
 
 

代码示例 3：label 内有多个选项时，选中第一个

• SWAN

 
 
 

  
  
  
<view class="wrap">
  
  
  
 <view class="card-area">
  
  
  
 <view class="top-description border-bottom">label内有多个选项时，选中第一个</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 可控制热区

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• CSS

 
 
 

  
  
  
<view class="wrap">
  
  
  
 <view class="card-area">
  
  
  
 <view class="top-description">控制热区为整行</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>