总结微信小程序常见的表单组件。

本文给大家带来一些关于微信小程序的知识，包括一些常用的表单组件，包括按钮、复选框、输入、标签等等。下面就来看看吧，希望对你有帮助。

【相关学习推荐:小程序学习教程】

1.通用表单组件1.1button 按钮组件是常用的表单组件之一，用于触发事件和提交表单。其属性表如下所示。

代码示例:

ltview class = 演示-盒子 gt ltview class = 标题 gt7 .纽扣小盒子

1.2复选框 lt复选框 gt作为复选框组件，它通常用于选择表单中的多项数据。复选框是父控件，还有几个

lt复选框-组 gt这些属性如下所示:

lt复选框 gt组件的属性如下:

代码示例:

checkbox.wxml

ltview class = 演示-盒子 gt ltview class = 标题 gt8 .复选框小盒 ltview class = 标题 gt使用for循环进行大规模生产

第({ data: { items:

1.3输入 lt输入 gt作为输入框组件，常用于输入文本(如姓名、年龄等信息)。属性表如下:

ltview class = 演示-盒子 gt ltview class = 标题 gt9 .输入小Case

1.4标签 lt标签 gt它是一个标签组件，不会显示任何效果，但是可以用来提高表单组件的可用性。当用户点击label元素中的文本时，这个控件就会被触发，也就是当用户选择标签时，事件就会被传递给与标签相关的表单控件。您可以使用for属性绑定id或将空格放在标签内。该组件的相应属性如下所示。

页面结构

ltview class = 演示-盒子 gt ltview class = 标题 gt10.标签的小盒 ltview class = 标题 gt(1)使用for属性

这些组件如下:

form.wxml

ltview class = 演示-盒子 gt ltview class = 标题 gt1.表格的小格

page({ onSubmit(e){ console . log( ；表单中发生了提交事件，携带的数据是:")console.log(e.detail.value) }，on reset(){ console . log( ；表单已被重置事件重置。}}})输入测试数据后点击注册按钮，触发表单提交事件。

1.6无线电 lt收音机 gt作为一个无线电盒组件，经常需要与

ltradio -group gt；这些组件如下:

lt收音机 gt这些组件如下:

radio.wxml

ltview class = 演示-盒子 gt ltview class = 标题 gt14 .收音机小盒 ltview class = 标题 gt使用for循环进行大规模生产

第({ data: { radioItems:

1.7滑块 ltslider gt滑动选择器用于可视化地动态改变变量的值。属性表如下:

slider.wxml

ltview class = 演示-盒子 gt ltview class = 标题 gt15 .滑盖盒</view gt； ltview class = 标题 gt(1)滑动条的右侧显示当前进度值

1.8开关 lt开关 gt它是切换选择器，通常用于表单上的切换功能。属性表如下所示。

switch.wxml

ltview class = 演示-盒子 gt ltview class = 标题 gt16.开关小盒

1.9 textarea lttextarea gt它是一个多行输入框，常用于多行文字输入。

2.小型实际案例-问卷调查. wxml

ltview class = 内容 gt lt表单bindsubmit = onSubmit bindreset = onReset gt ltview class = 标题 gt1.你现在多大了？ lt/view gt； ltradio -group bind change = ；大学变革 gt lt无线电值= 一个"/>；One ；大学二年级学生

page({ universityChange:function(e){ console . log( ；你现在的选择有多大: "，e.detail.value) }，Mobil change:function(e){ console . log( ；你选择使用手机的最大用途是:“，e.detail.value) }，time change:function(e){ console . log( ；你每天选择使用手机的时间是:“，e . detail . value+ ；Hours " ) }，program change:function(e){ console . log( ；你的选择里有没有用过微信小程序:“，e.detail.value) }，on submit(e){ console . log( ；你对小程序未来的输入意见是:“+e.detail.value.textarea) }，on reset(){ console . log( ；表单已重置")}})

【相关学习推荐:小程序学习教程】以上是微信小程序常用表单组件的详细内容。请多关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 手把手指导你在小程序中实现保存图片的功能（小程序申请保存图片到相册）
• 如何在小程序中创建页面二维码
• 小程序如何动态制作小程序码分析（如何在小程序中动态生成小程序二维码图片）
• 如何解决小程序中的重启跳转错误（小程序重启）
• 教你如何部署微信小程序并上线（如何在线部署小程序）

本文由主机参考刊发，转载请注明：总结微信小程序常见的表单组件。 https://zhujicankao.com/73782.html