form 表单
- 属性说明
  - report-type 有效值
  - report-type 为 subscribe 时，event.detail.formId 说明
  - report-type 为 subscribe 时，status 和 message 具体值
- 示例
  - 代码示例 1：普通表单
  - 代码示例 2：模板类型表单

form 表单

解释：表单，将 form 组件内用户输入 / 选择的<switch>、<input>、<checkbox>、<slider>、<radio>、<picker>提交。当<form>表单中 form-type 为 submit 时，点击的<button>组件会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key 。
Web 态说明：在 Web 态下，由于浏览器的限制，部分系统信息无法获取，故暂不支持表单类、订阅类模板消息。

属性说明

属性名	类型	默认值	必填	说明	最低版本
report-submit	Boolean	false	否	是否返回 formId 用于发送模板消息（工具上 formId 为`‘’`，请在真机上测试），订阅消息详细说明请参考订阅消息接入	1.12 低版本请做兼容性处理
report-type	String	‘default’	否	模板消息的类型，report-submit 为 true 时填写有效取值：default / subscribe	3.105.3 低版本请做兼容性处理
template-id	String/Array.<string>		否（report-type 为 subscribe 时必填）	发送订阅类模板消息所用的模板库标题 ID ，可通过 getTemplateLibraryList 获取当参数类型为 Array 时，可传递 1~3 个模板库标题 ID	3.105.3（String 类型） 3.170.1（Array 类型）低版本请做兼容性处理
subscribe-id	String		否（report-type 为 subscribe 时必填）	发送订阅类模板消息时所使用的唯一标识符，内容由开发者自定义，用来标识订阅场景注意：同一用户在同一 subscribe-id 下的多次授权不累积下发权限，只能下发一条。若要订阅多条，需要不同 subscribe-id	3.105.3 低版本请做兼容性处理
bindsubmit	EventHandle		否	携带 form 中的数据触发 submit 事件，`event.detail = {value : {‘name’: ‘value’}, formId: ‘’, message: ‘’, status: ‘’}`，当 report-type 为 subscribe 时，status 和 message 中返回用户授权具体信息	–
bindreset	EventHandle		否	表单重置时会触发 reset 事件	–

report-type 有效值

值	说明	web 态说明
default	表单类模板消息	Web 态不支持表单类模板消息，bindsubmit 回调参数中的 message 始终为`“请求 formId 失败”`，status 始终为`500105`
subscribe	订阅类模板消息，需要用户授权才可发送	Web 态不支持订阅类模板消息，不会弹窗提示授权，会降级调起百度 App。bindsubmit 回调参数中的 message 始终为`“请求 formId 失败”`，status 始终为`500105`

report-type 为 subscribe 时，event.detail.formId 说明

1. 当 template-id 为 String 时（基础库 3.105.3 开始支持），event.detail 的 formId 为 String ，即此 template-id 所对应的的 formId 。举例如下：

SWAN
JS


 

  <form report-submit="true" report-type="subscribe" template-id="BD0001" subscribe-id="1234" bindsubmit="formSubmit">

   <button formType="submit" type="primary">template-id 为 String</button>

  </form>


 

  Page({

   formSubmit(e) {

   // 此时 formId 为 'BD0001-formId'（非真实数据）

   swan.showModal({

   title: 'template-id 为 string',

   content: e.detail.formId

   });

   }

  });

2. 当 template-id 为 Array 时（基础库 3.170.1 开始支持），event.detail 的 formId 为 Object ，其中对象的 key 为 template-id ，value 为其对应的 formId 。举例如下：

SWAN
JS


 

  <form report-submit="true" report-type="subscribe" template-id="{{templateId}}" subscribe-id="1235" bindsubmit="formSubmit">

   <button formType="submit" type="primary">template-id 为 Array</button>

  </form>


 

  Page({

   data: {

   templateId: ['BD0001', 'BD0002']

   },

   formSubmit(e) {

   // 此时 formId 为 {'BD0001': 'BD0001-formId', 'BD0002': 'BD0002-formId'}（非真实数据）

   swan.showModal({

   title: 'template-id 为 Array',

   content: JSON.stringify(e.detail.formId)

   });

   }

  });

如果 Array 中的 template-id 超过三个，返回的 formId 为空字符串，举例如下：

SWAN
JS


 

  <form report-submit="true" report-type="subscribe" template-id="{{templateId}}" subscribe-id="1236" bindsubmit="formSubmit">

   <button formType="submit" type="primary">template-id 超过三个</button>

  </form>


 

  Page({

   data: {

   templateId: ['BD0001', 'BD0002', 'BD0003', 'BD0004']

   },

   formSubmit(e) {

   // 此时 formId 为 ''

   swan.showModal({

   title: 'template-id 超过三个',

   content: e.detail.formId

   });

   }

  });

如果 Array 中有重复的 template-id ，重复的 template-id 对应的 formId 只返回一次，举例如下：

