Django Forms and Twitter Bootstrap - Add fieldset, div wrapper and CSS labels to Django Forms?

[Victor Hooi]

Hi,

I'm attempting to use Django forms with Twitter's CSS library Bootstrap (http://twitter.github.com/bootstrap/):

The default form outputted by {{ form.as_p }} doesn't seem to be enough to be formatted nicely with Bootstrap.

You need to add a <fieldset>, as well as class="control-label" to each <label>.

So for example, to output a single text field:

    <fieldset class="control-group">

        <label class="control-label" for="input01">Text input</label>

        <div class="controls">

            <input type="text" class="xlarge" name="input01">

            <p class="help-text">Help text here. Be sure to fill this out like so, or else!</p>

        </div>

    </fieldset>

Is there a way to easily get Django's form handling to produce a form like this? (I'd like to avoid hardcoding every form field in my template if possible).

Cheers,

Victor

[Lukas Vinclav]

Hi,

I am using Twitter Bootstrap in Django for a long time. Here are directions how to achieve correct result.

1. Create new file for displaying forms in templates directory(e.g. forms.html)

2. In forms.html write the form displaying logic. This is just an example. You have to set bootstrap's classes.

{% if form.non_field_errors.0 %}

    <div class="alert-message block-message error">

        {{ form.non_field_errors }}

    </div>

{% endif %}

{% for field in form %}

    {% if field.is_hidden %}

        {{ field }}

    {% else %}

        <div class="clearfix form-item {{ field|field_type }} {% if field.errors %}error{% endif %}">

            <label for="id_{{ field.name }}">

                {{ field.label }}: {% if field.field.required %}<span class="required">*</span>{% endif %}

            </label>

        

            <div class="input">

                <div class="input-wrapper">

                    {{ field }}

                    {% if field.errors %}

                        <ul class="help">

                            {% for error in field.errors %}

                                <li class="help-inline">{{ error|escape }}</li>

                            {% endfor %}

                        </ul>

                    {% endif %}

                

                    {% if field.help_text %}

                        <div class="help-text">

                            <p>{{ field.help_text }}</p>

                        </div><!-- /.help-text -->

                    {% endif %}

                </div><!-- /.input-wrapper -->

            </div><!-- /.input -->

        </div><!-- /.clearfix -->

    {% endif %}

{% endfor %}

3. In template file where you are displaying form just call form.html

{% block content %}

   <form action="{% url questions_create poll.id %}" method="post">

        {% csrf_token %}

        {% include 'backend/partials/form.html' with form=question_form %}

        <div class="clearfix">

            <div class="input">

                <input type="submit" class="submit" value="Uložiť">

            </div><!-- /.input-->

        </div><!-- /.clearfix -->

    </form>

{% endblock %}

Lukas Vinclav

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To view this discussion on the web visit https://groups.google.com/d/msg/django-users/-/BClad_qCrnEJ.
To post to this group, send email to django...@googlegroups.com.
To unsubscribe from this group, send email to django-users...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/django-users?hl=en.

[Ezequiel Bertti]

See this example:

https://github.com/ebertti/django-registration-bootstrap

have a example using django-registration 

--
Ezequiel Bertti
E-Mail: ebe...@gmail.com
MSN: ebe...@hotmail.com
Cel: (21) 9188-4860

VÁ PARA BÚZIOS!!!
http://www.agh.com.br/
Ane Guest House

[Tomek Paczkowski]

Check out this little tool: http://pypi.python.org/pypi/django-widget-tweaks

Here's how I use it: https://github.com/oinopion/twitz/blob/master/templates/statuses/_status_update_form.html