### 表单
#### 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 class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<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 class="required">*</span>
```
代码如下：
```
<div class="layui-form-item">
<label class="layui-form-label"><span class="required">*</span>必填</label>
<div class="layui-input-block">
<input type="text" name="" required lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input ns-len-mid">
</div>
</div>
```
#### 添加解释说明
效果图：
关键代码（注释一）：
```
<span class="layui-word-aux">注释一</span>
```
代码如下（注释一）：
```
<!-- 注释一 -->
<div class="layui-form-item">
<label class="layui-form-label">注释一</label>
<div class="layui-input-block">
<input type="password" name="" placeholder="请输入" autocomplete="off" class="layui-input ns-len-mid">
<span class="layui-word-aux">注释一</span>
</div>
</div>
```
关键代码（注释二）：
```
<span class="layui-word-aux">注释二</span>
注意：摆放位置不同
```
代码如下（注释二）：
```
<!-- 注释方式二 -->
<div class="layui-form-item">
<label class="layui-form-label">注释二</label>
<div class="layui-input-block">
<input type="password" name="" placeholder="请输入" autocomplete="off" class="layui-input ns-len-mid">
</div>
<span class="layui-word-aux">注释二</span>
</div>
```
关键代码（注释三）：
```
<span class="layui-form-mid">注释三</span>
```
代码如下（注释三）：
```
<!-- 注释方式三 -->
<div class="layui-form-item">
<label class="layui-form-label">注释三</label>
<div class="layui-input-inline">
<input type="password" name="" placeholder="请输入" autocomplete="off" class="layui-input ns-len-mid">
</div>
<span class="layui-form-mid">注释三</span>
</div>
```
#### 复选框
效果图：
代码如下:
```
<!-- 复选框 -->
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" checkboxs lay-skin="primary" title="写作">
<input type="checkbox" name="like[read]" lay-skin="primary" title="阅读">
</div>
</div>
注意： checkboxs 表示选中
```
#### 单选按钮
效果图：
代码如下：
```
<!-- 单选框 -->
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="0" title="男">
<input type="radio" name="sex" value="1" title="女" checked>
</div>
</div>
注意：
checked 表示选中
```
#### 开关按钮
效果图：
代码如下：
```
<!-- 开关按钮 -->
<div class="layui-form-item">
<label class="layui-form-label">开关关</label>
<div class="layui-input-block">
<input type="checkbox" value="1" lay-skin="switch">
</div>
</div>
```
#### 表单展示
效果图：
代码如下：
```
<div class="layui-form-item">
<label class="layui-form-label">表单展示</label>
<div class="layui-input-block">
<p class="ns-input-text">2019-11-11 15:30:29</p>
</div>
</div>
```
#### 表单 - 按钮
效果图：
代码如下：
```
<div class="ns-form-row">
<button class="layui-btn ns-bg-color">保存</button>
<button type="reset" class="layui-btn layui-btn-primary">返回</button>
</div>
```
#### 一行多列
效果图：
代码如下：
```
<div class="layui-form-item">
<label class="layui-form-label">缩略大图（单位：px）</label>
<div class="layui-input-block">
<div class="layui-form-mid">宽</div>
<div class="layui-input-inline">
<input name="thumb_big_width" type="number" lay-verify="int" class="layui-input ns-len-small">
</div>
<div class="layui-form-mid">高</div>
<div class="layui-input-inline">
<input name="thumb_big_height" type="number" lay-verify="int" class="layui-input ns-len-small">
</div>
</div>
</div>
```
#### 手动触发select事件
layui没有封装手动触发select的事件，可以参考以下代码：
```
$("select[name='category']").siblings("div.layui-form-select").find("dl dd[lay-value='" + value + "']").click();
```
### 字段集区块
效果图：
代码如下：
```
<fieldset class="layui-elem-field">
<legend>标题</legend>
<div class="layui-field-box">内容区域</div>
</fieldset>
```
- 序言
- 商城简介
- 代码规范
- model层命名规范
- 前端（管理页面）命名
- 控制器命名规范
- 入门指导
- 伪静态配置
- 数据库配置
- 系统环境
- 系统框架
- 目录结构
- 数据库操作
- 标准代码(前端)
- 提示面板
- 表单
- 插件开发
- 插件目录
- 插件开发说明
- 事件开发
- 常用事件
- 数据字典
- 系统基础表
- 微信小程序相关
- 微信公众号相关
- 配送相关表
- 商品相关表
- 店铺网站设置相关
- 门店相关表
- 会员相关表
- 订单相关表
- 营销（组合套餐）
- 营销（砍价）
- 营销（优惠券）
- 营销（限时折扣）
- 营销（满额包邮）
- 营销（互动游戏）
- 营销（团购）
- 营销（满减送）
- 营销（拼团）
- 营销（秒杀）
- 营销（专题）
- 应用（分销）
- 应用（店铺笔记）
- 应用（小票打印）
- 应用（积分兑换）