WeChat small program form component form form
May 18, 2021 WeChat Mini Program Development Document
Table of contents
WeChat small program form
Base library 1.0.0 starts to support, and low versions need to be compatible.
The form. Submit the switch input checkbox slider radio picker entered by the user within the component.
When you click on the button component in the form form that form-type is the submit, the value value in the form component is submitted, and name needs to be added to the form component as key.
| Property | Type | The default | Required | Description | The lowest version |
|---|---|---|---|---|---|
| report-submit | boolean | false | Whether | Whether to return formId to send a template message | 1.0.0 |
| report-submit-timeout | number | 0 | Whether | Wait a while (milliseconds) to confirm that formId is in effect. I f this parameter is not specified, there is a small probability that formId will not be valid (in the event of a network failure). S pecifying this parameter will detect whether formId is valid, with the time of this parameter as the time-out time for this detection. If it fails, the formId at the beginning of requestFormId:fail is returned | 2.6.2 |
| bindsubmit | eventhandle | Whether | Carrying the data in the form triggers the submit event, event.detail, and the value: 'name': 'value', formId: ''' | 1.0.0 | |
| bindreset | eventhandle | Whether | The reset event is triggered when the form is reset | 1.0.0 |
Example code:
<form bindsubmit="formSubmit" bindreset="formReset">
<view class="section section_gap">
<view class="section__title">switch</view>
<switch name="switch"/>
</view>
<view class="section section_gap">
<view class="section__title">slider</view>
<slider name="slider" show-value ></slider>
</view>
<view class="section">
<view class="section__title">input</view>
<input name="input" placeholder="please input here" />
</view>
<view class="section section_gap">
<view class="section__title">radio</view>
<radio-group name="radio-group">
<label><radio value="radio1"/>radio1</label>
<label><radio value="radio2"/>radio2</label>
</radio-group>
</view>
<view class="section section_gap">
<view class="section__title">checkbox</view>
<checkbox-group name="checkbox">
<label><checkbox value="checkbox1"/>checkbox1</label>
<label><checkbox value="checkbox2"/>checkbox2</label>
</checkbox-group>
</view>
<view class="btn-area">
<button formType="submit">Submit</button>
<button formType="reset">Reset</button>
</view>
</form>Page({
formSubmit: function(e) {
console.log('form发生了submit事件，携带数据为：', e.detail.value)
},
formReset: function() {
console.log('form发生了reset事件')
}
})
