• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

第六篇、微信小程序-form组件

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

表单:

将组件内的用户输入的<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的两个事件


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序,表单提交发布时间:2022-07-18
下一篇:
小程序之模板消息 - 苏小十~发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap