微信小程序表单的使用
表单Form的应用很广泛,
我们可以利用form设计登录注册,
也可以设计一种答题问卷的形式 .
但是微信小程序的表单与H5的表单写法还是不一样的。这点大家需要注意;
表单:表单中 formType 为 submit 的 <button/> 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。
<form bindsubmit="formSubmit" bindreset="formReset">
<button formType="submit">Submit</button>
<button formType="reset">Reset</button>
</form>
输入框:bindinput输入, bindfocus输入框聚焦, bindblur失去焦点, bindconfirm完成按钮; type=text,number,idcard,digit
<input bindinput="bindKeyInput" placeholder="输入同步到view中" value="" type="text" disabled/>
标识lable :for 目前可以绑定的控件有:<button/>, <checkbox/>, <radio/>, <switch/>。
按钮:types = ['default', 'primary', 'warn']
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>
单项选择器:radio-group
<radio-group class="radio-group" bindchange="radioChange">
<label class="radio" wx:for="{{items}}">
<radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</radio-group>
eg:
<radio-group name="radio-group">
<label><radio value="radio1"/>radio1</label>
<label><radio value="radio2"/>radio2</label>
</radio-group>
多项选择器:checkbox-group
<checkbox-group bindchange="checkboxChange">
<label class="checkbox" wx:for="{{items}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</checkbox-group>
eg:
<checkbox-group name="checkbox">
<label><checkbox value="checkbox1"/>checkbox1</label>
<label><checkbox value="checkbox2"/>checkbox2</label>
</checkbox-group>
底部弹起的滚动选择器:picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
当前选择:{{array[index]}}
</view>
</picker>
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="picker">
当前选择: {{time}}
</view>
</picker>
滑动选择器:slider
<slider bindchange="slider4change" min="50" max="200" show-value/>
开关选择器:switch
<switch checked bindchange="switch1Change"/>