您好,登錄后才能下訂單哦!
利用layui制作與眾不同的感謝表單,表格
layui極大的提高了前端開發(fā)效率,它極具個(gè)性的樣式等等都非常吸引人,接下來我將為大家展示如何利用Python的django框架與layui制作極富個(gè)性的表單與數(shù)據(jù)表格
注:忽略創(chuàng)建項(xiàng)目,配置文件,若這部分內(nèi)容不太明白,參考教你使用Django搭建一個(gè)基金模擬交易系統(tǒng),里面會(huì)教你從項(xiàng)目創(chuàng)建到最終運(yùn)行的完整流程。
第一步:在templates目錄下新建一個(gè)index.html文件(文件內(nèi)容根據(jù)自己的業(yè)務(wù)需求在layui官網(wǎng)復(fù)制即可),同時(shí)改變其布局只需將form標(biāo)簽放到一個(gè)自定義div內(nèi),若要更改其標(biāo)簽顏色只需將內(nèi)置的背景色CSS類添加到lable標(biāo)簽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>表單集合練習(xí)</legend> </fieldset> {# <form class="layui-form" action="">#} <form class="layui-form layui-form-pane" action="/get_mas/" method="post"> {# 方框風(fēng)格的表單集合 #} {% csrf_token %} <div class="layui-form-item"> <label class="layui-form-label layui-bg-red">標(biāo)題</label> <div class="layui-input-block"> <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="請(qǐng)輸入標(biāo)題" 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="請(qǐng)輸入用戶名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label layui-bg-orange">手機(jī)號(hào)碼</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; //自定義驗(yàn)證規(guī)則 form.verify({ title: function(value){ if(value.length < 5){ return '標(biāo)題至少得5個(gè)字符啊'; } } }); }); </script> </body> </html>
第二步:在templates目錄下新建一個(gè)table.html文件用于接收用戶提交數(shù)據(jù)
<!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>表格練習(xí)(用戶提交數(shù)據(jù))</legend> </fieldset> <table class="layui-table"> <colgroup> <col width="150"> <col width="200"> <col> </colgroup> <thead> <tr class="layui-bg-red"> <th>標(biāo)題</th> <th>用戶名</th> <th>手機(jī)號(hào)碼</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里定義如下函數(shù),index用于顯示首頁信息,get_mas用戶接收用戶提交同時(shí)返回?cái)?shù)據(jù)
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), ]
實(shí)現(xiàn)效果圖如下:
表單:
表格:
以上這篇Python django搭建layui提交表單,表格,圖標(biāo)的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。