form

表单，将组件内的用户输入的 <switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。

当点击 <form/> 表单中 formType 为 submit 的 <button/> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

属性名类型说明
report-submitBoolean是否返回 formId 用于发送模板消息
bindsubmitEventHandle携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}
bindresetEventHandle表单重置时会触发 reset 事件

示例代码

  1. <!--form.jxml-->
  2.     <form bindsubmit="formSubmit" bindreset="formReset">
  3.       <view class="switch-slider">
  4.         <view class="switch-slider-left">switch</view>
  5.         <switch class="switch-slider-right" name="switch"/>
  6.       </view>
  7.       <view class="switch-slider">
  8.         <view class="switch-slider-left">slider</view>
  9.         <slider class="switch-slider-right" name="slider" show-value ></slider>
  10.       </view>
  11.       <view>
  12.         <view class="page-form-title">input</view>
  13.         <input
  14.           class="page-form-input"
  15.           placeholder="请输入内容"
  16.           type="text"
  17.           value=""
  18.           name="input"
  19.         />
  20.       </view>
  21.       <view>
  22.         <view class="page-form-title">radio</view>
  23.         <radio-group name="radio">
  24.           <label class="radio-label"><radio value="radio1"/>radio1</label>
  25.           <label class="radio-label"><radio value="radio2"/>radio2</label>
  26.         </radio-group>
  27.       </view>
  28.       <view>
  29.         <view class="page-form-title">checkbox</view>
  30.         <checkbox-group name="checkbox">
  31.           <label class="radio-label"><checkbox value="checkbox1"/>checkbox1</label>
  32.           <label class="radio-label"><checkbox value="checkbox2"/>checkbox2</label>
  33.         </checkbox-group>
  34.       </view>
  35.       <view class="btn-area">
  36.         <button formType="submit">表单提交</button>
  37.         <button formType="reset">表单重置</button>
  38.       </view>
  39.     </form>

form - 图1