微信小程序 form组件详解


Posted in Javascript onOctober 25, 2016

表单:

将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交

主要属性:

微信小程序 form组件详解

效果图:

微信小程序 form组件详解

 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的两个事件

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
javascript正则表达式总结
Feb 29 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 Javascript
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
Node实现搜索框进行模糊查询
Jun 28 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 #Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 #Javascript
微信小程序  网络请求API详解
Oct 25 #Javascript
微信小程序 progress组件详解及实例代码
Oct 25 #Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 #Javascript
javascript实现获取指定精度的上传文件的大小简单实例
Oct 25 #Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 #Javascript
You might like
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
php表单提交问题的解决方法
2011/04/12 PHP
php文档更新介绍
2011/07/22 PHP
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
解析php中如何直接执行SHELL
2013/06/28 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
出纳的岗位职责
2013/11/09 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
2014年三万活动总结
2014/04/26 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers