2022归纳整理微信小程序常用表单组件

程序员必备接口测试调试工具：立即使用
Apipost = Postman + Swagger + Mock + Jmeter
Api设计、调试、文档、自动化测试工具
后端、前端、测试，同时在线协作，内容实时同步

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

1、常用表单组件

1.1 button

  <button>为按钮组件，是常用的表单组件之一，用于事件的触发以及表单的提交。其属性表如下所示。

代码示例：

1.2 checkbox

  <checkbox>为复选框组件，常用于在表单中进行多项数据的选择。复选框的<checkbox-group>为父控件，其内部嵌套若干个<checkbox>子控件。

  <checkbox-group>属性如下：

  <checkbox>组件的属性如下：

代码示例：

checkbox.wxml

checkbox.js

1.3 input

  <input>为输入框组件，常用于文本(如姓名、年龄等信息)的输入。属性表如下：

1.4 label

  <label>是标签组件，不会呈现任何效果，但是可以用来改进表单组件的可用性。当用户在label元素内点击文本时，就会触发此控件，即当用户选择该标签时，事件会传递到和标签相关的表单控件上，可以使用for属性绑定id,也可以将空间放在该标签内部，该组件对应属性如下所示。

wxml

1.5 form

  <form>为表单控件组件，用于提交表单组件中的内容。<form>控件组件内部可以嵌套多种组件。

  组件属性如下：

form.wxml

form.js

  输入测试数据后点击注册按钮触发表单提交事件。

1.6 radio

  <radio>为单选框组件，往往需配合<radio-group>组件来使用，<radio>标签嵌套在<radio-group>当中。

  <radio-group>组件属性如下：

  <radio>组件属性如下：

radio.wxml

radio.js

1.7 slider

  <slider>为滑动选择器，用于可视化地动态改变某变量地取值。属性表如下：

slider.wxml

1.8 switch

  <switch>为开关选择器，常用于表单上地开关功能，属性表如下所示。

switch.wxml

1.9 textarea

  <textarea>为多行输入框，常用于多行文字的输入。

2、实训小案例–问卷调查

survey.wxml