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>