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>
测试效果
表单测试.png
网友评论