form表单添加样式
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
form 表单添加样式
form 表单添加样式
1.在views.py ⽂件加⼊类：
2.在路由分发时，定义函数中加⼊form 表单设置的字段
3.在index.html 中将所有字段渲染出来：
3.1将所有字段全部拿出来：3.2对个别字段单独进⾏渲染：
3.2对于在index.html 中重复的操作我们可以⽤循环来解决：#
4.Choice 样式添加⽅式：# 4.1
4.2
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(),
)
def index(request):
if request.method=='GET':
form_obj = MyForm()
return render(request,'index.html',{'form_obj':form_obj})
#{'form_obj':form_obj}是定义好的类的实例化,index 页⾯会拿到这些数据
<body>
<h1>这是index 页⾯</h1>
{#{{ form_obj.as_p }}将所有的字段都渲染出来#}
</body>
<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_bel }}</label>
{{ form_obj.title }}{# field s ⽣成input 标签 #}
</div>
<div class="form-group">
<label for="{{ form_obj.price.id_for_label }}">{{ form_bel }}</label>
{{ form_obj.price }}
</div>
<div class="form-group">
<label for="{{ form_obj.date.id_for_label }}">{{ form_bel }}</label>
{{ form_obj.date }}
</div>
<div class="form-group">
<label for="{{ form_obj.password.id_for_label }}">{{ form_bel }}</label>
{{ form_obj.password }}
</div>
<div class="form-group">
<label for="{{ form_obj.sex.id_for_label }}">{{ form_bel }}</label>
{{ form_obj.sex }}
</div>
<div class="form-group">
<label for="{{ form_obj.author.id_for_label }}">{{ form_bel }}</label>
{{ form_obj.author }}
</div>
</div>
</div>
</div>
<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 }}">{{ bel }}</label>
{#直接⽤field ，⽽不是form_obj.field#}
{{ field }}
</div>
{% endfor %}
</div>
</div>
</div>
#对于choice 的动态数据库读取
publish = forms.ModelChoiceField(
queryset=models.Publish.objects.all(),
widget=forms.widgets.Select(attrs={
'class':'form-control'
})
)
publish = forms.ChoiceField()
def __init__(self,*args,**kwargs):
super().__init__(*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.for 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中
#凡是通过验证的数据放在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 }}">{{ bel }}</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>。