---
title: [Django] - 捌、表單
tags: webdevelopment
---
上一篇有提到，我們在搜尋、登入和註冊三個頁面各放了一個表單，讓使用者可以藉由表單輸入資料。
這篇會利用Django的Form類別來幫助我們完成表單。
首先在ranking資料夾底下新增一個forms.py檔案
0. 匯入模組
```code=python
from django import forms
from django.contrib.auth.models import User
from ranking.models import UserProfileInfo
```
1. 搜尋表單
將域名跟關鍵字都設定為字串格式，並限定長度200字元
placeholder是欄位裡會有的預先輸入
我是當作用來提示使用者要輸入什麼的小工具
```code=python
# 搜尋表單
class SearchForm(forms.Form):
# 域名
domain = forms.CharField(label="域名", max_length=200, widget=forms.TextInput(attrs={"placeholder":"xxx.com"}))
# 關鍵字
keyword = forms.CharField(label="關鍵字", max_length=200, widget=forms.TextInput(attrs={"placeholder":"關鍵字1,關鍵字2,關鍵字3"}))
```
2. 登入表單
使用者名稱跟密碼一樣都設為字串格式，長度分別限制為200、128個字元
密碼一樣記得設定PasswordInput，讓在輸入的時候顯示***
```code=python
# 登入表單
class LoginForm(forms.Form):
# 使用者名稱
username = forms.CharField(label="使用者名稱", max_length=200, widget=forms.TextInput(attrs={"class":"form-control", "placeholder":"使用者名稱"}))
# 密碼
password = forms.CharField(label="密碼", max_length=128, widget=forms.PasswordInput(attrs={"class":"form-control", "placeholder":"密碼"}))
```
3. 註冊表單
依樣畫葫蘆的設定
在Meta method中定義fields並把所有的項目都設定好css的class、placholder以及把required設定成True來讓每個項目都成為必填的項目。
```code=python
# 註冊表單
# 用Djano內建的User模型處理登入機制
# 他已經包含五個參數：使用者名稱、密碼、姓氏、名字、電子信箱
class UserForm(forms.ModelForm):
# 透過widget把密碼設成顯示***
password = forms.CharField(widget=forms.PasswordInput(attrs={
"class":"form-control",
"placeholder":"密碼",
"required":True
}))
class Meta():
model = User
fields = ('username', 'email', 'password', 'first_name', 'last_name',)
widgets = {
'username':forms.TextInput(attrs={
"class":"form-control",
"placeholder":"使用者名稱",
"required":True
}),
'last_name':forms.TextInput(attrs={
"class":"form-control",
"placeholder":"姓氏",
"required":True
}),
'first_name':forms.TextInput(attrs={
"class":"form-control",
"placeholder":"名字",
"required":True
}),
'email':forms.TextInput(attrs={
"class":"form-control",
"placeholder":"你的信箱@mail.com",
"required":True
}),
}
# 利用UserProfileInfo模型建立表單
# 並且增加一個暱稱欄位
class UserProfileInfoForm(forms.ModelForm):
class Meta():
model = UserProfileInfo
fields = ('nickname',)
widgets = {
'nickname':forms.TextInput(attrs={
"class":"form-control",
"placeholder":"暱稱",
"required":True
})
}
```
表單設定好之後我們就可以把表單放入對應頁面
我們利用django.shortcut中的render選擇想要渲染的html
透過context這個變數以字典型態把對應的內容送到對應的模板變數
沒錯！就是用{}框起來的那些變數！
打開views.py後，先從search開始，
```code=python
# import render
from django.shortcuts import render
# import forms
from .forms import SearchForm, LoginForm, UserForm, UserProfileInfoForm
.
.
.
# search view
def search(request):
form = SearchForm
return render(request, "ranking/search.html",
context={"form":form},)
```
完成後就可以看到頁面中出現表單了
再來用一樣的方法把登入表單和註冊表單都放進去頁面中吧
記得字串名稱要跟自己在html檔案中設定的一樣喔～
```code=python
def user_login(request):
form = LoginForm
return render(request, "ranking/login.html",
context={"form":form},)
def signup(request):
user_form = UserForm
profile_form = UserProfileInfoForm
return render(request, "ranking/signup.html",
context={"user_form":user_form,
"userprofile_form":profile_form},)
```
完成後的樣子
登入頁面：
註冊頁面：
表單都放上後，下一篇會開始完成各個頁面的功能，請大家拭目以待～
謝謝大家的收看！
如果有任何想法或是問題歡迎寄信到 chantinghsien@gmail.com
可以一起討論和分享新知
Sign in with Wallet
Connect another wallet