Represents a form. Represents a form, which is used to submit user inputs such as switch, input, checkbox, slider, radio, and picker within the component.
When a button component with form-type set to submit is tapped within a form, the value of the form components will be submitted. Each form component must include a name attribute to serve as the key.
Since: 1.0.0
Name | Type | Default Value | Mandatory | Description |
|---|---|---|---|---|
bindsubmit | eventhandle | - | No | Handler for submit events carrying form data, with event.detail = {value : {'name': 'value'} , formId: ''}. |
bindreset | eventhandle | - | No | Handler for form reset events. |
HXML file:
<form catchsubmit="formSubmit" catchreset="formReset">
<view class="page-section page-section-gap">
<view class="page-section-title">switch</view>
<switch name="switch" />
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">radio</view>
<radio-group name="radio">
<label>
<radio value="radio1" />Option 1
</label>
<label>
<radio value="radio2" />Option 2
</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" />Option 1
</label>
<label>
<checkbox value="checkbox2" />Option 2
</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="ascf-cells">
<view class="ascf-cell ascf-cell_input">
<view class="ascf-cell__bd" style="margin: 30rpx 30rpx">
<input class="ascf-input" name="input" placeholder="This is an input box" />
</view>
</view>
</view>
</view>
<view class="btn-area">
<button style="margin: 30rpx 0" type="primary" formType="submit">
Submit
</button>
<button style="margin: 30rpx 0" formType="reset">Reset</button>
</view>
</form> JS file:
Page({
data: {
formSubmitResult: '',
formResetResult: ''
},
formSubmit(e) {
console.log('A submit event occurs in the form. Carried data: ', e.detail.value)
this.setData({
formSubmitResult: e.detail.value,
})
},
formReset(e) {
console.log('A reset event occurs in the form.')
this.setData({
formResetResult: e.detail.value,
})
}
})