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

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 初识layui表单

博主信息

博文 43

粉丝 1

访问量 43184

专题推荐

更多>

一、什么是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>