form结构：点击打开链接
在一个容器中设定 class="layui-form" 来标识一个表单元素块，并通过内置的 form模块 来完成各种渲染和交互。
依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）
<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">标签区域</label>
<div class="layui-input-block">
原始表单元素区域
</div>
</div>
...
<div>| 属性名 | 属性值 | 说明 |
|---|---|---|
| title | 任意字符 | 设定元素名称，一般用于checkbox、radio框 |
| lay-skin | switch（开关风格） primary（原始风格） | 定义元素的风格，目前只对 checkbox 元素有效，可将其转变为开关样式 |
| lay-ignore | 任意字符或不设值 | 是否忽略元素美化处理。设置后，将不会对该元素进行初始化渲染，即保留系统风格 |
| lay-filter | 任意字符 | 事件过滤器，主要用于事件的精确匹配，跟选择器是比较类似的。其实它并不私属于form模块，它在 layui 的很多基于事件的接口中都会应用到。 |
| lay-verify | required（必填项）phone（手机号）email（邮箱）url（网址）number（数字）date（日期）identity（身份证）自定义值 | 同时支持多条规则的验证，格式：lay-verify="验证A|验证B" 如：lay-verify="required|phone|number" 另外，除了我们内置的校验规则，你还可以给他设定任意的值，比如lay-verify="pass"，那么你就需要借助form.verify()方法对pass进行一个校验规则的定义。详见表单验证 |
| lay-verType | tips（吸附层）alert（对话框）msg（默认） | 用于定义异常提示层模式。注意：该功能为 layui 2.2.0 新增 |
| lay-submit | 无需填写值 | 绑定触发提交的元素，如button |
输入框：
required：注册浏览器所规定的必填字段
lay-verify：注册form模块需要验证的类型
class="layui-input"：layui.css提供的通用CSS类
<div class="layui-form-item">
<label class="layui-form-label">账号</label>
<div class="layui-input-inline">
<input type="text" name="account" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input"/>
</div>
</div>select下拉框：
属性selected可设定默认项
属性disabled开启禁用
正常模式：
<div class="layui-form-item">
<label class="layui-form-label">下拉框</label>
<div class="layui-input-inline">
<select name="city" lay-verify="required">
<option value=""></option>
<option value="1">杭州</option>
<option vlaue="2" disabled>上海</option> <!-- 禁止 -->
<option value="3">北京</option>
<option vlaue="4" selected>西安</option> <!-- 选中 -->
</select>
</div>
</div>分组模式：通过 optgroup 标签给select分组, label属性为分组名。
<div class="layui-form-item">
<label class="layui-form-label">下拉框</label>
<div class="layui-input-inline">
<select name="city" lay-verify="required">
<option value="">optgroup标签给select分组</option>
<optgroup label="南方城市">
<option value="1">杭州</option>
<option vlaue="2">上海</option>
</optgroup>
<optgroup label="北方城市">
<option value="3">北京</option>
<option vlaue="4">西安</option>
</optgroup>
</select>
</div>
</div>带搜索模式：设定属性 lay-search 来开启搜索匹配功能
<div class="layui-form-item">
<label class="layui-form-label">下拉框</label>
<div class="layui-input-inline">
<select name="city" lay-verify="required" lay-search>
<option value="">lay-search搜索</option>
<option value="1">杭州</option>
<option vlaue="2">上海</option>
<option value="3">北京</option>
<option vlaue="4">西安</option>
</select>
</div>
</div>复选框：
属性
title
可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
属性 checked 可设定默认选中
属性 lay-skin 可设置复选框的风格
设置 value="1" 可自定义值，否则选中时返回的就是默认的on
属性 checked 可设定默认选中
属性 lay-skin 可设置复选框的风格
设置 value="1" 可自定义值，否则选中时返回的就是默认的on
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作" lay-skin="primary" /> <!-- title的值会显示在复选框内 -->
<input type="checkbox" name="like[read]" title="阅读" checked/>
<input type="checkbox" name="like[dai]" title="发呆" disabled/>
</div>
</div>复选开关：
属性
checked
可设定默认开
属性 disabled 开启禁用
属性 lay-text 可自定义开关两种状态的文本
设置 value="1" 可自定义值，否则选中时返回的就是默认的on
属性 disabled 开启禁用
属性 lay-text 可自定义开关两种状态的文本
设置 value="1" 可自定义值，否则选中时返回的就是默认的on
<div class="layui-form-item">
<label class="layui-form-label">复选开关</label>
<div class="layui-input-block">
<input type="checkbox" name="switch" lay-skin="switch"/>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭" checked>
</div>
</div>单选框：
属性
title
可自定义文本
属性 disabled 开启禁用
设置 value="xxx" 可自定义值，否则选中时返回的就是默认的on
属性 disabled 开启禁用
设置 value="xxx" 可自定义值，否则选中时返回的就是默认的on
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男" checked/>
<input type="radio" name="sex" value="女 " title="女" >
<input type="radio" name="sex" value=" " title="其他" disabled>
</div>
</div>
文本域：
class="layui-textarea"：layui.css提供的通用CSS类
<div class="layui-form-item">
<label class="layui-form-label">文本域</label>
<div class="layui-input-inline">
<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>忽略美化元素：不推荐这样做
你可以对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格
表格方框格式：
通过追加 layui-form-pane 的class，来设定表单的方框风格。内部结构不变
<form class="layui-form layui-form-pane" action="">内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭），如：<div class="layui-form-item" pane><label class="layui-form-label">单选框</label><div class="layui-input-block"><input type="radio" name="sex" value="男" title="男"><input type="radio" name="sex" value="女" title="女" checked></div></div></form>
练习：
<div class="layui-contanier">
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<label class="layui-form-label">账号</label>
<div class="layui-input-inline">
<input type="text" name="account" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"/>
</div>
<div class="layui-form-mid layui-word-aux">辅助文字</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">下拉框</label>
<div class="layui-input-inline">
<select name="city" lay-verify="required">
<option value=""></option>
<option value="1">杭州</option>
<option vlaue="2" disabled>上海</option> <!-- 禁止 -->
<option value="3">北京</option>
<option vlaue="4" selected>西安</option> <!-- 选中 -->
</select>
</div>
<div class="layui-input-inline">
<select name="city" lay-verify="required">
<option value="">optgroup标签给select分组</option>
<optgroup label="南方城市">
<option value="1">杭州</option>
<option vlaue="2">上海</option>
</optgroup>
<optgroup label="北方城市">
<option value="3">北京</option>
<option vlaue="4">西安</option>
</optgroup>
</select>
</div>
<div class="layui-input-inline">
<select name="city" lay-verify="required" lay-search>
<option value="">lay-search搜索</option>
<option value="1">杭州</option>
<option vlaue="2">上海</option>
<option value="3">北京</option>
<option vlaue="4">西安</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作" lay-skin="primary" /> <!-- title的值会显示在复选框内 -->
<input type="checkbox" name="like[read]" title="阅读" checked/>
<input type="checkbox" name="like[dai]" title="发呆" disabled/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">复选开关</label>
<div class="layui-input-block">
<input type="checkbox" name="switch" lay-skin="switch"/>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭" checked>
</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男" checked/>
<input type="radio" name="sex" value="女 " title="女" >
<input type="radio" name="sex" value=" " title="其他" disabled>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">文本域</label>
<div class="layui-input-inline">
<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script> <!-- 可加自己的jquery -->
<script type="text/javascript" src="./plugins/layui/layui.js"></script>
<script type="text/javascript">
layui.use(['form','layer'],function(){
var form = layui.form;
var layer = layui.layer;
//监听提交按钮
form.on('submit(formDemo)',function(data){
layer.msg(JSON.stringify(data.field)); /* 表单json数据 */
return false;
});
})
</script>结果：
