button（按钮）的属性如表21-13所示。
表21-13 button属性说明
button的示例代码如下。
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="primary"> primary </button>
<button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="warn"> warn </button>
<button bindtap="setDisabled">点击设置以上按钮disabled属性</button>
<button bindtap="setPlain">点击设置以上按钮plain属性</button>
<button bindtap="setLoading">点击设置以上按钮loading属性</button>
checkbox-group（多项选择器）内部由多个checkbox组成。checkbox（多选项目）的属性如表21-14所示。
表21-14 checkbox属性说明
checkbox的示例代码如下。
<checkbox-group bindchange="checkboxChange">
<label wx:for="{{items}}">
<checkbox checked="{{item.checked}}"/>{{item.value}}
</label>
form（表单）用于将组件内的用户输入的<switch/><input/><checkbox/><slider/><radio/><picker/>提交。当点击<form/>中formType为submit的<button/>组件时，会将表单组件中的value值提交，需要在表单组件中加上name作为key。from的属性如表21-15所示。
表21-15 from属性说明
from的示例代码如下。
<form bindsubmit="formSubmit" bindreset="formReset">
<view>
<view>switch</view>
<switch name="switch"/>
</view>
<view>
<view>slider</view>
<slider name="slider" show-value ></slider>
</view>
<view>
<view>input</view>
<input name="input" placeholder="please input here" />
</view>
<view>
<view>radio</view>
<radio-group name="radio-group">
<label><radio />radio1</label>
<label><radio />radio2</label>
</radio-group>
</view>
<view>
<view>checkbox</view>
<checkbox-group name="checkbox">
<label><checkbox />checkbox1</label>
<label><checkbox />checkbox2</label>
</checkbox-group>
</view>
<view>
<button formType="submit">Submit</button>
<button formType="reset">Reset</button>
</view>
</form>
input（输入框）的属性如表21-16所示。
表21-16 input属性说明
input的示例代码如下。
<!--input.wxml-->
<view>
<input placeholder="这是一个可以自动聚焦的input" auto-focus/>
</view>
<view>
<input placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
<view>
<button bindtap="bindButtonTap">使得输入框获取焦点</button>
</view>
</view>
<view>
<input maxlength="10" placeholder="最大输入长度10" />
</view>
<view>
<view>你输入的是：{{inputValue}}</view>
<input bindinput="bindKeyInput" placeholder="输入同步到view中"/>
</view>
<view>
<input bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />
</view>
<view>
<input bindinput="bindHideKeyboard" placeholder="输入123自动收起键盘" />
</view>
<view>
<input password type="number" />
</view>
<view>
<input password type="text" />
</view>
<view>
<input type="digit" placeholder="带小数点的数字键盘"/>
</view>
<view>
<input type="idcard" placeholder="身份证输入键盘" />
</view>
<view>
<input placeholder- placeholder="占位符字体是红色的" />
</view>
label用来改进表单组件的可用性，使用for属性找到对应的ID，或者将控件放在该标签下，当点击时，就会触发对应的控件。for的优先级高于内部控件，内部有多个控件时默认触发第一个控件。
label的示例代码如下。
<view>
<view>表单组件在label内</view>
<checkbox-group bindchange="checkboxChange">
<view wx:for="{{checkboxItems}}">
<label>
<checkbox hidden checked="{{item.checked}}"></checkbox>
<view>
<view ></view>
</view>
<text>{{item.value}}</text>
</label>
</view>
</checkbox-group>
</view>
<view>
<view>label用for标识表单组件</view>
<radio-group bindchange="radioChange">
<view wx:for="{{radioItems}}">
<radio hidden checked="{{item.checked}}"></
radio>
<view>
<view ></view>
</view>
<label for="{{item.name}}"><text>{{item.name}}</text></
label>
</view>
</radio-group>
</view>
picker（滚动选择器）支持3种选择器，通过mode来区分，分别是普通选择器、时间选择器、日期选择器，默认是普通选择器。
普通选择器（mode=selector）的属性如表21-17所示。
表21-17 普通选择器属性说明
时间选择器（mode=time）的属性如表21-18所示。
表21-18 时间选择器属性说明
日期选择器（mode=date）的属性如表21-19所示。
表21-19 日期选择器属性说明
picker的示例代码如下。
<view>
<view>普通选择器</view>
<picker bindchange="bindPickerChange" range="{{array}}">
<view>
当前选择：{{array[index]}}
</view>
</picker>
</view>
<view>
<view>时间选择器</view>
<picker mode="time" start="09:01" end="21:01" bindchange="bind-
TimeChange">
<view>
当前选择: {{time}}
</view>
</picker>
</view>
<view>
<view>日期选择器</view>
<picker mode="date" start="2015-09-01" end="2017-09-01" bindchange=
"bindDateChange">
<view>
当前选择: {{date}}
</view>
</picker>
</view>
radio-group（单项选择器）内部由多个<radio/>组成。radio（单选项目）的属性如表21-20所示。
表21-20 radio属性说明
radio的示例代码如下。
<radio-group bindchange="radioChange">
<label wx:for="{{items}}">
<radio checked="{{item.checked}}"/>{{item.value}}
</label>
</radio-group>
slider（滑动选择器）的属性如表21-21所示。
表21-21 slider属性说明
slider的示例代码如下。
<view>
<text>设置left/right icon</text>
<view>
<slider bindchange="slider1change" left-icon="cancel" right-icon="success_
no_circle"/>
</view>
</view>
<view>
<text>设置step</text>
<view>
<slider bindchange="slider2change" step="5"/>
</view>
</view>
<view>
<text>显示当前value</text>
<view>
<slider bindchange="slider3change" show-value/>
</view>
</view>
<view>
<text>设置最小/最大值</text>
<view>
<slider bindchange="slider4change" min="50" max="200" show-value/>
</view>
</view>
switch（开关选择器）的属性如表21-22所示。
表21-22 switch属性说明
switch的示例代码如下。
<view>
<switch checked bindchange="switch1Change"/>
<switch bindchange="switch2Change"/>
</view>
textarea（多行输入框）的属性如表21-23所示。
表21-23 textarea属性说明
textarea的示例代码如下。
<!--textarea.wxml-->
<view>
<textarea bindblur="bindTextAreaBlur" auto-height placeholder="自动变高" />
</view>
<view>
<textarea placeholder="placeholder颜色是红色的" placeholder- />
</view>
<view>
<textarea placeholder="这是一个可以自动聚焦的textarea" auto-focus />
</view>
<view>
<textarea placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
<view>
<button bindtap="bindButtonTap">使得输入框获取焦点</button>
</view>
</view>