All Products
Search
Document Center

Mobile Platform as a Service:form

Last Updated:Jul 17, 2023

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

image.png

Code sample

<form onSubmit="formSubmit" onReset="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('The submit event occurs in form, and the carried data: ', e.detail.value)
  },
  formReset: function() {
    console.log('The reset event occurs in form')
  }
})