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>