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 设置后，将不会对该标签进行美化渲染，即保留系统风格

layui表单总结

layui表单总结

猜你喜欢