表单弹出设计

原创 2018-12-17 16:06:10 243
摘要:layui表单弹出设计,可以在后台直接打开弹出窗口,减少页面的切换,方便管理。<!DOCTYPE html> <html> <head>     <meta charset="UTF-8" />     <title

layui表单弹出设计,可以在后台直接打开弹出窗口,减少页面的切换,方便管理。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>layui作业</title>
    <link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
    <script type="text/javascript" src="../layui/layui.js"></script>
</head>
<form class="layui-form" action="" style="padding:10px;">
  <div class="layui-form-item">
    <label class="layui-form-label">用 户 名</label>
    <div class="layui-input-inline">
      <input type="text" name="username" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">真实姓名</label>
    <div class="layui-input-inline">
      <input type="text" name="realname" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">权限分配</label>
      <div class="layui-input-inline">
        <select name="rightset">
        <option value=""></option>
        <option value="0">超级管理员</option>
        <option value="1">栏目管理员</option>
        <option value="2">用户管理员</option>
      </select>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">验证邮箱</label>
      <div class="layui-input-inline">
        <input type="text" name="email" class="layui-input">
      </div>
    </div>
  </div>
  <button class="layui-btn" style="margin-left:40px;">
    <i class="layui-icon">&#xe608;</i> 添加
  </button>
</form>
<script>
//form表单核心js
layui.use('form', function(){
  var form = layui.form;
});
</script>
</body>
</html>

TIM图片20181217160317.png

批改老师:韦小宝批改时间:2018-12-17 16:30:33
老师总结:写的很不错!layui弹出层还是比较有代表性的!课后记得多练习才可以哦!

发布手记

热门词条