官方手册：
实例走一波 >>>
form.wxml
<!--pages/form/form.wxml-->
<
text
>pages/form/form.wxml
</
text
>
<
view
class=
"viewTitle"
>
<
text
class=
"view-Name"
>form表单
</
text
>
<
view
class=
"lineView"
></
view
>
</
view
>
<!--这里用form，name=“nameName1”可以作为form的属性进行
（e.detail.value.nameName1）调用,
form自带有提交和重置按钮，会自动获取表单中所有控件值的改变-->
<
form
class=
"page__bd"
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
value=
"50"
name=
"slider"
show-value
></
slider
>
</
view
>
<
view
class=
"section"
>
<
view
class=
"section__title"
>input输入框：
</
view
>
<
input
name=
"input"
style=
"background-color: #FFFFFF"
placeholder=
"请在这里输入"
/
>
</
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=
"section"
>
<
view
class=
"section__title"
>地区选择器:
</
view
>
<
picker
name=
"areaPicker"
bindchange=
"bindPickerChange"
value=
"{{index}}"
range=
"{{array}}"
>
<
view
class=
"picker"
>
当前选择：{{array[index]}}
</
view
>
</
picker
>
</
view
>
<
view
class=
"section"
>
<
view
class=
"section__title"
>时间选择器:
</
view
>
<
picker
name=
"timePicker"
mode=
"time"
value=
"{{time}}"
start=
"09:01"
end=
"21:01"
bindchange=
"bindTimeChange"
>
<
view
class=
"picker"
>
当前选择: {{time}}
</
view
>
</
picker
>
</
view
>
<
view
class=
"section"
>
<
view
class=
"section__title"
>日期选择器:
</
view
>
<
picker
name=
"datePicker"
mode=
"date"
value=
"{{date}}"
start=
"2016-12-20"
end=
"2017-09-01"
bindchange=
"bindDateChange"
>
<
view
class=
"picker"
>
当前选择: {{date}}
</
view
>
</
picker
>
</
view
>
<
view
class=
"btn-area"
>
<
button
form-type=
"submit"
>Submit提交
</
button
>
<
button
form-type=
"reset"
>Reset重置
</
button
>
</
view
>
</
form
>
form.js
Page
({
//初始化数据
data
:
{
array
:
[
'成都'
,
'资阳'
,
'绵阳'
,
'自贡'
],
index
:
0
,
date
:
'2016-12-20'
,
time
:
'11:19'
,
allValue
:
''
},
//表单提交按钮
formSubmit
:
function
(e
)
{
console
.log
(
'form发生了submit事件，携带数据为：'
, e
.detail
.value
)
this
.setData
({
allValue
: e
.detail
.value
})
},
//表单重置按钮
formReset
:
function
(e
)
{
console
.log
(
'form发生了reset事件，携带数据为：'
, e
.detail
.value
)
this
.setData
({
allValue
:
''
})
},
//---------------------与选择器相关的方法
//地区选择
bindPickerChange
:
function
(e
)
{
console
.log
(
'picker发送选择改变，携带值为'
, e
.detail
.value
)
this
.setData
({
index
: e
.detail
.value
})
},
//日期选择
bindDateChange
:
function
(e
)
{
this
.setData
({
date
: e
.detail
.value
})
},
//时间选择
bindTimeChange
:
function
(e
)
{
this
.setData
({
time
: e
.detail
.value
})
},
})
效果：
提交：
分析：
form.wxml
a.Form表单，需要绑定一个submit事件，在小程序中，属性为bindsubmit,
bindsubmit=”formSubmit” 这里的属性值formSubmit，命名可以为符合规范的任意值，相当于以前html中的
b.其他的属性和之前的HTML差不多，注意的是，表单一定要有name=“value”，后端处理和以前一样，比如name=”username” PHP可以用 $_POST[‘username’]来接收。
C.由于小程序没有input submit这个按钮，所以在每个form表单中都要有一个提交按钮，
<button formType="submit">submit提交</button>，这个按钮就是用来开启提交事件的。
form.js
Page()这个方法是必须有的，里面放置js对象，用于页面加载的时候，呈现效果
data: {},数据对象，设置页面中的数据，前端可以通过读取这个对象里面的数据来显示出来。
formSubmit: function 小程序中方法都是 方法名:function()，其中function可以传入一个参数，作为触发当前时间的对象
(e.detail.value）中的e
这里的e，就是当前触发事件的对象，类似于html onclick=“foo(this)”this对象，小程序封装了许多内置的调用方法，e.detail.value.mobile 就是当前对象name=”mobile”的对象的值e.detail.value.mobile.length就是这个值的长度
showToast类似于JS中的alert，弹出框，title 是弹出框的显示的信息，icon是弹出框的图标状态，目前只有loading 和success这两个状态。duration是弹出框在屏幕上显示的时间。
success: function (res) {
if (res . data . status == 0) {
wx . showToast({
title: res . data . info,
icon: 'loading',
duration: 1500
})
} else {
wx . showToast({
title: res . data . info,//这里打印出登录成功
icon: 'success',
duration: 1000
})
}
},
由于POST和GET传送数据的方式不一样：
POST的header必须是： "Content-Type": "application/x-www-form-urlencoded"
GET的header可以是: 'content-type': 'application/json'