【人工智慧雲端系統實務】 09. Django Forms 應用
在 Django 中，Form (表單) 是處理使用者輸入資料的關鍵元件。無論是註冊、登入、留言、商品建立等功能，都會涉及表單的建立、顯示與驗證。
- 自動產生表單欄位與 HTML
- 內建資料驗證 (驗空、格式檢查等)
- 支援自訂驗證邏輯與錯誤訊息
- 與 Model 整合，快速產生資料模型表單
自訂 Form 類別 (純手工表單)
1
2
3
4
5
6
7
|
from django import forms
class ContactForm(forms.Form):
name = forms.CharField(max_length=50)
email = forms.EmailField()
message = forms.CharField(widget=forms.Textarea)
|
顯示於 HTML:
1
2
3
4
5
| <form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">送出</button>
</form>
|
3. 處理 POST 請求與驗證
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
from django.shortcuts import render
from .forms import ContactForm
def contact_view(request):
if request.method == 'POST':
form = ContactForm(request.POST)
if form.is_valid():
name = form.cleaned_data['name']
return render(request, 'thanks.html', {'name': name})
else:
form = ContactForm()
return render(request, 'contact.html', {'form': form})
|
4. 表單呈現方法
| 呈現方式 |
說明 |
form.as_p |
每個欄位包在 <p> 標籤中 |
form.as_table |
每個欄位以 <tr> 呈現 |
form.as_ul |
每個欄位以 <li> 呈現 |
| 手動渲染 |
個別使用 {{ form.field }} 控制格式 |
若要直接與資料庫模型對應，可使用 ModelForm。
1
2
3
4
5
6
|
from django.db import models
class Article(models.Model):
title = models.CharField(max_length=100)
content = models.TextField()
|
1
2
3
4
5
6
7
8
|
from django import forms
from .models import Article
class ArticleForm(forms.ModelForm):
class Meta:
model = Article
fields = ['title', 'content']
|
1
2
3
4
5
6
7
8
9
10
|
def create_article(request):
if request.method == 'POST':
form = ArticleForm(request.POST)
if form.is_valid():
form.save()
return redirect('article_list')
else:
form = ArticleForm()
return render(request, 'article_form.html', {'form': form})
|
6. 自訂欄位與錯誤訊息
1
2
3
4
5
6
7
| class ContactForm(forms.Form):
name = forms.CharField(
max_length=50,
required=True,
label="您的姓名",
error_messages={'required': '請輸入姓名'}
)
|
驗證欄位資料:
1
2
3
4
5
6
7
8
| class ContactForm(forms.Form):
email = forms.EmailField()
def clean_email(self):
data = self.cleaned_data['email']
if not data.endswith('.com'):
raise forms.ValidationError("只接受 .com 結尾的信箱")
return data
|
7. 表單錯誤處理
1
2
3
4
5
6
7
8
9
| {% if form.errors %}
<div class="alert alert-danger">
請修正下列錯誤:
{{ form.errors }}
</div>
{% endif %}
{{ form.name.errors }}
{{ form.name }}
|
8. 常用欄位型別總覽
| 欄位類型 |
對應 HTML 輸入類型 |
CharField |
<input type="text"> |
EmailField |
<input type="email"> |
BooleanField |
<input type="checkbox"> |
DateField |
<input type="date"> |
ChoiceField |
<select> |
MultipleChoiceField |
<select multiple> |
FileField / ImageField |
上傳檔案 / 圖片欄位 |
9. 延伸功能與技巧
1
| name = forms.CharField(widget=forms.TextInput(attrs={'class': 'form-control'}))
|
9.2 處理上傳檔案時，需使用 request.FILES
1
| form = UploadForm(request.POST, request.FILES)
|
留言
