表单 - 页面元素

在一个容器中设定 class=”layui-form” 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。

依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）

小睹为快

表单 form 元素集合 - 图1

通过上述的小小演示，你已经大致了解了一波 layui 的表单模块，你可能会觉得她还算不错，但并不太过瘾？譬如你希望看到日期选择、图片上传等等。然而你必须认识到，本篇文档核心介绍的是表单元素，对于日期、上传等更多丰富的元素，其实也是可以很方便地穿插在内的。

下述是【小睹为快】的HTML结构：

  1. <form class="layui-form" action="">
  2.   <div class="layui-form-item">
  3.     <label class="layui-form-label">输入框</label>
  4.     <div class="layui-input-block">
  5.       <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
  6.     </div>
  7.   </div>
  8.   <div class="layui-form-item">
  9.     <label class="layui-form-label">密码框</label>
  10.     <div class="layui-input-inline">
  11.       <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
  12.     </div>
  13.     <div class="layui-form-mid layui-word-aux">辅助文字</div>
  14.   </div>
  15.   <div class="layui-form-item">
  16.     <label class="layui-form-label">选择框</label>
  17.     <div class="layui-input-block">
  18.       <select name="city" lay-verify="required">
  19.         <option value=""></option>
  20.         <option value="0">北京</option>
  21.         <option value="1">上海</option>
  22.         <option value="2">广州</option>
  23.         <option value="3">深圳</option>
  24.         <option value="4">杭州</option>
  25.       </select>
  26.     </div>
  27.   </div>
  28.   <div class="layui-form-item">
  29.     <label class="layui-form-label">复选框</label>
  30.     <div class="layui-input-block">
  31.       <input type="checkbox" name="like[write]" title="写作">
  32.       <input type="checkbox" name="like[read]" title="阅读" checked>
  33.       <input type="checkbox" name="like[dai]" title="发呆">
  34.     </div>
  35.   </div>
  36.   <div class="layui-form-item">
  37.     <label class="layui-form-label">开关</label>
  38.     <div class="layui-input-block">
  39.       <input type="checkbox" name="switch" lay-skin="switch">
  40.     </div>
  41.   </div>
  42.   <div class="layui-form-item">
  43.     <label class="layui-form-label">单选框</label>
  44.     <div class="layui-input-block">
  45.       <input type="radio" name="sex" value="男" title="男">
  46.       <input type="radio" name="sex" value="女" title="女" checked>
  47.     </div>
  48.   </div>
  49.   <div class="layui-form-item layui-form-text">
  50.     <label class="layui-form-label">文本域</label>
  51.     <div class="layui-input-block">
  52.       <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
  53.     </div>
  54.   </div>
  55.   <div class="layui-form-item">
  56.     <div class="layui-input-block">
  57.       <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
  58.       <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  59.     </div>
  60.   </div>
  61. </form>
  62.  
  63. <script>
  64. //Demo
  65. layui.use('form', function(){
  66.   var form = layui.form;
  67.  
  68.   //监听提交
  69.   form.on('submit(formDemo)', function(data){
  70.     layer.msg(JSON.stringify(data.field));
  71.     return false;
  72.   });
  73. });
  74. </script>
  75.

UI的最终呈现得益于 Form模块 的全自动渲染，她将原本普通的诸如select、checkbox、radio等元素重置为你所看到的模样。或许你可以移步左侧导航的 内置模块 中的 表单 对其进行详细的了解。

而本篇介绍的是表单元素本身，譬如规定的区块、CSS类、原始控件等。他们共同组成了一个表单体系。

下述是基本的行区块结构，它提供了响应式的支持。但如果你不大喜欢，你可以换成你的结构，但必须要在外层容器中定义class=”layui-form”，form模块才能正常工作。

  1. <div class="layui-form-item">
  2.   <label class="layui-form-label">标签区域</label>
  3.   <div class="layui-input-block">
  4.     原始表单元素区域
  5.   </div>
  6. </div>
  7.

输入框

表单 form 元素集合 - 图2

  1. <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">    
  2.

required：注册浏览器所规定的必填字段
lay-verify：注册form模块需要验证的类型
class=”layui-input”：layui.css提供的通用CSS类

这些在下文都不再做重复介绍

下拉选择框

表单 form 元素集合 - 图3

  1. <select name="city" lay-verify="">
  2.   <option value="">请选择一个城市</option>
  3.   <option value="010">北京</option>
  4.   <option value="021">上海</option>
  5.   <option value="0571">杭州</option>
  6. </select>     
  7.

上述option的第一项主要是占个坑，让form模块预留“请选择”的提示空间，否则将会把第一项（存在value值）作为默认选中项。你可以在option的空值项中自定义文本，如：请选择分类。

