form 表单
- 属性说明
- 示例
  - 代码示例 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
        });
    }
});