学习网站:form | 微信开放文档
一、表单的基本使用
1、登录
①、定义出登录
②、页面构造
<view> <image src="/pages/asset/aa.jpeg"></image> </view> <view class="a"> <form bindsubmit="dl" bind:reset="qk"> <label>用户账号</label> <input value="{{user.username}}" bind:input="bindName" type="text" placeholder="请输入账号" maxlength="10"></input> <view><label>{{user.username}}</label></view> <label>用户密码</label> <input value="{{user.password}}" bind:input="bindPwd" type="text" password="true" placeholder="请输入密码" maxlength="10"></input> <view> <button form-type="submit" type="primary">登录</button> <button form-type="reset">清空</button> </view> </form> </view>
②、js编写
Page({ data: { user:{ username:"", password:"" } }, bindName(e){ //arguments就是函数的参数 // console.log(arguments) console.log(e.detail.value) //双向绑定设值 this.setData({ "user.username":e.detail.value }) }, bindPwd(e){ this.setData({ "user.password":e.detail.value }) }, dl(){ //登录者信息:this.data.user wx.showToast({ title:"登录成功", icon:"success" }) }, qk(){ this.data.user.username="", this.data.user.password="" } });
③、css编写
image{ width: 370px; height: 370px; border-radius: 50%; text-align: center; } .a{ text-align: center; }
⑤、页面展示
2、注册
①、页面构造
<view>
<form bindsubmit="zc">
<label>账号</label>
<input type="text" placeholder="请输入账号" maxlength="10"></input>
<label>密码</label>
<input type="text" placeholder="请输入密码" maxlength="10"></input>
<label>性别</label>
<radio-group>
<radio checked="false" value="男">♂</radio>
<radio value="女">♀</radio>
</radio-group>
<label>爱好</label>
<checkbox-group>
<checkbox checked="false">吃</checkbox>
<checkbox>喝</checkbox>
<checkbox>玩</checkbox>
</checkbox-group>
<picker-view style="height:150px">
<picker-view-column>
<view>湖南省</view>
<view>湖北省</view>
<view>重庆省</view>
</picker-view-column>
<picker-view-column>
<view>长沙</view>
<view>益阳</view>
<view>邵阳</view>
</picker-view-column>
</picker-view>
<view>
<label>满意度:{{myd[0]}}</label>
<slider max="4" min="0"></slider>
</view>
<view>
<button form-type="submit" type="primary">注册</button>
<navigator url="/pages/index/index" open-type="navigate"><button>返回</button></navigator>
</view>
</form>
</view>
②、js编写
// pages/register/register.js Page({ mm:{ m:"" }, /** * 页面的初始数据 */ data: { myd:["⭐","⭐⭐","⭐⭐⭐","⭐⭐⭐⭐","⭐⭐⭐⭐"] }, zc(){ //登录者信息:this.data.user wx.showToast({ title:"注册成功", icon:"success" }) } })
③、页面展示