• 下载
  • 社区

form 表单

表单。用于将组件内的用户输入的 textareaswitchinputcheckboxsliderradiopicker 等组件提交。

当点击 form 表单中 form-type 为 submit 的 button 组件时,会将表单组件值进行提交,需要在表单组件中加上 name 来作为 key。

说明:建议以真机效果为准。

扫码体验

qrcode for form

效果示例

The screenshot of form

示例代码

<!-- API-DEMO page/component/form/form.axml -->
<view class="page">
  <view class="page-description">表单</view>
  <form onSubmit="onSubmit" onReset="onReset">
    <view class="page-section">
      <view class="page-section-title">Slider</view>
      <view class="page-section-demo">
        <slider value="80" name="slider" show-value />
      </view>
    </view>
    <view class="page-section">
      <view class="form-row">
        <view class="form-row-label">Switch</view>
        <view class="form-row-content" style="text-align: right">
          <switch name="switch" />
        </view>
      </view>
      <view class="form-line" />
      <view class="form-row">
        <view class="form-row-label">Input</view>
        <view class="form-row-content">
          <input name="input" class="input" placeholder="input something" />
        </view>
      </view>
    </view>
    <view class="page-section">
      <view class="page-section-title">Radio</view>
      <view class="page-section-demo">
        <radio-group name="radio-group">
          <label><radio value="radio1" />radio1</label>
          <label><radio value="radio2" />radio2</label>
        </radio-group>
      </view>
    </view>
    <view class="page-section">
      <view class="page-section-title">Checkbox</view>
      <view class="page-section-demo">
        <checkbox-group name="checkbox">
          <label><checkbox value="checkbox1" />checkbox1</label>
          <label><checkbox value="checkbox2" />checkbox2</label>
        </checkbox-group>
      </view>
      <view class="page-section-btns">
        <view><button type="ghost" size="mini" formType="reset">Reset</button></view>
        <view><button type="primary" size="mini" data-id="121" formType="submit">Submit</button></view>
      </view>
    </view>
  </form>
</view>
// API-DEMO page/component/form/form.js
Page({
  data: {},
  onSubmit(e) {
    my.alert({
      content: `数据:${JSON.stringify(e.detail.value)}`,
    });
  },
  onReset() {
  },
});
/* API-DEMO page/component/form/form.acss */
button + button {
  margin-top: 32rpx;
}

属性

属性 类型 默认值 描述 最低版本
report-submit boolean - onSubmit 回调是否返回 formId,用于发送 模板消息,使用前可使用 canIUse ('form.report-submit')判断是否支持 1.3.0
onSubmit EventHandle - 携带 form 中的数据触发 submit 事件,event.detail = {value : {'slider': '80'}, buttonTarget: {'dataset': 'buttonDataset'} } (可以在 submit 按钮上添加自定义参数) buttonTarget 1.7.0 开始支持
onReset EventHandle - 表单重置时会触发 reset 事件 -

常见问题

formId 返回值是否可以自定义?

formId 返回值不支持自定义,设置完成对应属性 report-submit 后支付宝返回。

支付宝小程序消息推送获取的 formId 有效期是多久?用一次会失效一次吗?

formId 有效期是7天,可在 7 天内向用户推送消息。一个 formId 可发送三次。

小程序接入,付款后调用消息下发返回 formId 为何显示不合法?

商户的模板是表单类型,表单类的模板消息只允许使用表单组件生成的 formId 发送。

小程序 form 表单静默触发吗?

不支持,需要用户点击触发。