微信小程序 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带下拉菜单和焦点图代码分享
Aug 24 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 Javascript
浅谈Sticky组件的改进实现
Mar 22 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
Node.js API详解之 Error模块用法实例分析
May 14 Javascript
jquery实现有过渡效果的tab切换
Jul 17 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
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
python逆向入门教程
2018/01/15 Python
python读取Excel表格文件的方法
2019/09/02 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
解决Python3下map函数的显示问题
2019/12/04 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
对python中return与yield的区别详解
2020/03/12 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
市场营销专科应届生求职信
2013/11/24 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
企业党员公开承诺书
2014/03/26 职场文书
诚信承诺书模板
2014/05/26 职场文书
故宫导游词
2015/01/31 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
Python echarts实现数据可视化实例详解
2022/03/03 Python
Python实现双向链表
2022/05/25 Python