微信小程序表单组件是小程序中常用的一类组件,它可以帮助开发者快速构建出复杂的表单界面。微信小程序表单组件包括:
1. button:按钮,用于触发特定的交互行为。 2. checkbox:多选框,用于获取用户多项选择的数据。 3. form:表单,将一系列表单组件进行分组、包裹、布局。 4. input:输入框,用于获取用户输入的文本内容。 5. label:标签,为 input 等表单组件添加说明文字。 6. picker:选择器,用于在一个列表里进行选择。 7. radio-group/radio: 单选框, 由 radio-group 和 radio 两个标签配合使用, 由 radio-group 对 radio 进行分组, 由 radio 来实际进行选中或者取消选中的功能。 8. slider: 滑动条, 由 slider 标签来实际进行数值的调整, 适合场景有: 音量调整、亮度调整、时间调整、日期选择、地图位置选取、图片大小调整。 9. switch: 开关, 由 switch 标签来实际进行开关的切换, 适合场景有: 启动/关闭特定功能、开启/关闭特定通知。 10. textarea: 多行文本域, 由 textarea 标签来实际进行多文本内容的录入, 适合场景有: 聊天内容录入、留言内容录入、详情内容录入。
基础库 1.0.0 开始支持,低版本需做兼容处理。
表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。
当点击 form 表单中 form-type 为 submit 的 button 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
report-submit | boolean | false | 否 | 是否返回 formId 用于发送模板消息 | 1.0.0 |
report-submit-timeout | number | 0 | 否 | 等待一段时间(毫秒数)以确认 formId 是否生效。如果未指定这个参数,formId 有很小的概率是无效的(如遇到网络失败的情况)。指定这个参数将可以检测 formId 是否有效,以这个参数的时间作为这项检测的超时时间。如果失败,将返回 requestFormId:fail 开头的 formId | 2.6.2 |
bindsubmit | eventhandle | 否 | 携带 form 中的数据触发 submit 事件,event.detail = {value : {"name": "value"} , formId: ""} | 1.0.0 | |
bindreset | eventhandle | 否 | 表单重置时会触发 reset 事件 | 1.0.0 |
<form bindsubmit="formSubmit" bindreset="formReset">
<view class="section section_gap">
<view class="section__title">switch</view>
<switch name="switch"/>
</view>
<view class="section section_gap">
<view class="section__title">slider</view>
<slider name="slider" show-value ></slider>
</view>
<view class="section">
<view class="section__title">input</view>
<input name="input" placeholder="please input here" />
</view>
<view class="section section_gap">
<view class="section__title">radio</view>
<radio-group name="radio-group">
<label><radio value="radio1"/>radio1</label>
<label><radio value="radio2"/>radio2</label>
</radio-group>
</view>
<view class="section section_gap">
<view class="section__title">checkbox</view>
<checkbox-group name="checkbox">
<label><checkbox value="checkbox1"/>checkbox1</label>
<label><checkbox value="checkbox2"/>checkbox2</label>
</checkbox-group>
</view>
<view class="btn-area">
<button formType="submit">Submit</button>
<button formType="reset">Reset</button>
</view>
</form>
Page({
formSubmit: function(e) {
console.log("form发生了submit事件,携带数据为:", e.detail.value)
},
formReset: function() {
console.log("form发生了reset事件")
}
})
wx.saveVideoToPhotosAlbum(Object object)基础库 1.2.0 开始支持,低版本需做兼容处理。调用前需要用户授权scope.writePhotosAl...
Arduino - OverviewArduino是一个基于易于使用的硬件和软件的原型平台(开源)。 它包括一个可编程的电路板(称为微控制器)和一个称...
delayMicroseconds()函数接受单个整数(或数字)参数。此数字表示时间,以微秒为单位。一毫秒内有一千微秒,一秒内有一百万微秒...
global-shortcut模块可以便捷的为您设置(注册/注销)各种自定义操作的快捷键.Note: 使用此模块注册的快捷键是系统全局的(QQ截图那...
JavaScript 内存分析内存泄露是指计算机内存逐渐丢失。当某个程序总是无法释放内存时,就会出现内存泄露。JavaScript web 应用程...
Tableau筛选器中的Top选项用于限制筛选器的结果集。例如,从一组大量的销售记录,我们只想要前十个值。我们可以使用内置选项应用...