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>