你可以通过设定 selected 来设定默认选中项：

  1. <select name="city" lay-verify="">
  2.   <option value="010">北京</option>
  3.   <option value="021" disabled>上海（禁用效果）</option>
  4.   <option value="0571" selected>杭州</option>
  5. </select>     
  6.

你还可以通过 optgroup 标签给select分组：

  1. <select name="quiz">
  2.   <option value="">请选择</option>
  3.   <optgroup label="城市记忆">
  4.     <option value="你工作的第一个城市">你工作的第一个城市？</option>
  5.   </optgroup>
  6.   <optgroup label="学生时代">
  7.     <option value="你的工号">你的工号？</option>
  8.     <option value="你最喜欢的老师">你最喜欢的老师？</option>
  9.   </optgroup>
  10. </select>
  11.

以及通过设定属性 lay-search 来开启搜索匹配功能

  1. <select name="city" lay-verify="" lay-search>
  2.   <option value="010">layer</option>
  3.   <option value="021">form</option>
  4.   <option value="0571" selected>layim</option>
  5.   ……
  6. </select>     
  7.

属性selected可设定默认项
属性disabled开启禁用，select和option标签都支持

复选框

表单 form 元素集合 - 图4

  1. 默认风格：
  2. <input type="checkbox" name="" title="写作" checked>
  3. <input type="checkbox" name="" title="发呆"> 
  4. <input type="checkbox" name="" title="禁用" disabled> 
  5.  
  6. 原始风格：
  7. <input type="checkbox" name="" title="写作" lay-skin="primary" checked>
  8. <input type="checkbox" name="" title="发呆" lay-skin="primary"> 
  9. <input type="checkbox" name="" title="禁用" lay-skin="primary" disabled> 
  10.

属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
属性checked可设定默认选中
属性lay-skin可设置复选框的风格
设置value=”1”可自定义值，否则选中时返回的就是默认的on

开关

表单 form 元素集合 - 图5

其实就是checkbox复选框的“变种”，通过设定 lay-skin=”switch” 形成了开关风格

  1. <input type="checkbox" name="xxx" lay-skin="switch">
  2. <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
  3. <input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
  4. <input type="checkbox" name="aaa" lay-skin="switch" disabled>
  5.

属性checked可设定默认开
属性disabled开启禁用
属性lay-text可自定义开关两种状态的文本
设置value=”1”可自定义值，否则选中时返回的就是默认的on

单选框

表单 form 元素集合 - 图6

  1. <input type="radio" name="sex" value="nan" title="男">
  2. <input type="radio" name="sex" value="nv" title="女" checked>
  3. <input type="radio" name="sex" value="" title="中性" disabled>
  4.

属性title可自定义文本
属性disabled开启禁用
设置value=”xxx”可自定义值，否则选中时返回的就是默认的on

文本域

表单 form 元素集合 - 图7

  1. <textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
  2.

class=”layui-textarea”：layui.css提供的通用CSS类

组装行内表单

表单 form 元素集合 - 图8

  1. <div class="layui-form-item">
  2.  
  3.   <div class="layui-inline">
  4.     <label class="layui-form-label">范围</label>
  5.     <div class="layui-input-inline" style="width: 100px;">
  6.       <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
  7.     </div>
  8.     <div class="layui-form-mid">-</div>
  9.     <div class="layui-input-inline" style="width: 100px;">
  10.       <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
  11.     </div>
  12.   </div>
  13.  
  14.   <div class="layui-inline">
  15.     <label class="layui-form-label">密码</label>
  16.     <div class="layui-input-inline" style="width: 100px;">
  17.       <input type="password" name="" autocomplete="off" class="layui-input">
  18.     </div>
  19.   </div>
  20.  
  21. </div>
  22.

class=”layui-inline”：定义外层行内
class=”layui-input-inline”：定义内层行内

忽略美化渲染

你可以对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格，比如：

  1. <select lay-ignore>
  2.   <option>…</option>
  3. </select>
  4.

一般不推荐这样做。事实上form组件所提供的接口，对其渲染过的元素，足以应付几乎所有的业务需求。如果忽略渲染，可能会让UI风格不和谐

表单方框风格

表单 form 元素集合 - 图9

通过追加 layui-form-pane 的class，来设定表单的方框风格。内部结构不变。我们的Fly社区用的就是这个风格。

  1. <form class="layui-form layui-form-pane" action="">
  2.   内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭），如：
  3.   <div class="layui-form-item" pane>
  4.     <label class="layui-form-label">单选框</label>
  5.     <div class="layui-input-block">
  6.       <input type="radio" name="sex" value="男" title="男">
  7.       <input type="radio" name="sex" value="女" title="女" checked>
  8.     </div>
  9.   </div>
  10. </form>
  11.

结语

Layui版本稳定后，会抽空推出一个表单元素生成工具，这样似乎就更方便地组装你的表单了呀。

layui - 用心与你沟通