支付寶小程序表單組件 表單·Form

表單。用于將組件內(nèi)的用戶輸入的 textarea、 switch、 input 、checkbox、slider、radio、picker等組件提交。

當(dāng)點(diǎn)擊 form 表單中 form-type 為 submit 的 button 組件時(shí)，會將表單組件值進(jìn)行提交，需要在表單組件中加上 name 來作為 key。

說明：

• 預(yù)覽效果建議以真機(jī)為準(zhǔn)。
• 目前還不支持form表單渲染。
• formId 需要真機(jī)調(diào)試才會有返回值。

掃碼體驗(yàn)

示例代碼

<!-- 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: `數(shù)據(jù)：${JSON.stringify(e.detail.value)}`,
    });
  },
  onReset() {
  },
});
/* API-DEMO page/component/form/form.acss */
button + button {
  margin-top: 32rpx;
}

屬性

常見問題

formId 返回值是否可以自定義？

formId 返回值不支持自定義，設(shè)置完成對應(yīng)屬性 report-submit 后支付寶返回。

支付寶小程序消息推送獲取的 formId 有效期是多久？用一次會失效一次嗎？

formId 有效期是7天，可在 7 天內(nèi)向用戶推送消息。一個(gè) formId 可發(fā)送三次。

小程序接入，付款后調(diào)用消息下發(fā)返回 formId 為何顯示不合法？

商戶的模板是表單類型，表單類的模板消息只允許使用表單組件生成的 formId 發(fā)送。

小程序 form 表單靜默觸發(fā)嗎？

不支持，需要用戶點(diǎn)擊觸發(fā)。