All Products
Search
Document Center

form

Last Updated: Apr 19, 2021

The form, which is used to submit <textarea>, <switch/>, <input/>, <checkbox-group/>, <slider/>, <radio-group/>, and<picker/> components entered by the user.

When you click the button component whose form-type is submit in the form component, the value in the form component is submitted. In this case, you need to add name askey in the form component.

Attribute Type Default value Description Minimum version
onSubmit EventHandle - The data carried by the form component triggers the submit event, where event.detail = {value : {'name': 'dao14'}, buttonTarget: {'dataset': 'buttonDataset'} }. This attribute is supported starting from buttonTarget 1.7.0.
onReset EventHandle - Trigger the reset event when the form is reset. -

Illustration

Code sample

  1. <form onSubmit="formSubmit" onReset="formReset">
  2. <view class="section section_gap">
  3. <view class="section__title">switch</view>
  4. <switch name="switch"/>
  5. </view>
  6. <view class="section section_gap">
  7. <view class="section__title">slider</view>
  8. <slider name="slider" show-value ></slider>
  9. </view>
  10. <view class="section">
  11. <view class="section__title">input</view>
  12. <input name="input" placeholder="please input here" />
  13. </view>
  14. <view class="section section_gap">
  15. <view class="section__title">radio</view>
  16. <radio-group name="radio-group">
  17. <label><radio value="radio1"/>radio1</label>
  18. <label><radio value="radio2"/>radio2</label>
  19. </radio-group>
  20. </view>
  21. <view class="section section_gap">
  22. <view class="section__title">checkbox</view>
  23. <checkbox-group name="checkbox">
  24. <label><checkbox value="checkbox1"/>checkbox1</label>
  25. <label><checkbox value="checkbox2"/>checkbox2</label>
  26. </checkbox-group>
  27. </view>
  28. <view class="btn-area">
  29. <button formType="submit">Submit</button>
  30. <button formType="reset">Reset</button>
  31. </view>
  32. </form>
  1. Page({
  2. formSubmit: function(e) {
  3. console.log('The submit event occurs in form, and the carried data: ', e.detail.value)
  4. },
  5. formReset: function() {
  6. console.log('The reset event occurs in form')
  7. }
  8. })