表单的作用
提交form中的switch,radio,checkbox,input,slider,picker标签的value,提交一般使用button按钮标签。
如果你还不会使用这些标签的话,那么表单完全发挥不了任何作用。因此
重要参数
name 这个值不是设置在form上的,而是设置在form的组件上的,一定需要有
value 这个值是设置在form的组件上的,是最后提交的时候会提交的值,不一定需要有
bindsubmit 绑定提交事件
bindreset 绑定重置事件
当表单提交的时候,就会触发提交事件,然后,你就可以在提交事件中,完成你希望完成的动作。其中,你希望获得的值,存放于e.detail.value里面,保存的形式为{name: value}
简单使用
如何提交一个表单,wxml代码如下
<form bindsubmit="my_form">
<input name="username" type="text" placeholder="输入用户名" />
<input name="password" type="text" password placeholder="输入密码" />
<input name="password2" type="text" password placeholder="确认密码" />
<button form-type="submit">提交</button>
</form>
<view>{{ username }}</view>
<view>{{ password }}</view>
<view>{{ password2 }}</view>
js代码如下
Page({
data: {
username: "",
password: "",
password2: ""
},
onLoad: function (options) {
},
my_form(e){
this.setData({username: e.detail.value.username});
this.setData({password: e.detail.value.password});
this.setData({password2: e.detail.value.password2});
}
})
可以看出,如果之前的标签你已经熟练掌握了的话,那么使用form表单,应当是完全没有任何难度的。
在使用表单的时候,一定要记得给组件设置name属性,不然的话没办法通过e.detail.value获取到对应的值。
回到小程序快速文档-吴茗