初识layui表单 - PHP第11期作业

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。

二、配置Layui

1.到layui官方网站下载软件。
2.获得 layui 后，将其完整地部署到我们的项目目录（或静态资源服务器），只需要引入下述两个文件：

三、Layui表单示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
<title>曲剧艺术管理系统</title>
</head>
<body>

<div style="height:50px;line-height:50px;background:#000;padding:0px 10px;color:#fff"">
<span>曲剧艺术后台管理系统</span>
<div style="float:right;">
<span><i class="layui-icon layui-icon-username"></i>admin</span>
<span><a href="" style="color:#fff">退出</a></span>
</div>
</div>

<div style="float:left;">
<ul class="layui-nav layui-nav-tree" lay-filter="test" lay-accordion>

<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">文章管理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">戏剧要闻</a></dd>
<dd><a href="javascript:;">台前幕后</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">视频管理</a>
<dl class="layui-nav-child">
<dd><a href="">名段欣赏</a></dd>
<dd><a href="">完整剧目</a></dd>
<dd><a href="">梨园新秀</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">图片管理</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
</ul>
</div>
<div style="float:right;width:1000px;height:600px;">
<iframe style="width:100%;height:100%" frameborder="0" src="main.html" frameborder="0"></iframe>
</div>
</body>
</html>
<script>
//注意：折叠面板依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
});
</script>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">账号</label>
<div class="layui-input-inline">
<input type="text" name="title" 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">
<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="city" lay-filter="test">
<option value=""></option>
<option value="0">河南省</option>
<option value="1">河北省</option>
<option value="2">江苏省</option>
<option value="3">四川省</option>
<option value="4">浙江省</option>
</select>
</div>
<div name="city" class="layui-input-inline">
<select name="city" lay-verify="required">
<option value=""></option>
<option value="郑州市">郑州市</option>
<option value="洛阳市">洛阳市</option>
<option value="漯河市">漯河市</option>
<option value="平顶山市">平顶山市</option>
<option value="南阳市">南阳市</option>
</select>
</div>
<div name="city" class="layui-input-inline">
<select name="" id="">
<option value=""></option>
<option value="宛城区">宛城区</option>
<option value="卧龙区">卧龙区</option>
<option value="镇平县">镇平县</option>
<option value="南召县">南召县</option>
<option value="方城县">方城县</option>
<option value="社旗县">社旗县</option>
<option value="新野县">新野县</option>
<option value="桐柏县">桐柏县</option>
<option value="淅川县">淅川县</option>
<option value="西峡县">西峡县</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">爱好</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读" checked>
<input type="checkbox" name="like[dai]" title="旅游">
<input type="checkbox" name="like[dai]" title="健身">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" name="switch" lay-skin="switch" lay-text="ON|OFF" checked="">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">评论</label>
<div class="layui-input-inline">
<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<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>
</div>
</form>
<script>
layui.use(['form'], function(){
var form = layui.form;
$ = layui.jquery;
});
</script>
</body>
</html>

四、总结

layui大大减少了程序员的工作量，但是作为一个程序员，基础代码一定要掌握的足够好，再加上layui的帮助才能事半功倍。

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：前端框架很多, layui在国内用得人越来越多

一、什么是Layui

二、配置Layui

三、Layui表单示例

四、总结