微信小程序 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 相关文章推荐
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
微信小程序 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
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
jquery中对表单的基本操作代码
2010/07/29 Javascript
JsDom 编程小结
2011/08/09 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
require.js的用法详解
2015/10/20 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
用python实现批量重命名文件的代码
2012/05/25 Python
Python中apply函数的用法实例教程
2014/07/31 Python
如何在python中使用selenium的示例
2017/12/26 Python
python实现SOM算法
2018/02/23 Python
python安装scipy的方法步骤
2019/06/26 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
python如何实时获取tcpdump输出
2020/09/16 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
村委会贫困证明
2014/01/14 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
生日寿星公答谢词
2015/09/29 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
Oracle表空间与权限的深入讲解
2021/11/17 Oracle