微信小程序 form組件詳解

更新時(shí)間：2016年10月25日 10:02:10 投稿：lqh

這篇文章主要介紹了微信小程序 form組件詳解的相關(guān)資料,需要的朋友可以參考下

表單：

將組件內(nèi)的用戶(hù)輸入的<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內(nèi)的所有選中屬性的值，
注意每個(gè)form表單內(nèi)的組件都必須有name屬性指定否則提交不上去，
button中的type兩個(gè)submit，reset屬性分別對(duì)應(yīng)form的兩個(gè)事件
-->
<form bindsubmit="listenFormSubmit" bindreser="listenFormReser" >
  <!--用戶(hù)名與密碼-->
  <View class="inputView">
    <input class="input" name="username" type="number" placeholder="請(qǐng)輸入賬號(hào)" placeholder-style="color: gray"> </input>
  </View>
  <view class="inputView">
    <input class="input" name="password" password="true" placeholder="請(qǐng)輸入密碼" placeholder-style="color: gray"/>
  </view>
  <!--登錄用戶(hù)類(lèi)型-->
  <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"/>學(xué)生
      </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屬性?xún)蓚€(gè)可選值submit, reset分別會(huì)觸發(fā)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:

復(fù)制代碼

Page({
 data:{
  // text:"這是一個(gè)頁(yè)面"
 },
 //點(diǎn)擊提交
 listenFormSubmit:function(e){
   console.log('listenFormSubmit=',e.detail.value)
 },
 //點(diǎn)擊重置
 listenFormReser:function(e){
   console.log('listenFormReser=',e.detail.value)
 },
 //點(diǎn)擊忘記密碼
 switch1Change:function(e){
  console.log('switch1Change=',e.detail.value)
 },
  //當(dāng)選中某一個(gè)的時(shí)候回調(diào)該函數(shù)。e.detail.value：獲取選中某個(gè)radio的value
 radioChange: function(e) {
  console.log('radio發(fā)生change事件，攜帶value值為：', e.detail.value)
 }
})

注意：

form表單組件是提交form內(nèi)的所有選中屬性的值，

注意每個(gè)form表單內(nèi)的組件都必須有name屬性指定否則提交不上去，

button中的type兩個(gè)submit，reset屬性分別對(duì)應(yīng)form的兩個(gè)事件

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: