search

博客列表 >初识layui表单

初识layui表单

蔚蓝世纪
蔚蓝世纪原创
2020年06月04日 17:25:06860浏览

一、什么是Layui

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

二、配置Layui

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

  1. ./layui/css/layui.css
  2. ./layui/layui.js

三、Layui表单示例

创建主页文件index.html：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
  6.     <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
  7.     <script type="text/javascript" src="layui/layui.js"></script>
  8.     <title>曲剧艺术管理系统</title>
  9. </head>
  10. <body>
  11.     <!-- header -->
  12.     <div style="height:50px;line-height:50px;background:#000;padding:0px 10px;color:#fff"">
  13.         <span>曲剧艺术后台管理系统</span>        
  14.         <div style="float:right;">
  15.         <span><i class="layui-icon layui-icon-username"></i>admin</span>
  16.         <span><a href="" style="color:#fff">退出</a></span>
  17.         </div>
  18.     </div>
  19.     <!-- left menu -->
  20.     <div style="float:left;">
  21.     <ul class="layui-nav layui-nav-tree" lay-filter="test" lay-accordion>
  22. <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
  23.   <li class="layui-nav-item layui-nav-itemed">
  24.     <a href="javascript:;">文章管理</a>
  25.     <dl class="layui-nav-child">
  26.       <dd><a href="javascript:;">戏剧要闻</a></dd>
  27.       <dd><a href="javascript:;">台前幕后</a></dd>      
  28.     </dl>
  29.   </li>
  30.   <li class="layui-nav-item">
  31.     <a href="javascript:;">视频管理</a>
  32.     <dl class="layui-nav-child">
  33.       <dd><a href="">名段欣赏</a></dd>
  34.       <dd><a href="">完整剧目</a></dd>
  35.       <dd><a href="">梨园新秀</a></dd>
  36.     </dl>
  37.   </li>
  38.   <li class="layui-nav-item"><a href="">图片管理</a></li>
  39.   <li class="layui-nav-item"><a href="">大数据</a></li>
  40. </ul>
  41. </div>
  42. <div style="float:right;width:1000px;height:600px;">
  43. <iframe style="width:100%;height:100%" frameborder="0" src="main.html" frameborder="0"></iframe>    
  44. </div>
  45. </body>
  46. </html>
  47. <script>
  48. //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
  49. layui.use('element', function(){
  50.   var element = layui.element;
  51. });
  52. </script>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.   <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
  7.   <script type="text/javascript" src="layui/layui.js"></script>
  8. </head>
  9. <body>
  10.   <form class="layui-form" action="">
  11.   <div class="layui-form-item">
  12.     <label class="layui-form-label">账号</label>
  13.     <div class="layui-input-inline">
  14.       <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
  15.     </div>
  16.   </div>
  17.   <div class="layui-form-item">
  18.     <label class="layui-form-label">密码</label>
  19.     <div class="layui-input-inline">
  20.       <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
  21.     </div>
  22.     <!-- <div class="layui-form-mid layui-word-aux">辅助文字</div> -->
  23.   </div>
  24.   <div class="layui-form-item">
  25.     <label class="layui-form-label">城市</label>
  26.     <div class="layui-input-inline">
  27.       <select name="city" lay-filter="test">
  28.         <option value=""></option>
  29.         <option value="0">河南省</option>
  30.         <option value="1">河北省</option>
  31.         <option value="2">江苏省</option>
  32.         <option value="3">四川省</option>
  33.         <option value="4">浙江省</option>  
  34.       </select>
  35.       </div>
  36.       <div name="city" class="layui-input-inline">
  37.         <select name="city" lay-verify="required">
  38.         <option value=""></option>
  39.         <option value="郑州市">郑州市</option>
  40.         <option value="洛阳市">洛阳市</option>
  41.         <option value="漯河市">漯河市</option>
  42.         <option value="平顶山市">平顶山市</option>
  43.         <option value="南阳市">南阳市</option>
  44.       </select>
  45.       </div>
  46.       <div name="city" class="layui-input-inline">
  47.      <select name="" id="">
  48.      <option value=""></option>        
  49.      <option value="宛城区">宛城区</option> 
  50.      <option value="卧龙区">卧龙区</option> 
  51.      <option value="镇平县">镇平县</option>        
  52.      <option value="南召县">南召县</option>        
  53.      <option value="方城县">方城县</option>        
  54.      <option value="社旗县">社旗县</option>        
  55.      <option value="新野县">新野县</option>        
  56.      <option value="桐柏县">桐柏县</option>  
  57.      <option value="淅川县">淅川县</option>  
  58.      <option value="西峡县">西峡县</option>  
  59.       </select>
  60.       </div>       
  61.   </div>
  62.   <div class="layui-form-item">
  63.     <label class="layui-form-label">爱好</label>
  64.     <div class="layui-input-block">
  65.       <input type="checkbox" name="like[write]" title="写作">
  66.       <input type="checkbox" name="like[read]" title="阅读" checked>
  67.       <input type="checkbox" name="like[dai]" title="旅游">
  68.       <input type="checkbox" name="like[dai]" title="健身">
  69.     </div>
  70.   </div>
  71.   <div class="layui-form-item">
  72.     <label class="layui-form-label">开关</label>
  73.     <div class="layui-input-block">
  74.       <input type="checkbox" name="switch" lay-skin="switch" lay-text="ON|OFF" checked="">
  75.     </div>
  76.   </div>
  77.   <div class="layui-form-item">
  78.     <label class="layui-form-label">性别</label>
  79.     <div class="layui-input-block">
  80.       <input type="radio" name="sex" value="男" title="男">
  81.       <input type="radio" name="sex" value="女" title="女" checked>
  82.     </div>
  83.   </div>
  84.   <div class="layui-form-item layui-form-text">
  85.     <label class="layui-form-label">评论</label>
  86.     <div class="layui-input-inline">
  87.       <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
  88.     </div>
  89.   </div>
  90.   <div class="layui-form-item">
  91.     <div class="layui-input-block">
  92.       <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
  93.       <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  94.     </div>
  95.   </div>
  96. </form>
  97. <script>
  98. layui.use(['form'], function(){
  99.    var form = layui.form;
  100.   $ = layui.jquery;
  101. });
  102. </script>
  103. </body>
  104. </html>

输出效果预览：

四、总结

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

上一条：laravel框架的基本用法，新建控制器，新建路由，渲染视图，数据库的增删改查下一条：Dom元素、classList对象、dataset对象、点击事件添加
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多