Django What is the best way to format forms?

Question

I just got into Django and read a bunch of books, now I am creating my first application. When I do my forms in my im template using ...

{{ form.as_ul }} 

And now I'm trying to apply CSS to my form. It is hard to prove that he looks beautiful. I was wondering if there is a better way of visualizing and styling?

Answer 1

Well, there are several options you can use, for example:

• form.as_p
• form.as_ul
• form.as_table

It is up to you to decide what you want. Regarding customizing it with CSS, see how they structured the form here ( taken from django docs ):

 <form action="/contact/" method="post"> {{ form.non_field_errors }} <div class="fieldWrapper"> {{ form.subject.errors }} <label for="id_subject">Email subject:</label> {{ form.subject }} </div> <div class="fieldWrapper"> {{ form.message.errors }} <label for="id_message">Your message:</label> {{ form.message }} </div> <div class="fieldWrapper"> {{ form.sender.errors }} <label for="id_sender">Your email address:</label> {{ form.sender }} </div> <div class="fieldWrapper"> {{ form.cc_myself.errors }} <label for="id_cc_myself">CC yourself?</label> {{ form.cc_myself }} </div> <p><input type="submit" value="Send message" /></p> </form> 

The original form looked like this:

 from django import forms class ContactForm(forms.Form): subject = forms.CharField(max_length=100) message = forms.CharField() sender = forms.EmailField() cc_myself = forms.BooleanField(required=False) 

So, as you can see, you can simply access the form element by clicking

{{ form.<element_name>.<element_properties> }}

You can add your own CSS in label or div s. Its entirely up to you to decide what you want to do. On the side of the note, if you want forms to be formatted using Bootstrap 3, I would suggest that you use the django-crispyforms for django .

Answer 2

Well, this does not answer the question directly, but if you use Bootstrap, you have several options:

• django-bootstrap3
• django-bootstrap-toolkit
• django-crispy-forms

and more from djangopackages.com

Answer 3

There is a very easy to install and great tool for Django that I use for styling, and it can be used for all front-end frameworks like Bootstrap, Materialize, Foundation, etc. This is called custom widgets. Documentation: Widget Tweaks

• You can use it in general Django views

• Or with your own forms:

   from django.forms import Form class MyForm(Form): field1 = forms.CharField(max_length=512) field2 = forms.CharField(max_length=256) 

Instead of using the default value:

 {{ form.as_p }} or {{ form.as_ul }} 

You can style it using the render_field attribute, which gives you a more html style for styling, as in this example:

template.html

 {% load widget_tweaks %} <div class="container"> <div class="col-md-6"> {% render_field form.field1 class+="form-control myCSSclass" placeholder="Placeholder for field1" %} </div> <div class="col-md-6"> {% render_field form.field2 class+="myCSSclassX myCSSclass2" placeholder=form.field2.label %} </div> </div> 

This makes it easy to store the frontend in the interface and the backend in the backend instead of doing this:

 class MyForm(forms.Form): field1 = forms.CharField(widget=forms.TextInput(attrs={'class' : 'myCSSclass'})) field2 = forms.CharField(widget=forms.TextInput(attrs={'class' : 'myCSSclassX myCSSclass2'})) 

which, in my opinion, is very limited and easier to get confused