上一篇文章中，我们给大家介绍了小程序的视图容器及基础内容组件，该组件主要应用是输出内容。接下来这篇文章中，我们将继续介绍小程序最常用的表单组件，该组件主要应用是获取输入内容。...表单组件分为11个组件，我们将对这11个组件使用做详细的介绍。...Hello World - slider滑动选择器 除了正常的开关量以外，有时候我们还需要用到模拟量，这时出现一个滑块可供选择，那便是极好的，小程序官方给我们提供了一个slider组件来负责变量设置，让用过能够通过滑块调整某项数值...Hello World - form表单组件 form表单组件是所有表单组件中最重要的组件，没有form表单组件，上述的所有组件都不能提交数据到服务器或者小程序后端。...腾讯云联合小程序给大家带来了小程序·云开发解决方案，为开发者提供完整的云端支持，弱化后端和运维操作，使用平台原生 API 进行核心业务开发，实现快速上线和迭代。欢迎免费使用！
来说下 ，小程序的基础组件。...源码：https://github.com/limingios/wxProgram.git 中的No.12 表单组件 button checkbox/label form input picker picker-view...演示用例 在web开发中，表单提交很重要，在小程序里面也有对应的表单提交。...里面很多的效果需要通过在手机端看到，建议远程小程序看看效果很cool！...PS：小程序视图基本就是这样，最后我在myform做了个简单的例子。虽然做了几个例子，但是说实话还是没官网详细。大家一定要记住：学习小程序最好的方式就是通过官网，我也是通过这样学习的。
微信小程序常用表单组件 1、常用表单组件 1.1 button 1.2 checkbox 1.3 input 1.4 label 1.5 form 1.6 radio 1.7 slider 1.8 switch...1.9 textarea 2、实训小案例--问卷调查 1、常用表单组件 1.1 button 为按钮组件，是常用的表单组件之一，用于事件的触发以及表单的提交。...，不会呈现任何效果，但是可以用来改进表单组件的可用性。...，用于提交表单组件中的内容。... 4.你之前有使用过微信小程序吗
微信小程序包含了六大组件：视图容器、基础内容、导航、表单、互动和导航。这些组件可以通过WXML和WXSS进行布局和样式设置，从而构建出丰富的小程序界面和交互体验。...其中，视图容器组件包括view和scroll-view等，用于实现页面的结构和滚动效果；基础内容组件包括text和image等，用于显示文本和图片内容；表单组件包括button、input和checkbox...表单组件微信小程序表单组件官方文档button 按钮功能描述按钮。属性说明Skyline 仅列出与 WebView 属性的差异，未列出的属性与 WebView 一致。...当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。...（若图片中包含对应二维码或小程序码）的菜单。
以下将展示微信小程序之表单组件radio源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。功能描述：单选项目。...Bug & Tip1.tip: 若当前组件所在的页面或全局开启了 enablePassiveEvent 配置项，该内置组件可能会出现非预期表现（详情参考 enablePassiveEvent 文档）属性说明
以下将展示微信小程序之表单组件form源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。功能描述：表单。...当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。...目前可以自动识别下列内置 behaviors:wx://form-fieldwx://form-field-groupwx://form-field-buttonwx://form-field使自定义组件有类似于表单控件的行为...属性名类型描述最低版本nameString在表单中的字段名1.6.7value任意在表单中的字段值1.6.7代码示例：// custom-form-field.jsComponent({ behaviors...使 form 组件可以识别到这个自定义组件内部的所有表单控件。
以下将展示微信小程序之表单组件input源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。功能描述：输入框。...该组件是原生组件，使用时请注意相关限制属性说明：WebView：属性类型默认值必填说明最低版本valuestring是输入框的初始内容1.0.0typestringtext否input 的类型1.0.0...placeholder-class不支持Bug & Tip1.tip: confirm-type的最终表现与手机输入法本身的实现有关，部分安卓系统输入法和第三方输入法可能不支持或不完全支持2.tip : input 组件是一个原生组件...，字体是系统字体，所以无法设置 font-family3.tip : 在 input 聚焦期间，避免使用 css 动画4.tip : 对于将 input 封装在自定义组件中、而 form 在自定义组件外的情况...， form 将不能获得这个自定义组件中 input 的值。
以下将展示微信小程序之表单组件label源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。功能描述：用来改进表单组件的可用性。...="page-body"> 表单组件在...view> label用for标识表单组件
以下将展示微信小程序之表单组件picker源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。功能描述：从底部弹起的滚动选择器。
以下将展示微信小程序之表单组件checkbox源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。功能描述：多选项目。
以下将展示微信小程序之表单组件editor源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。功能描述：富文本编辑器，可以对图片、文字进行编辑。...通过setContents接口设置内容时，解析插入的 html 可能会由于一些非法标签导致解析错误，建议开发者在小程序内使用时通过 delta 进行插入。...富文本组件内部引入了一些基本的样式使得内容可以正确的展示，开发时可以进行覆盖。...需要注意的是，在其它组件或环境中使用富文本组件导出的 html 时，需要额外引入 这段样式，并维护
以下将展示微信小程序之表单组件switch源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。功能描述：开关选择器。
以下将展示微信小程序之表单组件button源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。 功能描述： 按钮。...，点击分别会触发 form 组件的 submit/reset 事件 1.0.0 合法值 说明 submit 提交表单 reset 重置表单 open-type string...否 微信开放能力 1.1.0 合法值 说明 最低版本 contact 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明 （*...小程序插件中不能使用*） 1.1.0 share 触发用户转发，使用前建议先阅读使用指引 1.2.0 getPhoneNumber 获取用户手机号，可以从 bindgetphonenumber...回调中获取到用户信息，具体说明 （*小程序插件中不能使用*） 1.2.0 getUserInfo 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 （*小程序插件中不能使用
以下将展示微信小程序之表单组件textarea源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。功能描述：多行输入框。...该组件是原生组件，使用时请注意相关限制。。
以下将展示微信小程序之表单组件slider源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。功能描述：滑动选择器。
以下将展示微信小程序之表单组件checkbox-group源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。
以下将展示微信小程序之表单组件picker-view源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。功能描述：嵌入页面的滚动选择器。...其中只可放置 picker-view-column组件，其它节点不会显示。属性说明：属性类型默认值必填说明最低版本valueArray.
以下将展示微信小程序之表单组件keyboard-accessory源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。
表单组件 1.工程目录 2.详细代码 3.结果展示 4.获取资源 这篇文章介绍微信小程序的表单组件的使用 内容包括添加视频播放、轮转图片、多选框 单选框、实时获取输入值、按钮提交输入控件的数据...笔者直接上代码，组件的详细介绍参考微信开发者文档：点击查看 嘿嘿！...先来看看结果视频 微信小程序表单组件测试 1.工程目录 2.详细代码 index.js Page({ /** * 页面的初始数据 */ data: { //background...order: 3; } 3.结果展示 测试展示图 调试信息，看标记部分 在这里插入图片描述 4.获取资源 【获取资源】 资源链接：资源获取 【关注微信公众号一起来交流】 · 发布者：全栈程序员栈长
微信小程序表单getinput优化 对于初学者来说，表单数据不同内容的获取大概如下所示。虽然非常容易阅读，但是如果表单需要填写的数据比较多，但是大量的重复写法会让人非常头疼。...GetTraffic(e){ this.setData({ traffic_id:e.detail.value }) }, 那么有没有一种方式能够把所有形式的表单获取都抽离成一个函数呢
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
