DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Make Your Forms Clean and Simple using Django Uni-Form and Twitter Bootstrap CSS

Make Your Forms Clean and Simple using Django Uni-Form and Twitter Bootstrap CSS

Chris Smith user avatar by
Chris Smith
·
Feb. 14, 12 · Web Dev Zone · Interview
Like (0)
Save
Tweet
11.13K Views

Join the DZone community and get the full member experience.

Join For Free

I'm sure, most of you, know what django-uni-form is... For those that don't, django-uni-form is a very cool django app that makes form management/styling/layouting a breeze. You can do pretty much anything to a form with it: Split it in formsets, add HTML between every element, wrap different elements in different containers etc. Also, it produces great HTML, and it manages the <form> tag, as well as the submit/reset buttons. If you aren't using it, you should definitely start.

Twitter Bootstrap is a client side framework by twitter, encompassing many aspects - layout, sane default CSS, typography, Javascript plugins, even some icons. It looks very professional, it's easy to use and very popular. The way bootstrap styles a form is what most people need when building or prototyping a web app. But, you need to be able to change some css classes and html elements in order to work.

Originally Authored by Dejan Noveski

 
Doing this with django-uni-form is extremely easy. All we need to do is change the default field template. I'll start with an example:

Bootstrap

This step is easy. Just make sure you have downloaded the Bootstrap CSS file, and that it's properly loaded.

The HTML

Simple HTML is all we need:

{% load uni_form_tags %}
<!doctype html>
<html>
<head>
  <title>Django Uniform and Bootstrap</title>
  <!-- LOAD BOOTSTRAP CSS HERE -->
</head>
<body>
  <header class="navbar">
  </header>
  <div role="main" class="container">
    <div class="row">
        <div class="span12">
            {% uni_form form form.helper %}
        </div>
    </div>
    <hr/>
    <footer>
      Brainacle 2012
    </footer>
  </div>
  <!-- LOAD BOOTSTRAP JS HERE -->
</body>
</html>


The Form

I'm making a simple User edit ModelForm, with one extra text field:

from django import forms
from django.contrib.auth.models import User
from django.core.urlresolvers import reverse

from uni_form.helper import FormHelper
from uni_form.layout import Layout, ButtonHolder, Submit, Fieldset


class UserEditForm(forms.ModelForm):
    bio = forms.CharField(label = _('Bio'), required = False,
                    widget=forms.Textarea(attrs={'class':'span12'}))

    class Meta:
        model = User
        fields = ("username", "first_name", "last_name", "email")

    def __init__(self, *args, **kwargs):

        self.helper = FormHelper()
        self.helper.form_method = 'POST'
        self.helper.form_action = reverse("user_edit_view_name")
        self.helper.form_class = 'form-horizontal'

        self.helper.layout = Layout(
            Fieldset(
                'Edit Account Info',
                'username', 'first_name', 'last_name',
                'email', 'bio', 'save',
            ),
            ButtonHolder(
                Submit('save', 'Save', css_class='btn btn-large btn-primary pull-right')
            )
        )
        return super(UserEditForm, self).__init__(*args, **kwargs)


Notes:
We add span10 class to the "bio" field textarea because labels will take 2 spans, and we want the textarea fill the entire width. We add class "form-horizontal" to the form, to get the labels position in line with the inputs. The button classes are also important.

The Magic

Now, we have to tell uni-form to generate html that will be compatible with Bootstrap. Lucky enough, uni-form provides us with the ability to override the generic field HTML template. Just make a new file called field.html inside [template root path]/uni_form/ folder with the following content:

{% if field.is_hidden %}
    {{ field }}
{% else %}
<div class="control-group {% if field.errors %}error{% endif %}">
    <label for="{{ field.auto_id }}" class="control-label">
        {% if field.field.required %}<b>{% endif %}{{ field.label|safe }}{% if field.field.required %}*</b>{% endif %}
    </label>
    <div class="controls">
        {{ field }}
        {% if field.errors %}
            <span class="help-inline">{% for error in field.errors %}{{ error }}<br/> {% endfor %}</span>
        {% endif %}
        {% if field.help_text%}
            <p class="help-block">
                {{ field.help_text|safe }}
            </p>
        {% endif %}
    </div>
</div>
{% endif %}


This template handles labels, required fields, help text, errors etc. The end result looks something like this:

./static/../static/uploads/bootstrap_uniform.png



Source: http://brainacle.com/how-to-use-django-uni-form-with-twitter-bootstrap-css.html

CSS Bootstrap (front-end framework) Form (document) twitter Django (web framework)

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Spring, IoC Containers, and Static Code: Design Principles
  • DZone's Article Submission Guidelines
  • Low Code and No Code: The Security Challenge
  • Hard Things in Computer Science

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo