基於Django的form模塊,快速的搭建註冊頁面,每個限制條件,都放在form模塊裡面,不單獨對每一項編寫標簽,使用模版的 for 迴圈來渲染。 首先設置form模塊 在blogs模塊下創建一個blogs_form.py文件 註意一點,需要引用django模塊下的forms模塊,還有widgets ...
基於Django的form模塊,快速的搭建註冊頁面,每個限制條件,都放在form模塊裡面,不單獨對每一項編寫標簽,使用模版的 for 迴圈來渲染。
- 首先設置form模塊
在blogs模塊下創建一個blogs_form.py文件
註意一點,需要引用django模塊下的forms模塊,還有widgets模塊,widget是設置input的類型,比如TextInput文本框,PasswordInput密碼框,EmailInput郵箱框等等,這些好處就不用對其做判斷,是否符合郵箱的匹配條件,forms模塊就幫忙做了。
attrs:添加input的屬性和屬性值,key-value 形式,我想在class添加form-control(Bootstrap的樣式),使用 attrs={"class","form-control"}
1 from django import forms 2 from django.forms import widgets 3 4 class UserForm(forms.Form): 5 user = forms.CharField(max_length=32, 6 label="用戶名", 7 widget=widgets.TextInput(attrs={"class": "form-control"})) 8 pwd = forms.CharField(max_length=32, 9 label="密碼", 10 widget=widgets.PasswordInput(attrs={"class": "form-control"})) 11 re_pwd = forms.CharField(max_length=32, 12 label="確認密碼", 13 widget=widgets.PasswordInput(attrs={"class": "form-control"})) 14 email = forms.EmailField(max_length=32, 15 label="郵箱", 16 widget=widgets.EmailInput(attrs={"class": "form-control"}))
- view視圖添加註冊
創建forms對象,直接返回。
記得引入剛剛寫的UserForm到view中。
from .blog_form import UserForm def register(request): form = UserForm() return render(request, "register.html", locals())
- urls路由中添加路徑
添加路徑,將url路徑和view中的register函數,關聯起來。
path("register/", views.register)
- 重頭戲,寫register.html
首先,使用Bootstrap將佈局搭建好,把<form>標簽中的位置空出來
記得在form標簽中,寫 csrf_token 解決跨站問題
迴圈 UserForm對象, 每次拿到一個filed對象
filed.name:對象的label名
filed.label:對象的label
filed: input標簽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> <script src="/static/js/jquery-3.4.1.js" type="text/javascript"></script> <style type="text/css"> </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6 col-lg-offset-3"> <h3>註冊頁面</h3> <form> {% csrf_token %} {% for filed in form %} <div class="form-group"> <label for="id_{{ filed.name }}">{{ filed.label }}</label> {{ filed }} </div> {% endfor %} </form> </div> </div> </div> <script type="text/javascript"> </script> </body> </html>