form
更新时间：2024-11-13 19:05:26
form
表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。
属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| bindsubmit | eventhandle | false | 携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''} | |
| bindreset | eventhandle | false | 表单重置时会触发 reset 事件 |
扫码预览
组件示例
html
<form bindsubmit="formSubmit" bindreset="formReset">
<view class="page-section page-section-gap">
<view class="page-section-title">switch</view>
<switch name="switch" checked="{{switch}}"/>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">radio</view>
<radio-group name="radio">
<label><radio value="radio1" checked/>选项一</label>
<label><radio value="radio2"/>选项二</label>
</radio-group>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">checkbox</view>
<checkbox-group name="checkbox">
<label><checkbox value="checkbox1" checked/>选项一</label>
<label><checkbox value="checkbox2" checked/>选项二</label>
</checkbox-group>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">slider</view>
<slider value="50" name="slider" show-value ></slider>
</view>
<view class="page-section">
<view class="page-section-title">input</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__bd">
<input class="weui-input" value="22" name="input" placeholder="这是一个输入框" />
</view>
</view>
</view>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">slider</view>
<slider value="50" name="slider" show-value ></slider>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">picker</view>
<picker name="picker" mode="date" fields="day" value="2016-09-01" start="2015-09-01" end="2017-09-01">
<view class="picker">
点击选择日期
</view>
</picker>
</view>
<view class="btn-area">
<button type="primary" formType="submit">Submit</button>
<button formType="reset">Reset</button>
</view>
</form>