初识layui表单

一、什么是Layui

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

二、配置Layui

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

./layui/css/layui.css
./layui/layui.js

三、Layui表单示例

创建主页文件index.html：

<!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>
    <!-- header -->
    <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>
    <!-- left menu -->
    <div style="float:left;">
    <ul class="layui-nav layui-nav-tree" lay-filter="test" lay-accordion>
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
  <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>

创建表单文件main.html表单：

<!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 class="layui-form-mid layui-word-aux">辅助文字</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的帮助才能事半功倍。

一、什么是Layui

二、配置Layui

三、Layui表单示例

四、总结

相关文章