1、使用

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

加载模块

本例中需加载form模块，如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能。以数组方式加载模块，单模块时可省略[ ]。
<script>
          layui.use('form', function(){  
          //需要几个模块的时候，以数组形式写use(['模块一','模块二',......],function(){ } )
              var form = layui.form;   //模块声明
          });
</script>
使用方法

对<form></form>添加class="layui-form"即可
<form class="layui-form">内容（text、button等等）</form>

常用元素

标签 <label></label>

<label class="layui-form-label">输入框</label>

文本框<input type="text" ></input>
<input type="text" name="title" required  lay-verify="required|phone" placeholder="请输入标题" autocomplete="off" class="layui-input">
（1） required ：规定必需在提交之前填写输入字段。
（2） lay-verify：是表单验证的关键字 ,格式：lay-verify=”验证A|验证B...”。
(required (必填项)、phone（手机号）、email（邮箱）、url（网址）、number（数字）、date（日期）、identity(身份证)自定义值)
（3） placeholder：在输入前提供可描述输入字段预期值的提示信息。
（4）autocomplete：规范表单是否启用自动完成功能。

密码框 <input type="password"></input>
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
下拉框 <select></select>
<select name="admin" lay-verify="required">
                  <option value=""></option>
                  <option value="0">admin1</option>
                  <option value="1">admin2</option>
                  <option value="2">admin3</option>
                  <option value="3">admin4</option>          
</select>
复选框 <input type="checkbox"></input>

<input type="checkbox" name="记住密码" title="记住密码">

单选框 <input type="radio"></input>

<input type="radio" name="sex" value="女" title="女" checked>
checked表示默认选中。

开关 <input type="checkbox" ></input>

<input type="checkbox" name="switch" lay-skin="switch">

文本域 <textarea></textarea>

<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>

按钮 <button></button>
<button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
lay-submit ：作为提交按钮的标识。
lay-filter="formDemo"：（lay-filter="标识" ）这个是layui特有的事件过滤器，个人感觉就是选择器一样。
type="reset": 表示这个按钮具有重置功能。

测试效果
测试效果.png
常用的类

观察上面的测试效果，发现各元素的排版，十分不美观，这就需要我们添加几个带有特殊类的div来修饰排版。

class="layui-form-item"(class="layui-元素名-item")
单独使用这个类会默认该元素独占一行

class="layui-input-inline"(class="layui-元素名-inline")
允许多个表单控件占一行，横着，一行可以放置多个表单元素

class="layui-input-block"(class="layui-元素名-block")
一个表单元素占一行，竖着，以例表的形式排列。

2、实现登陆表单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery.min.js" ></script>
        <script type="text/javascript" src="layui/layui.js" ></script>
        <link rel="stylesheet" href="layui/css/layui.css" />
        <script>
            //Demo
            layui.use(['form'], function(){  
            //需要几个模块的时候，以数组形式写use(['模块一','模块二',......],function(){ } )
                var form = layui.form;   //模块声明
            });
        </script>
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">学   号</label>
                <div class="layui-input-inline">
                  <input type="text" name="title"   lay-verify="number"  placeholder="请输入学号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密   码</label>
                <div class="layui-input-inline">
                  <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用   户</label>
                <div class="layui-input-inline">
                  <select name="admin" lay-verify="required">
                        <option value=""></option>
                        <option value="0">admin1</option>
                        <option value="1">admin2</option>
                        <option value="2">admin3</option>
                        <option value="3">admin4</option>          
                    </select>
                </div>    
            </div>
            <div class="layui-input-block">
                  <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
    </head>
    <body>
    </body>
</html>