「UI框架」Layui的页面元素之form表单基本介绍

前端框架Layui的页面元素form表单比较使用起来简单，通过在容器中设定class="layui-form"标识一个form表单元素块，通过layui内置的form模块可以完成各种交互，包括表单的各种验证，因此需要依赖加载内置的form模块，如果不加载form模块，select、checkbox、radio等元素无法正常显示，并且无法使用form相关交互功能。

关于layui框架相关文件的加载，移步《你家隔壁程序猿推荐一款优秀的模块化UI框架-Layui》查看，这里采用的是模块化加载方式。

使用form元素，加载form模块的方式如下：

<script>
layui.use('form', function(){
 var form = layui.form;
});
</script>

先看一个整体表单，代码如下：

上述代码效果如下：

是不是有点丑？那是因为我将form表单放在了一个设定了class="layui-main"的div中，整体宽度为1140px，而form元素最基本的行区块结构（下面有介绍）提供了响应式的支持。

为解决表单大小的问题，我预设了几个样式来规范input的大小，分别为：

.input-mini { width: 72px }
.input-small { width: 90px }
.input-medium { width: 150px }
.input-large { width: 210px }
.input-xlarge { width: 300px }
.input-xxlarge { width: 540px }

然后，我再上述表单中的layui-input后面追加了对应的input-{size}类名，组合成新的表单，感觉好多了，新样式如下：

行区块结构

现在介绍一下form表单的基本行区块结构：

<div class="layui-form-item">
 <label class="layui-form-label">标签区域</label>
 <div class="layui-input-block">
 <!--原始表单元素区域-->
 <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
 </div>
</div>

当然，你可以修改这个行区块结构，或者完全抛弃这个结构，用自己的结构。其中，required注册浏览器所规定的必填字段，与平常的HTML表单没区别；lay-verify注册form模块需要验证的类型，form模块验证需要用到；class="layui-input"是layui.css提供的通用CSS类。

比如，当我设置手机号码为必填项时，不写的情况下提交表单会有对应的弹窗提示，实际效果如下：

下拉选择框

layui表单的基本下拉选择框已经在上述案例中展示了，不多说了，与常规的select元素没啥区别，有区别的是通过给select设定lay-search属性可以开启搜索匹配功能。

代码如下：

<select name="city" lay-verify="required" lay-search>
<option value=""></option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
<option value="5">郑州</option>
</select>

开关按钮

layui提供了开关表单元素，本质上是CheckBox复选框的变种，通过设定 lay-skin="switch" 形成开关风格，

<input type="checkbox" name="kaiguan" lay-skin="switch" lay-text="ON|OFF" checked>

通过属性lay-text自定义开关两种状态的文本，设置value=""自定义值，不设置的话，选中时返回默认的on。

其他表单元素，比如单选、复选框等与常规的一样。

忽略美化渲染

如果不喜欢layui的ui，layui还提供了lay-ignore属性，禁止layui对标签进行美化渲染。使用比较简单，比如：

<select name="city" lay-verify="required" lay-search lay-ignore>
<option value=""></option>
</select>

设置后，表单会保留原有系统风格，不过layui提供相应的接口和交互也会失效，这个例子中不能搜索了。

layui组装行内表单

layui的行内表单其实是改变了原有的表单元素区块接口，比较简单，比如价格范围表单：

好了，这就是layui表单form的基本介绍，下次将推layui页面元素之导航模块。