【快速文档】form标签，在小程序中添加一个表单

表单的作用

提交form中的switch，radio，checkbox，input，slider，picker标签的value，提交一般使用button按钮标签。

如果你还不会使用这些标签的话，那么表单完全发挥不了任何作用。因此

学习使用switch标签看这里

学习使用radio标签看这里

学习使用checkbox标签看这里

学习使用input标签看这里

学习使用slider标签看这里

学习使用picker标签看这里

学习使用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获取到对应的值。

回到小程序快速文档-吴茗​​​​​​​