基於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>
