表单组件的使用

表单组件的使用目录表单组件介绍2任务实现表单介绍任务描述了解并掌握form、button、input、switch、slider。3任务描述功能：将用户输入的信息提交。需要点击submit按钮，并在表单组件中加上name作为key。4表单介绍

5属性名类型说明report-submitBoolean是否返回formId用于发送模板消息bindsubmitEventHandle携带form中的数据触发submit事件bindresetEventHandle表单重置时会触发reset事件form属性表单介绍

6属性名类型默认值说明sizeStringdefault按钮的大小typeStringdefault按钮的样式类型disabledBooleanfalse是否禁用form-typeString无用于<form>组件，点击分别会触发<form>组件的submit/reset事件hover-classStringButton-hover指定按钮按下去的样式类表单介绍button属性

Button属性size有效值：7值说明default默认大小mini小尺寸表单介绍

Button属性type有效值：8值说明primary绿色default白色warn红色表单介绍

Button属性form-type有效值：9值说明submit提交表单reset重置表单表单介绍input输入框

10属性名类型默认值说明valueString输入框的初始内容typeString“text”input的类型passwordBooleanfalse是否是密码类型placeholderString输入框为空时占位符focusBooleanfalse获取焦点maxlengthNumber140最大输入长度表单介绍input输入框type有效值11值说明text文本输入键盘number数字输入键盘idcard身份证输入键盘dight带小数点的数字键盘表单介绍switch开关选择器12属性名类型默认值说明checkedBooleanfalse是否选中disabledBooleanfalse是否禁用typeStringswitch样式，有效值：switch,checkboxbindchangeEvenHandlechecked改变时触发change事件colorColorswitch的颜色aria-labelString无障碍访问，（属性）元素的额外描述表单介绍slider滑动选择器13属性名类型默认值说明minNumber0最小值maxNumber100最大值stepNumber1步长，取值必须大于0，并且可被(max-min)整除disabledBooleanfalse是否禁用valueNumber0当前取值colorColor#e9e9e9背景条的颜色（请使用backgroundColor）表单介绍任务实现Form表单：<formbindsubmit="formSubmit"bindreset="formReset"></form>form绑定的事件：Page({formSubmit:function(e){console.log('form发生了submit事件，携带数据为：',e.detail.value)},formReset:function(){console.log('form发生了reset事件')}})14Form表单内使用view布局，各组件位于view内，如：<formbindsubmit="formSubmit"bindreset="formReset"><viewclass="sectionsection_gap"><viewclass="section__title">switch</view><switchname="switch"/></view><viewclass="sectionsection_gap"><viewclass="section__title">slider</view><slidername="slider"show-value></slider></view>

<viewclass="section"><viewclass="section__title">input</view><inputname="input"placeholder="pleaseinputhere"/></view>15任务实现<viewclass="sectionsection_gap"><viewclass="section__title">radio</view><radio-groupname="radio-group"><label><radiovalue="radio1"/>radio1</label><label><radiovalue="radio2"/>radio2</label></radio-group></view><viewclass="sectionsection_gap"><viewclass="section__title">checkbox</view><checkbox-groupname="checkbox"><label><checkboxvalue="checkbox1"/>checkbox1</label><label><checkboxvalue="checkbox2"/>checkbox2</label></checkbox-group></view>16任务实现<viewclass="btn-area"><buttonformType="submit">Submit</button>