国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

微信小程序 form組件詳解

2019-11-20 08:40:18
字體:
來源:轉載
供稿:網友

表單:

將組件內的用戶輸入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交

主要屬性:

效果圖:

 ml:

<!--頭像--><view style="display:flex;justify-content: center;">  <image style="width:130rpx;height:130rpx;border-radius:50%;margin-top:10%;" src="../../image/logo.jpg"> </image></view><!--form表單組件 是提交form內的所有選中屬性的值,注意每個form表單內的組件都必須有name屬性指定否則提交不上去,button中的type兩個submit,reset屬性分別對應form的兩個事件--><form bindsubmit="listenFormSubmit" bindreser="listenFormReser" >  <!--用戶名與密碼-->  <View class="inputView">    <input class="input" name="username" type="number" placeholder="請輸入賬號" placeholder-style="color: gray"> </input>  </View>  <view class="inputView">    <input class="input" name="password" password="true" placeholder="請輸入密碼" placeholder-style="color: gray"/>  </view>  <!--登錄用戶類型-->  <View style="display:flex;justify-content: center;margin-top:10px;">    <radio-group name="radio-group" bindchange="radioChange">      <label>        <radio value="manager" checked="true"/>管理員      </label>      <label>        <radio value="tearch" checked="true"/>老師      </label>      <label>      <radio value="student" checked="true"/>學生      </label>    </radio-group>    <!--忘記密碼-->    <label>      <switch name="switch" type="checkbox" checked bindchange="switch1Change" style="margin-left:20px;"/>      <Text style="font-size: 14px;padding-left:5px;">忘記密碼?</Text>    </label>  </View>  <!--button formType屬性兩個可選值submit, reset分別會觸發form的bindsubmit,bindreser事件 -->  <button formType="submit" type="primary" style="margin-top:10px;">提交</button>  <button formType="reset" type="warn" style="margin-top:10px;">重置</button></form>

ss:

.input{  padding-left: 10px;  height: 44px;}.inputView{  /*邊界:大小1px, 為固體,為綠色*/  border: 1px solid green;  /*邊界角的弧度*/  border-radius: 10px;  margin-left: 5px;  margin-right: 5px;  margin-top: 15px;}

js:

復制代碼

Page({ data:{  // text:"這是一個頁面" }, //點擊提交 listenFormSubmit:function(e){   console.log('listenFormSubmit=',e.detail.value) }, //點擊重置 listenFormReser:function(e){   console.log('listenFormReser=',e.detail.value) }, //點擊忘記密碼 switch1Change:function(e){  console.log('switch1Change=',e.detail.value) },  //當選中某一個的時候回調該函數。e.detail.value:獲取選中某個radio的value radioChange: function(e) {  console.log('radio發生change事件,攜帶value值為:', e.detail.value) }})

注意:

form表單組件 是提交form內的所有選中屬性的值,

注意每個form表單內的組件都必須有name屬性指定否則提交不上去,

button中的type兩個submit,reset屬性分別對應form的兩個事件

感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 罗江县| 石首市| 游戏| 利川市| 保康县| 台山市| 浦城县| 柘荣县| 三原县| 牙克石市| 原阳县| 松江区| 疏勒县| 井陉县| 博兴县| 焉耆| 汽车| 讷河市| 宿州市| 土默特左旗| 剑阁县| 高唐县| 皋兰县| 湖南省| 静乐县| 武隆县| 柏乡县| 康保县| 苗栗市| 垦利县| 罗江县| 聊城市| 高要市| 岳阳县| 乐平市| 油尖旺区| 柯坪县| 炎陵县| 冷水江市| 清水河县| 阜阳市|