表单搭建，是商城系统触发按钮的重要模块之一，有工整详细的表单，不仅能让页面更加美观大气，还可以让后台代码更加规整与规范，方便及时查漏或者商家再次二开！
表单label宽度
layui-form-label 155px
layui-form-label sm 100px
input宽度
input框 最短（100px）: ns-len-small
input框 短（160px）: ns-len-short
input框 中（250px）: ns-len-mid
input框 长（500px）: ns-len-long
输入框
效果图：
代码如下：
<div>
<label>输入框</label>
<div>
<input type="text" name="" placeholder="请输入内容" autocomplete="off" class="layui-input ns-len-mid">
</div>
</div>
类型：
1、文字输入框 type="text"
2、数字输入框 type="number"
3、密码输入框 type="password"
注意：
required：注册浏览器所规定的必填字段
lay-verify：注册form模块需要验证的类型
class="layui-input"：layui.css提供的input样式
添加必输项标识
效果图：
关键代码：
<span>*</span>
代码如下：
<div>
<label><span>*</span>必填</label>
<div>
<input type="text" name="" required lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input ns-len-mid">
</div>
</div>
添加解释说明
效果图：
关键代码（注释一）：
<span>注释一</span>
代码如下（注释一）：
<!-- 注释一 -->
<div>
<label>注释一</label>
<div>
<input type="password" name="" placeholder="请输入" autocomplete="off" class="layui-input ns-len-mid">
<span>注释一</span>
</div>
</div>
关键代码（注释二）：
<span>注释二</span>
注意：摆放位置不同
代码如下（注释二）：
<!-- 注释方式二 -->
<div>
<label>注释二</label>
<div>
<input type="password" name="" placeholder="请输入" autocomplete="off" class="layui-input ns-len-mid">
</div>
<span>注释二</span>
</div>
关键代码（注释三）：
<span>注释三</span>
代码如下（注释三）：
<!-- 注释方式三 -->
<div>
<label>注释三</label>
<div>
<input type="password" name="" placeholder="请输入" autocomplete="off" class="layui-input ns-len-mid">
</div>
<span>注释三</span>
</div>
复选框
效果图：
代码如下:
<!-- 复选框 -->
<div>
<label>复选框</label>
<div>
<input type="checkbox" name="like[write]" checkboxs lay-skin="primary" title="写作">
<input type="checkbox" name="like[read]" lay-skin="primary" title="阅读">
</div>
</div>
注意： checkboxs 表示选中
下一期阿牛ger将于大家分享关于表单开源、按钮、字段等代码添加，关注我呦！
网友评论