提示:以下是本篇文章正文内容,下面案例可供参考
一、制作账号密码框
代码示例:
<view class="formme" wx:else>
<form bindsubmit="upme">
<view>账号</view>
<view>
<input type="text" placeholder="请输入账号" name="user" />
</view>
<view>密码</view>
<view>
<input type="password" placeholder="请输入密码" naem="pwd" />
</view>
<view>
<button type="primary" form-type="submit">账号登录</button>
</view>
</form>
</view>
二、进行代码美化
代码如下(示例):
.formme{
display: flex;
justify-content: center;
height: 700rpx;
align-items: center;
line-height: 100rpx;/*行间距 控制某个区域中行与行内人之间的距离*/
}
.formme input{
border: 2rpx solid green;
width: 480rpx;
height: 78rpx;
border-radius: 15rpx;
padding-left: 15rpx;/*使用padding时一定要与小面的box-sizing样式一起使用*/
box-sizing: border-box;
}
.formme button{
margin: 60rpx 0 0 40rpx;
}