之前我们简单介绍了小程序的基础组件，接下来我们来说一下小程序的表单组件；说到表单组件就是用户需要填入一些表单数据，而哪里会用到这个表单组件呢？比如用户注册登录的是需要填入的用户名，密码什么的，就需要用到小程序的表单组件。
表单组件form开始form结束，一个表单组件里面可以包含的元素就很多了，这里简单列举一下：
button：按钮
checkbox：多选框
checkbox-group：多项选择器，内部由多个checkbox组成。
editor：富文本编辑器，可以对图片、文字进行编辑。
form：表单。
input：输入框。
label：用来改进表单组件的可用性。
picker：选择器，从底部弹出，比如日期选择器、地址选择器什么的。
picker-view：嵌入 页面的滚动选择器。
picker-view-column：滚动选择器的子项。
radio：单选。
radio-group：单项选择器，由多个radio组成。
slider：滑动选择器。
switch：开关按钮。
textarea：多行输入框。
更多表单组件详情，可以访问小程序表单组件官网。
说了这么多表单组件，我们简单介绍几个，更多的使用场景自己进行尝试~
input
input输入框也是有很多属性的，可以根据自己的业务需求进行选择，截图截不完，详情查看input表单组件官网。
在使用属性的时候，要注意官网给出的取值空间。
接下来通过简单的代码演示一下input组件的使用：
1.首先我们在.wxml文件创建一个form组件，然后内部包含一个input组件，然后设定input的输入类型type，编写input提示内容，绑定input输入事件监听函数
<text>小程序表单组件</text>
<form style="margin-top:50rpx;">
<view class="input_class_view">
<!--
type="text" 可以输入的文本类型 比如密码的时候就是password
placeholder="请输入..." 文本框提示内容
bindinput="inputFunction" 绑定文本框输入事件监听
-->
<input type="text" placeholder="请输入..." bindinput="inputFunction"></input>
</view>
</form>
2.既然我们绑定是文本框输入事件监听的函数，那么我们就需要去到.js实现该函数，这里做简单的打印文本框内容
inputFunction:function(edit){
console.log(edit)
},
3.运行编写的代码，查看模拟器，可以看到请输入…这一区域就是我们的input元素了
4.随便输入一些值，然后查看控制台，可以看到我们在input里面输入了五个字符，然后控制台打印了五行数据
这里不是控制台的误操作，因为我们每输入一个字符，我们的inputFunction监听函数就会打印一个字符，这时候你点开控制台里面的数据，你会发现五条数据的value分别是 a as asd asdg asdgf这个样子的，看下面这张图就可以理解这个逻辑了。
5.那么我们既然可以看到控制台打印的数据了，我们怎么获取这个数据呢？首先我们先来分析一下控制台这个数据显示的数据层级，detail然后value，value是我们需要的值，怎么拿到这个值呢？前面我们在创建input输入事件监听函数的时候有传入一个值edit，这个值就是input的本身，需要通过edit去获取。
6.我们先在data里面创建一个空的数据源inputStr
data: {
inputStr:""
},
7.在input事件监听函数里面获取input输入的值，通过setData的方式给data里面的数据源赋值。第五点的时候说到了，input输入的数据是在detail下面的value里面，我们就通过我们传入的值edit去进行获取
data: {
inputStr:""
},
inputFunction:function(edit){
this.setData({
inputStr : edit.detail.value
})
},
8.通过双向绑定来展示一下获取到的值，在.wxml里面添加一个text元素：
<text>显示输入框的值:{{inputStr}}</text>
看结果：
这就是input的简单用法了，更多用法更多input元素属性自行查阅官网进行尝试~
checkbox
多选操作，这个就很好理解了，比如淘宝、京东的购物车，那里面就有权限多选操作，就要用到checkbox。
我们也通过简单的代码来演示一下多选框；
1.首先在data里面定义一个数据源，name多选框的名字、value多选框的值、checked是否默认选中：
data: {
chaeckBoxList:[{
name:"多项选择框1",
value:"多项选择框1",
checked:true
},{
name:"多项选择框2",
value:"多项选择框2",
checked:false
},{
name:"多项选择框3",
value:"多项选择框3",
checked:false
}]
},
2.回到.wxml文件，通过for循环把list里面的值取出来，并添加到checkbox里面去；这里注意checkbox一般都是被checkbox-group包裹起来的：
<text>小程序表单组件</text>
<form style="margin-top:50rpx;">
<view class="checkbox_class_view">
<checkbox-group bindchange="checkBoxChange">
<label wx:for="{{chaeckBoxList}}" wx:for-item="checkItem">
<checkbox value="{{checkItem.value}}" checked="{{checkItem.checked}}"></checkbox>{{checkItem.name}}
</label>
</checkbox-group>
</view>
</form>
3.给checkbox-group添加监听方法bindchange=“checkBoxChange”，并在.js文件里面实现该方法，获取选中的value值并打印：
checkBoxChange:function(views){
console.log(views.detail.value)
},
4.运行模拟器，查看效果图，并进行选择/取消选择操作：
5.操作查看控制台结果：
选择一个：
选择两个：
选择三个：
可以看到都获取到对应的checkbox的value并在控制台进行了输出。
radio
单项选择框和多项选择框的用法就有点大同小异了，一般我们在那些情况下使用到单线选择框呢？比如用户注册选择性别肯定不可能男女都选，所以就要用到单项选择框了；这里也通过简单的代码进行演示一下。
1.js文件定义数据源：
data: {
radioList:[{
name:"单项选择框1",
value:"单项选择框1",
checked:false
},{
name:"单项选择框2",
value:"单项选择框2",
checked:false
},{
name:"单项选择框3",
value:"单项选择框3",
checked:false
}]
},
2.通过for循环把数据源取出，并赋值到radio上面去，同样radio是被radio-group包裹起来的：
<text>小程序表单组件</text>
<form style="margin-top:50rpx;">
<view class="checkbox_class_view">
<radio-group bindchange="radioChange">
<label wx:for="{{radioList}}" wx:for-item="radioItem">
<radio value="{{radioItem.value}}" checked="{{radioItem.checked}}"></radio>{{radioItem.name}}
</label>
</radio-group>
</view>
</form>
3.实现选择监听事件函数radioChange
radioChange:function(e){
console.log(e.detail.value)
},
4.操作查看控制台
选择第一个：
选择第二个
选择第三个
可以很清楚的看到，每次选择一个的时候控制台都只会打印一条数据。
textarea
多行文本输入框，这个也好理解，就是输入框的升级版，可以输入多行字符，但是有几点是需要注意的。
1.textarea有固定高度，我们在控制台可以看到，一个textarea有宽300px高150px的固定宽高
2.既然有了固定宽高，当我们输入的内容超出了固定高度怎么办呢？这里就需要在textarea里面添加一个属性，自动增高
<textarea placeholder="输入文本内容" auto-height="true"></textarea>
auto-height="true"根据内容自动增高
这时候我们看控制台，可以看到高度那一行已经被加上删除线了，并且element.style 里面高度会显示成自适应的高度：
这就是textarea需要注意的地方，具体用法和输入框没有多大区别。
更多的属性使用详情可以查看官方文档：textarea官网地址
button
其实按钮也很简单，无非就是响应事件，我们创建两个按钮来实现提交和重置表单的事件。
1.wxml文件注册按钮：
<button form-type="submit">提交</button>
<button form-type="reset">重置表单</button>
2.我们在提交的时候肯定要把表单里面的值给携带过去，不然就是提交了个寂寞，那我们怎么获取表单里面元素的值呢？首先我们要在表单元素里面添加一个name，这里用input和radio进行举例：
<text>小程序表单组件</text>
<form style="margin-top:50rpx;" bindsubmit="formSubmit">
<view class="button_view">
<!--
name="inputName" 元素name
-->
<input name="inputName" type="text" placeholder="清输入" bindinput="inputFunction"></input>
<!--
name="checkboxName" 元素name
-->
<radio-group name="checkboxName">
<label wx:for="{{radioList}}" wx:for-item="radioItem">
<radio value="{{radioItem.value}}" checked="{{radioItem.checked}}"></radio>{{radioItem.name}}
</label>
</radio-group>
<text>输入的值:{{inputStr}}</text>
<button form-type="submit">提交</button>
<button form-type="reset">重置表单</button>
</view>
</form>
我们在点击提交的时候，是会响应form表单的bindsubmit=“formSubmit”，所以我们要去到.js文件实现bindSubmit事件的函数。
3.实现提交时间响应函数
formSubmit:function(e){
console.log(e.detail.value.checkboxName)
console.log(e.detail.value.inputName)
},
之前我们在获取input的值的时候是直接detail后面就获取value,这里为什么要获取value下层呢？下层又是什么呢？value下层就是我们定义的元素的name，获取下层是因为我们在提交的时候是响应整个表单，直接获取value是获取到了整个表单，所以我们要获取指定数据就需要通过元素的name进行获取。
4.控制看一下结果：
这里可以看到控制台获取到了输入的结果，以及radio单项选择的结果，提交事件就这样子了。
5.重置表单事件就很简单了，简单来说就是还原表单的初始状态，清空输入框，清除选择框等操作：
点一下表单里面的元素回到初始状态，但是我们发现，文本框没有返回到初始状态？因为这里我们还没有实现表单的重置事件监听bindreset=“formReset”
6.我们加上重置事件监听在进行尝试：
.wxml表单添加
<form style="margin-top:50rpx;" bindsubmit="formSubmit" bindreset="formReset">
.js实现对应函数，将数据源的值赋空
formReset:function(e){
this.setData({
inputStr:""
})
},
再来查看一下效果：
点击之后文本框的内容也变回最初的样子了。