表单
依赖加载模块:form
-
在一个容器中设定 class=“layui-form” 来标识一个表单元素块
<form class="layui-form" action=""> </form>
-
基本的行区块结构,它提供了响应式的支持。可以换成其他结构,但必须要在外层容器中定义class=“layui-form”,form模块才能正常工作。
<div class="layui-form-item"> <label class="layui-form-label">标签区域</label> <div class="layui-input-block"> 原始表单元素区域 </div> </div>
输入框
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" />
-
required:注册浏览器所规定的必填字段
-
lay-verify:注册form模块需要验证的类型
-
class=“layui-input”:layui.css提供的通用CSS类
下拉选择框
<select name="city" lay-verify="">
<option value="">请选择一个城市</option>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="0571">杭州</option>
</select>
- 属性selected可设定默认项
- 属性disabled开启禁用,select和option标签都支持
<select name="city" lay-verify="">
<option value="010">北京</option>
<option value="021" disabled>上海(禁用效果)</option>
<option value="0571" selected>杭州</option>
</select>
- 可以通过 optgroup 标签给select分组
<select name="quiz">
<option value="">请选择</option>
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市?</option>
</optgroup>
<optgroup label="学生时代">
<option value="你的工号">你的工号?</option>
<option value="你最喜欢的老师">你最喜欢的老师?</option>
</optgroup>
</select>
- 通过设定属性 lay-search 来开启搜索匹配功能
<select name="city" lay-verify="" lay-search>
<option value="010">layer</option>
<option value="021">form</option>
<option value="0571" selected>layim</option>
</select>
复选框
<h2>默认风格:</h2>
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆">
<input type="checkbox" name="" title="禁用" disabled>
<h2>原始风格:</h2>
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary">
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
- 属性title可自定义文本(温馨提示:如果只想显示复选框,可以不用设置title)
- 属性checked可设定默认选中
- 属性lay-skin可设置复选框的风格 (原始风格:lay-skin=“primary”)
- 设置*value=“1”*可自定义值,否则选中时返回的就是默认的on
开关
将复选框checkbox,通过设定 lay-skin=“switch” 形成了开关风格
<input type="checkbox" name="xxx" lay-skin="switch">
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
<input type="checkbox" name="aaa" lay-skin="switch" disabled>
- 属性checked可设定默认开
- 属性disabled开启禁用
- 属性lay-text可自定义开关两种状态的文本 (两种文本用 “|” 隔开)
- 设置*value=“1”*可自定义值,否则选中时返回的就是默认的on
单选框
<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>
- 属性title可自定义文本
- 属性disabled开启禁用
- 设置*value=“xxx”*可自定义值,否则选中时返回的就是默认的on
文本域
<textarea name="remark" required lay-verify="requir