效果图:
forms.py:
from crispy_forms.bootstrap import AppendedText, PrependedText, FormActionsfrom crispy_forms.helper import FormHelperfrom crispy_forms.layout import Layout, Field, Submit, Resetfrom django import formsfrom django.forms import formset_factory, modelformset_factoryfrom app.models import Report, Userclass CrispyForm(forms.Form):name = forms.CharField(max_length=100, help_text=\"提示:请填写你的真实姓名\")age = forms.IntegerField(max_value=30)money = forms.CharField(max_length=50)happy = forms.CharField(max_length=50)introduction = forms.CharField(max_length=300, widget=forms.Textarea)sex = forms.ChoiceField(choices=((\'option1\', \'男\'), (\'option2\', \'女\')), widget=forms.RadioSelect, initial=\'option2\')love = forms.MultipleChoiceField(choices=((\'o1\', \'唱歌\'), (\'o2\', \'跳舞\'), (\'o3\', \'运动\'),(\'o4\', \'睡觉\'), (\'o5\', \'游戏\')), widget=forms.CheckboxSelectMultiple,initial=(\'o1\', \'o3\'))multi_select = forms.MultipleChoiceField(choices=((\'1\', \'1\'), (\'2\', \'2\'), (\'3\', \'3\'), (\'4\', \'4\'), (\'5\', \'5\')),)helper = FormHelper()helper.form_class = \'form-horizontal\'# Layout()中必须包含上面所有的字段,否则会报错helper.layout = Layout(Field(\'name\', css_class=\'input-xlarge\'),Field(\'introduction\', rows=\"3\", css_class=\'input-xlarge\'),Field(\'love\', style=\"background: blue; padding: 10px;\"),\'sex\',AppendedText(\'age\', \'岁\'),PrependedText(\'money\', \'¥\'),PrependedText(\'happy\', \'<input type=\"checkbox\" checked=\"checked\" value=\"\" id=\"\" name=\"\">\'),\'multi_select\',FormActions(Submit(\'report_submit\', \'提交\', css_class=\"btn-primary\"),Reset(\'reset\', \'撤销\')))
views.py
def crispy(request):if request.method == \'GET\':crispy_form = CrispyForm()return render(request, \'app/crispy.html\', {\'crispy_form\': crispy_form})elif request.method == \'POST\':crispy_form = CrispyForm(request.POST)if crispy_form.is_valid():return render(request, \'app/crispy.html\', {\'crispy_data\': crispy_form.cleaned_data})else:print(crispy_form.cleaned_data)return HttpResponse(\"表单校验错误\")
crispy.html
{% load crispy_forms_tags %}{% load static %}<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>CRISPY TEST PAGE</title><link href=\"{% static \'app/bootstrap-3.3.7/dist/css/bootstrap.css\'%}\" rel=\"stylesheet\"><script src=\"{% static \'app/bootstrap-3.3.7/js/tests/vendor/jquery.min.js\' %}\"></script><script src=\"{% static \'app/bootstrap-3.3.7/dist/js/bootstrap.js\' %}\"></script></head><body><div style=\"width:30%\" class=\"col-md-offset-4\">{# <form action=\"{% url \'app:crispy\' %}\" method=\"post\"> #}{# {% csrf_token %} #}{# {{ crispy_form | crispy }} 使用这个表达式的话FormHelper不起作用 #}{# POST只传过来了clean.data,并没有把crispy_form表单直接传过来,不加if的话会报错 #}{% if crispy_form %}{% crispy crispy_form %}{% endif %}{# <input type=\"submit\" value=\"提交\" class=\"btn btn-default\">#}{# </form>#}</div><p style=\"color: red\">{{ crispy_data }}</p></body></html>
settings.py
INSTALLED_APPS = [......\'crispy_forms\',]
# 使用crispyCRISPY_TEMPLATE_PACK = \'bootstrap3\'
注意:
要自己将bootstrap导入静态文件夹