SWAN
JS


 

  <form report-submit="true" report-type="subscribe" template-id="{{templateId}}" subscribe-id="1237" bindsubmit="formSubmit">

   <button formType="submit" type="primary">有重复的 template-id</button>

  </form>


 

  Page({

   data: {

   templateId: ['BD0001', 'BD0001', 'BD0002']

   },

   formSubmit(e) {

   // 此时 formId 为 {'BD0001': 'BD0001-formId', 'BD0002': 'BD0002-formId'}（非真实数据）

   swan.showModal({

   title: '有重复的 template-id',

   content: JSON.stringify(e.detail.formId)

   });

   }

  });

注意：在提交 form 表单时，将会弹出模板消息授权弹窗，用户授权后才能在 event.detail 中获取被授权模板消息的 formId 。

report-type 为 subscribe 时，status 和 message 具体值

status 为 Number 类型，message 为 String 类型，当用户永久拒绝授权的时候，建议开发者不要再展示订阅消息授权面板入口。

status	message
500101	用户永久拒绝授权
500102	用户单次拒绝授权
500103	用户取消授权
500104	请求模板内容失败
500105	请求 formId 失败

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：普通表单

SWAN
JS


 

  <view class="wrap">

   <form bindsubmit="formSubmit"

   bindreset="formReset">

   <view class="card-area">

   <view class="top-description border-bottom">开关选择器</view>

   <view class="item-scroll">

   <text class="switch-text">开关</text>

   <switch></switch>

   </view>

   </view>

   <view class="card-area">

   <view class="top-description border-bottom">单项选择器</view>

   <radio-group name="radio-group">

   <radio class="block border-bottom" value="radio1">单选项一</radio>

   <radio class="block" value="radio2">单选项二</radio>

   </radio-group>

   </view>

   <view class="card-area">

   <view class="top-description border-bottom">多项选择器</view>

   <checkbox-group name="checkbox">

   <label class="block border-bottom">

   <checkbox value="checkbox1">多选项一</checkbox>

   </label>

   <label class="block border-bottom">

   <checkbox value="checkbox2">多选项二</checkbox>

   </label> 

   <label class="block">

   <checkbox value="checkbox2">多选项三</checkbox>

   </label>

   </checkbox-group>

   </view>

   <view class="card-area">

   <view class="top-description border-bottom">滑块选择器</view>

   <slider class="slider" activeColor="#3388FF" block-size="20" name="slider"></slider>

   </view>

   <view class="card-area">

   <view class="top-description border-bottom">输入框</view>

   <input name="input" class="ipt" placeholder="请在此输入" />

   </view>

   <view class="card-area">

   <view class="top-description border-bottom">提交表单</view>

   <button formType="submit" type="primary">提交</button>

   <button formType="reset">清空</button>

   </view>

   </form>

  </view>


 

  Page({

   formSubmit(e) {

   console.log('form发生了submit事件，携带数据为：', e.detail.value);

   swan.showModal({

   content: '数据：' + JSON.stringify(e.detail.value),

   confirmText: '确定'

   });

   },

   formReset(e) {

   console.log('form表单发生了', e.type);

   }

  });

代码示例 2：模板类型表单

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS


 

  <view class="wrap">

   <form

   report-submit

   report-type="subscribe"

   template-id="BD0003"

   subscribe-id="8026"

   bindsubmit="reportFormSubmit"

   bindreset="reportFormReset">

   <view class="card-area">

   <view class="top-description border-bottom">report-type为subscribe</view>

   <button formType="submit" type="primary">点击触发</button>

   </view>

   </form>

   <form

   report-submit

   report-type="default"

   bindsubmit="reportFormSubmit"

   bindreset="reportFormReset">

   <view class="card-area">

   <view class="top-description border-bottom">report-type为default</view>

   <button formType="submit" type="primary">点击触发</button>

   </view>

   </form>

   <button type="primary" class="middle-btn" open-type="login" bindlogin="login">登录</button>

  </view>


 

  Page({

   onLoad() {

   swan.showToast({

   title: '此组件需要登录态，请先点击下方的按钮登录',

   icon: 'none'

   })

   },

   login(e) {

   // 此组件需要在登陆态下使用

   console.log('登录信息:', e);

   if (e.detail.errCode === '10004') {

   swan.showToast({

   title: '用户未登录',

   icon: 'none'

   });

   return;

   }

   swan.showToast({

   title: '用户登录成功',

   icon: 'none'

   });

   },

   formSubmit(e) {

   swan.showModal({

   title: '表单数据',

   content: JSON.stringify(e.detail.message) + '/' +JSON.stringify(e.detail.status),

   confirmText: '确定',

   showCancel: false

   });

   }

  });

九八云百度小程序教程：form 表单

form 表单

属性说明

report-type 有效值

report-type 为 subscribe 时，event.detail.formId 说明

report-type 为 subscribe 时，status 和 message 具体值

示例

代码示例 1：普通表单

代码示例 2：模板类型表单

相关推荐

评论抢沙发

攻防案列

form 表单

属性说明

report-type 有效值

report-type 为 subscribe 时，event.detail.formId 说明

report-type 为 subscribe 时，status 和 message 具体值

示例

代码示例 1：普通表单

代码示例 2：模板类型表单

相关推荐

评论 抢沙发

攻防案列

评论抢沙发