form表單添加樣式
1.在views.py文件加入類：
from django.shortcuts import render,HttpResponse
from django import forms
# Create your views here.
class MyForm(forms.Form):
title = forms.CharField(
max_length=32,
min_length=2,
label='書名',
widget=forms.widgets.TextInput(attrs={'class':'form-control'}),
)
price = forms.IntegerField(
label='價格',
widget=forms.widgets.NumberInput(attrs={'class':'form-control'})
)
date = forms.DateField(
label='日期',
widget=forms.widgets.DateInput(attrs={'class':'form-control','type':'date'})
)
password = forms.CharField(
max_length=32,
min_length=2,
label='密碼',
widget=forms.widgets.PasswordInput(attrs={'class': 'form-control'}),
)
sex = forms.ChoiceField(#單選下拉框
choices=(
('male','男'),
('female','女')
),
label='性別',
# widget=forms.widgets.RadioSelect(),
widget=forms.widgets.Select(attrs={'class': 'form-control'}),
)
author = forms.MultipleChoiceField(
choices=(
('1','亞歷山大.皮爾斯'),
('2','丹妮米勒'),
('3','艾利爾斯頓'),
),
label='作者',
widget=forms.widgets.CheckboxSelectMultiple(),
)
2.在路由分發時，定義函數中加入form表單設置的字段
def index(request):
if request.method=='GET':
form_obj = MyForm()
return render(request,'index.html',{'form_obj':form_obj})
#{'form_obj':form_obj}是定義好的類的實例化,index頁面會拿到這些數據
3.在index.html中將所有字段渲染出來：
3.1將所有字段全部拿出來：
<body>
<h1>這是index頁面</h1>
{#{{ form_obj.as_p }}將所有的字段都渲染出來#}
</body>
3.2對個別字段單獨進行渲染：
<h1>這是index頁面</h1>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="form-group ">
<label for="{{ form_obj.title.id_for_label }}">{{ form_obj.title.label }}</label>
{{ form_obj.title }}{# field s生成input標簽 #}
</div>
<div class="form-group">
<label for="{{ form_obj.price.id_for_label }}">{{ form_obj.price.label }}</label>
{{ form_obj.price }}
</div>
<div class="form-group">
<label for="{{ form_obj.date.id_for_label }}">{{ form_obj.date.label }}</label>
{{ form_obj.date }}
</div>
<div class="form-group">
<label for="{{ form_obj.password.id_for_label }}">{{ form_obj.password.label }}</label>
{{ form_obj.password }}
</div>
<div class="form-group">
<label for="{{ form_obj.sex.id_for_label }}">{{ form_obj.sex.label }}</label>
{{ form_obj.sex }}
</div>
<div class="form-group">
<label for="{{ form_obj.author.id_for_label }}">{{ form_obj.author.label }}</label>
{{ form_obj.author }}
</div>
</div>
</div>
</div>
3.2對於在index.html中重復的操作我們可以用循環來解決：
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
{% for field in form_obj %}
<div class="form-group">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
{#直接用field，而不是form_obj.field#}
{{ field }}
</div>
{% endfor %}
</div>
</div>
</div>
4.Choice樣式添加方式：
4.1
#對於choice的動態數據庫讀取
publish = forms.ModelChoiceField(
queryset=models.Publish.objects.all(),
widget=forms.widgets.Select(attrs={
'class':'form-control'
})
)
4.2
publish = forms.ChoiceField()
def __init__(self,*args,**kwargs):
super().__init__(*args,**kwargs)
print(self.fields['publish'].choices)
self.fields['publish'].choices = models.Publish.objects.all().values_list('nid','name')
4.3批量添加樣式：
class MyForm(forms.Form):
title = forms.CharField(
max_length=32,
min_length=2,
label='書名',
widget=forms.widgets.TextInput(),
)
price = forms.IntegerField(
label='價格',
widget=forms.widgets.NumberInput()
)
date = forms.DateField(
label='日期',
widget=forms.widgets.DateInput(attrs={'type':'date'})
)
password = forms.CharField(
max_length=32,
min_length=2,
label='密碼',
widget=forms.widgets.PasswordInput(),
)
author = forms.ModelChoiceField(
queryset=models.Author.objects.all(),
widget=forms.widgets.SelectMultiple()
)
publish = forms.ModelChoiceField(
queryset=models.Publish.objects.all(),
widget=forms.widgets.Select()
)
#批量添加樣式:attrs={'class':'form_control'}應用bootstrap樣式
def __init__(self,*args,**kwargs):
super().__init__(*args,**kwargs)
for field in self.fields:
self.fields[field].widget.attrs.update({
'class':'form-control'
})
print(self.fields)#是一個有序字典，字典里是實例化的對象
OrderedDict([('title', <django.forms.fields.CharField object at 0x0000027EF85D3630>), ('price', <django.forms.fields.IntegerField object at 0x0000027EF85E6A20>), ('date', <django.forms.fields.DateField object at 0x0000027EF85E6B38>), ('password', <django.forms.fields.CharField object at 0x0000027EF85E6BA8>), ('author', <django.forms.models.ModelChoiceField object at 0x0000027EF85E6C18>), ('publish', <django.forms.models.ModelChoiceField object at 0x0000027EF85E6C88>)])
form表單驗證
1.在views.py中
from django.shortcuts import render,HttpResponse
from django import forms
from app01 import models
# Create your views here.
class MyForm(forms.Form):
title = forms.CharField(
max_length=32,
min_length=2,
required=False,#非必填項
initial='張三',#設置默認值
error_messages={#定制錯誤信息
'min_length':'長度不能小於2',
'max_length':'長度不能大於2',
},
label='書名',
widget=forms.widgets.TextInput(),
)
price = forms.IntegerField(
#默認required=True
#非必填項 required=False
error_messages={
'required': '該字段不能為空',
},
label='價格',
widget=forms.widgets.NumberInput()
)
date = forms.DateField(
required=False, # 非必填項
label='日期',
widget=forms.widgets.DateInput(attrs={'type':'date'})
)
author = forms.ModelChoiceField(
error_messages={
'required': '該字段不能為空',
},
queryset=models.Author.objects.all(),
widget=forms.widgets.SelectMultiple()
)
# #對於choice的動態數據庫讀取
publish = forms.ModelChoiceField(
error_messages={
'required': '該字段不能為空',
#頁面顯示時只是文本內容
},
queryset=models.Publish.objects.all(),
widget=forms.widgets.Select()
)
#批量添加樣式:attrs={'class':'form_control'}應用bootstrap樣式
def __init__(self,*args,**kwargs):
super().__init__(*args,**kwargs)
print(self.fields)
for field in self.fields:
self.fields[field].widget.attrs.update({
'class':'form-control'
})
def index(request):
if request.method=='GET':
form_obj = MyForm()
return render(request,'index.html',{'form_obj':form_obj})
else:
data = request.POST
print(data)#post提交數據的querydict
#實例化驗證：
form_obj = MyForm(data)
if form_obj.is_valid():#驗證每個字段傳過來是否正確。
print('<<<<<<',form_obj.cleaned_data)
#凡是通過驗證的數據放在cleand_data中
else:
print('>>>>>>>>',form_obj.errors)
#報錯信息放在errors
return render(request,'index.html',{'form_obj':form_obj})
2.在index.html中
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
</head>
<body>
<h1>這是添加頁面</h1>
{#{{ form_obj.as_p }}將所有的字段都渲染出來#}
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<form action="{% url 'index' %}" method="post" novalidate>{# novalidate是告訴瀏覽器不需要做驗證#}
{% csrf_token %}
{% for field in form_obj %}
{# <div class="form-group has-error">{# has-error判斷錯誤信息使得框變紅 #}
<div class="form-group {% if field.errors.0 %} has-error {% endif %}">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
{{ field }}
{# {{ field.errors.0 }}#}
<span class="text-danger
">{{ field.errors.0 }}</span>{# 錯誤信息變紅 #}
</div>
{% endfor %}
<input type="submit" class="btn btn-success pull-right" value="保存">
</form>
</div>
</div>
</div>
<script src="{% static 'jquery-3.4.1.js' %}"></script>
<script src="{% static 'jquery.cookie.js' %}"></script>
<script src="{% static 'bootstrap-3.3.7-dist/js/jquery.min.js' %}"></script>
</body>
</html>