<form bindsubmit=formSubmit bindreset=formReset class=formstyle> </form>
2.picker
从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器。
3.label:用来改进表单组件的可用性,使用for
属性找到对应的id
,或者将控件放在该标签下,当点击时,就会触发对应的控件。for
优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。目前可以绑定的控件有:<button/>
, <checkBox/>
, <radio/>
, <switch/>
。
二.列子
index.wxml
<form bindsubmit=formSubmit bindreset=formReset> <view class=section> <view class=section__title>姓名:</view> <input name=name placeholder=请输入姓名 maxlength=12 type=text focus=false class=section__iput/> </view> <view class=section> <view class=section__title>密码:</view> <input placeholder=请输入您的密码 password=true maxlength=12 type=text focus=false class=section__iput/> </view> <view class=section section_gap> <view class=section__title>性别:</view> <radio-group name=radio-group> <label><radio value=radio1/>男</label> <label><radio value=radio2/>女</label> </radio-group> </view> <view class=section section_gap> <view class=section__title>兴趣:</view> <checkBox-group name=checkBox> <label><checkBox value=吃/>吃</label> <label><checkBox value=玩/>玩</label> </checkBox-group> </view> <view class=section> <view class=section__title>日期:</view> <picker mode=date value={{date}} start=2015-09-01 end=2017-09-01 bindchange=bindDateChange class=section__iput> <view class=picker> {{date}} </view> </picker> </view> <view class=section section_gap> <view class=section__title>开关</view> <switch name=switch/> </view> <view class=section> <view class=section__title>留言:</view> <textarea auto-height placeholder=请输入内容 /> </view> <view class=btn-area> <button formType=submit type=primary>Submit</button> <button formType=reset type=default>Reset</button> </view> </form>
2.index.wxss
.section{ margin:10px 20px; display:flex; border-bottom:1px solid #ccc; padding:15px 0; } .section__title{ width:30%; } .section__iput{ width:70%; line-height:25px; border:1px solid #ccc; } .btn-area{ display:flex; justify-content:center; margin:20px; } .btn-area button{ width:40%; }
3.index.js
var app = getApp() Page({ data: { date: '2016-09-01', }, //日期 bindDateChange: function(e) { this.setData({ date: e.detail.value }) }, //提交 formSubmit: function(e) { console.log('form发生了submit事件,携带数据为:', e.detail.value) }, //重置 formReset: function() { console.log('form发生了reset事件') } })
相关推荐:
为JQuery EasyUI 表单组件增加焦点切换功能实例分享
原文地址:https://www.jb51.cc/weapp/1202485.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。