layui表单总结
表单form在layui里的类名是:layui-form;控件使用的类名是layui-form-item;lebal说明框的类名:layui-form-label
容器是行内还是块级类名:layui-input-block 或者layui-input-inline
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
//。。。。。
</div>
</div>
</form>
1 输入框
layui.code
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
required:注册浏览器所规定的必填字段
class="layui-input":layui.css提供的通用CSS类
lay-verify:注册form模块需要验证的类型 值包括以下:
required(必填项) phone(手机号) email(邮箱) url(网址) number(数字) date(日期) identity(身份证)
同时支持多条规则的验证,格式:lay-verify=”验证A|验证B”
如:lay-verify=”required|phone|number”
2 :下拉选项框
你还可以通过 optgroup 标签给select分组;以及通过设定属性 lay-search 来开启搜索匹配功能:
<select name="quiz" lay-search>
<option value="">请选择</option>
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市?</option>
</optgroup>
<optgroup label="学生时代">
<option value="你的工号">你的工号?</option>
<option value="你最喜欢的老师">你最喜欢的老师?</option>
</optgroup>
</select>
3 复选框
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary">
<input type="checkbox" name="" title="禁用" disabled>
属性title可自定义文本(温馨提示:如果只想显示复选框,可以不用设置title)
属性checked可设定默认选中
属性lay-skin可设置复选框的风格
设置value="1"可自定义值,否则选中时返回的就是默认的on
4 开关
<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
5 单选框
<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
6 文本域
类名 class="layui-textarea"
<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
7 内层行内与外层行内
<div class="layui-inline">
<label class="layui-form-label">范围</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_min" placeholder="¥" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_max" placeholder="¥" autocomplete="off" class="layui-input">
</div>
</div>
class="layui-inline":定义外层行内
class="layui-input-inline":定义内层行内
PS:对表单元素增加属性 lay-ignore 设置后,将不会对该标签进行美化渲染,即保留系统风格