溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
利用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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
