微信小程序 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 相关文章推荐
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 Javascript
JavaScript 格式字符串的应用
Mar 29 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
JS 实现点击a标签的时候让其背景更换
Oct 15 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
ElementUI radio组件选中小改造
Aug 12 Javascript
微信小程序调用后台service教程详解
Nov 06 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
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
php中namespace及use用法分析
2016/12/06 PHP
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
js单例模式的两种方案
2013/10/22 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
python简单读取大文件的方法
2016/07/01 Python
Python中int()函数的用法浅析
2017/10/17 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
浅谈pytorch中的BN层的注意事项
2020/06/23 Python
Python自动创建Excel并获取内容
2020/09/16 Python
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
给排水工程师岗位职责
2013/11/21 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
银行奉献演讲稿
2014/09/16 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
健康状况证明模板
2014/10/23 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang