利用layui制作与众不同的感谢表单,表格
layui极大的提高了前端开发效率,它极具个性的样式等等都非常吸引人,接下来我将为大家展示如何利用Python的django框架与layui制作极富个性的表单与数据表格
注:忽略创建项目,配置文件,若这部分内容不太明白,参考教你使用Django搭建一个基金模拟交易系统,里面会教你从项目创建到最终运行的完整流程。
第一步:在templates目录下新建一个index.html文件(文件内容根据自己的业务需求在layui官网复制即可),同时改变其布局只需将form标签放到一个自定义div内,若要更改其标签颜色只需将内置的背景色CSS类添加到lable标签class即可,如:
<label class="layui-form-label layui-bg-orange">
赤色:class=”layui-bg-red”
橙色:class=”layui-bg-orange”
墨绿:class=”layui-bg-green”
藏青:class=”layui-bg-cyan”
雅黑:class=”layui-bg-black”
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="../static/layui/css/layui.css" rel="external nofollow" rel="external nofollow" media="all"> </head> <body> <div > <fieldset class="layui-elem-field layui-field-title" > <legend>表单集合练习</legend> </fieldset> {# <form class="layui-form" action="">#} <form class="layui-form layui-form-pane" action="/get_mas/" method="post"> {# 方框风格的表单集合 #} {% csrf_token %} <div class="layui-form-item"> <label class="layui-form-label layui-bg-red">标题</label> <div class="layui-input-block"> <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label layui-bg-blue">用户名</label> <div class="layui-input-block"> <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label layui-bg-orange">手机号码</label> <div class="layui-input-inline"> <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label layui-bg-orange">邮箱地址</label> <div class="layui-input-inline"> <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input"> </div> </div> </div> <div class="layui-form-item" align="center"> <div class="layui-input-block"> <button class="layui-btn layui-btn-normal layui-btn-radius" lay-submit="" lay-filter="demo1">立即提交</button> <button type="reset" class="layui-btn layui-btn-danger layui-btn-radius">重置</button> </div> </div> </form> </div> <script src="../static/layui/layui.js" charset="utf-8"></script> <script> layui.use('form', function(){ var form = layui.form; //自定义验证规则 form.verify({ title: function(value){ if(value.length < 5){ return '标题至少得5个字符啊'; } } }); }); </script> </body> </html>
第二步:在templates目录下新建一个table.html文件用于接收用户提交数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="../static/layui/css/layui.css" rel="external nofollow" rel="external nofollow" media="all"> </head> <body> <div > <fieldset class="layui-elem-field layui-field-title" > <legend>表格练习(用户提交数据)</legend> </fieldset> <table class="layui-table"> <colgroup> <col width="150"> <col width="200"> <col> </colgroup> <thead> <tr class="layui-bg-red"> <th>标题</th> <th>用户名</th> <th>手机号码</th> <th>邮箱地址</th> </tr> </thead> <tbody> <tr> <td>{{ title }}</td> <td>{{ username }}</td> <td>{{ phone }}</td> <td>{{ email }}</td> </tr> </tbody> </table> </div> <script src="../static/layui/layui.js" charset="utf-8"></script> </body> </html>
第三步:在views里定义如下函数,index用于显示首页信息,get_mas用户接收用户提交同时返回数据
from django.shortcuts import render from django.http import HttpResponse def index(request): return render(request, 'index.html') def get_mas(request): if request.method == "POST": title = request.POST['title'] username = request.POST['username'] phone = request.POST['phone'] email = request.POST['email'] return render(request, 'table.html', {'title': title, 'username': username, 'phone': phone, 'email': email}) else: return HttpResponse('<center><h2>非法操作!</h2></center>')
第四步:定义路由
from django.contrib import admin from django.urls import path from django.conf.urls import url from web import views urlpatterns = [ path('admin/', admin.site.urls), url(r'^$', views.index), url(r'^get_mas/$', views.get_mas), ]
实现效果图如下:
表单:
表格:
以上这篇Python django搭建layui提交表单,表格,图标的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持亿速云。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。