layui弹出层+form表单实现添加商品静态页

原创 2019-03-09 16:37:36 600
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>添加商品</title> <link rel="stylesheet" href="layui/css/layu
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加商品</title>
<link rel="stylesheet" href="layui/css/layui.css">
<style>
.content{width: 500px;}
.content h3{margin: 0px 0px 20px 50px;border-bottom: 1px solid #ccc;line-height: 35px;}
</style>
</head>
<body>
<div>
<h3>添加商品</h3>
<form action="" lay-filter="example">
  <div>
    <label>商品名</label>
    <div>
      <input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入标题">
    </div>
  </div>

  <div>
    <label>价格</label>
    <div>
      <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off">
    </div>
  </div>
  <div>
    <label>类别</label>
    <div>
      <select name="interest" lay-filter="aihao">
        <option value=""></option>
        <option value="0">写作</option>
        <option value="1" selected="">阅读</option>
        <option value="2">游戏</option>
        <option value="3">音乐</option>
        <option value="4">旅行</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label>商品详情</label>
    <div>
      <textarea placeholder="请输入内容"></textarea>
    </div>
  </div>
  <div>
    <div>
      <button lay-submit="" lay-filter="demo1">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
</div>
</body>
<script src="statics/js/jq_3.3.1_mi.js"></script>
<script src="layui/layui.all.js"></script>
<script>
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer

  //表单初始赋值
  form.val('example', {
    ,"interest": 1
  })
  
  
});
</script>
</html>

显示效果如下:

QQ截图20190309163504.jpg

批改老师:韦小宝批改时间:2019-03-09 16:52:47
老师总结:写的很不错 layui实现这些功能都是轻轻松松的

发布手记

热门词条