表單組件的使用一、任務(wù)描述2

了解并掌握form、button、input、switch、slider。功能：將用戶輸入的信息提交。需要點擊submit按鈕，并在表單組件中加上name作為key。二、表單簡介3form屬性屬性名類型說明report-submitBoolean是否返回formId用于發(fā)送模板消息bindsubmitEventHandle攜帶form中的數(shù)據(jù)觸發(fā)submit事件bindresetEventHandle表單重置時會觸發(fā)reset事件二、表單簡介4button屬性屬性名類型默認值說明sizeStringdefault按鈕的大小typeStringdefault按鈕的樣式類型disabledBooleanfalse是否禁用form-typeString無用于<form>組件，點擊分別會觸發(fā)<form>組件的submit/reset事件hover-classStringButton-hover指定按鈕按下去的樣式類二、表單簡介5Button屬性size有效值：值說明default默認大小mini小尺寸二、表單簡介6Button屬性type有效值：值說明primary綠色default白色warn紅色二、表單簡介7Button屬性form-type有效值：值說明submit提交表單reset重置表單二、表單簡介8input輸入框?qū)傩悦愋湍J值說明valueString輸入框的初始內(nèi)容typeString“text”input的類型passwordBooleanfalse是否是密碼類型placeholderString輸入框為空時占位符focusBooleanfalse獲取焦點maxlengthNumber140最大輸入長度二、表單簡介9二、表單簡介10

switch開關(guān)選擇器屬性名類型默認值說明checkedBooleanfalse是否選中disabledBooleanfalse是否禁用typeStringswitch樣式，有效值：switch,checkboxbindchangeEvenHandlechecked改變時觸發(fā)change事件colorColorswitch的顏色aria-labelString無障礙訪問，（屬性）元素的額外描述二、表單簡介11slider滑動選擇器屬性名類型默認值說明minNumber0最小值maxNumber100最大值stepNumber1步長，取值必須大于0，并且可被(max-min)整除disabledBooleanfalse是否禁用valueNumber0當前取值colorColor#e9e9e9背景條的顏色（請使用backgroundColor）三、任務(wù)簡介12

Form表單：<formbindsubmit="formSubmit"bindreset="formReset"></form>form綁定的事件：Page({formSubmit:function(e){console.log('form發(fā)生了submit事件，攜帶數(shù)據(jù)為：',e.detail.value)},formReset:function(){console.log('form發(fā)生了reset事件')}})三、任務(wù)簡介13

Form表單內(nèi)使用view布局，各組件位于view內(nèi)，如：<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>三、任務(wù)簡介14

<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><viewclass="btn-area"><buttonformType="submit">Submit</button><bu