How Do I Create A Django Form That Displays A Checkbox Label To The Right Of The Checkbox?

When I define a Django form class similar to this: def class MyForm(forms.Form): check = forms.BooleanField(required=True, label='Check this') It expands to HTML that looks li

Solution 1:

Here's a solution I've come up with (Django v1.1):

{% loadmyfilters %}

[...]

{% forfieldinform %}
    [...]
    {% iffield.field.widget|is_checkbox %}
      {{ field }}{{ field.label_tag }}
    {% else %}
      {{ field.label_tag }}{{ field }}
    {% endif %}
    [...]
{% endfor %}

You'll need to create a custom template tag (in this example in a "myfilters.py" file) containing something like this:

from django import template
from django.forms.fields import CheckboxInput

register = template.Library()

@register.filter(name='is_checkbox')defis_checkbox(value):
    returnisinstance(value, CheckboxInput)

More info on custom template tags available here.

Edit: in the spirit of asker's own answer:

Advantages:

1. No futzing with CSS.
2. The markup ends up looking the way it's supposed to.
3. I didn't hack Django internals. (but had to look at quite a bunch)
4. The template is nice, compact and idiomatic.
5. The filter code plays nice regardless of the exact values of the labels and input field names.

Disadvantages:

1. There's probably something somewhere out there that does it better and faster.
2. Unlikely that the client will be willing to pay for all the time spent on this just to move the label to the right...

Solution 2:

I took the answer from romkyns and made it a little more general

deffield_type(field, ftype):
    try:
        t = field.field.widget.__class__.__name__
        return t.lower() == ftype
    except:
        passreturnFalse

This way you can check the widget type directly with a string

{% if field|field_type:'checkboxinput' %}
    <label>{{ field }} {{ field.label }}</label>
{% else %}
    <label> {{ field.label }} </label> {{ field }}
{% endif %}

Solution 3:

All presented solutions involve template modifications, which are in general rather inefficient concerning performance. Here's a custom widget that does the job:

from django import forms
from django.forms.fields import BooleanField
from django.forms.util import flatatt
from django.utils.encoding import force_text
from django.utils.html import format_html
from django.utils.translation import ugettext as _


classPrettyCheckboxWidget(forms.widgets.CheckboxInput):
    defrender(self, name, value, attrs=None):
        final_attrs = self.build_attrs(attrs, type='checkbox', name=name)
        if self.check_test(value):
            final_attrs['checked'] = 'checked'ifnot (value isTrueor value isFalseor value isNoneor value == ''):
            final_attrs['value'] = force_text(value)
        if'prettycheckbox-label'in final_attrs:
            label = _(final_attrs.pop('prettycheckbox-label'))
        else:
            label = ''return format_html('<label for="{0}"><input{1} /> {2}</label>', attrs['id'], flatatt(final_attrs), label)


classPrettyCheckboxField(BooleanField):
    widget = PrettyCheckboxWidget
    def__init__(self, *args, **kwargs):
        if kwargs['label']:
            kwargs['widget'].attrs['prettycheckbox-label'] = kwargs['label']
            kwargs['label'] = ''super(PrettyCheckboxField, self).__init__(*args, **kwargs)


# usage in formclassMyForm(forms.Form):
    my_boolean = PrettyCheckboxField(label=_('Some label'), widget=PrettyCheckboxWidget())

I have PrettyCheckboxWidget and PrettyCheckboxField in an extra file, so they may be imported where needed. If you don't need translations, you can remove the ugettext parts. This code works on Django 1.5 and is untested for lower versions.

Advantages:

• Highly performant, needs no template modifications
• Easy to use as a custom widget

Disadvantages:

• "as_table" renders the checkbox + label inside the second column
• {{ field.label }} inside the template is empty. The label is instead bound to {{ field }}
• More work than I planned on doing on a Saturday ;-)

Solution 4:

I know that the user excluded CSS, but considering the top answers take about half hour of work to do such a small thing, but knowing that details like these are important on a website, I'd settle for the CSS solution.

checkbox.css

input[type="checkbox"] {
    float: left;
    margin-right: 10px;
    margin-top: 4px;
}

forms.py

classMyForm(forms.ModelForm):
    # ...
    classMedia:
    css = {'all': 'checkbox.css',
    }

template.html

{{ form.media }}
{{ form.as_p }}

Advantages:

• fast!
• no futzing with template tags (just form.as_p)
• no new damned widgets
• the CSS file is automatically included in every form

Disadvantages:

• the HTML doesn't reflect the presentation (but is good enough!)
• your frontendist could complain

Solution 5:

Here's what I ended up doing. I wrote a custom template stringfilter to switch the tags around. Now, my template code looks like this:

{% load pretty_forms %}
<formaction="."method="POST">
{{ form.as_p|pretty_checkbox }}
<p><inputtype="submit"value="Submit"></p></form>

The only difference from a plain Django template is the addition of the {% load %} template tag and the pretty_checkbox filter.

Here's a functional but ugly implementation of pretty_checkbox - this code doesn't have any error handling, it assumes that the Django generated attributes are formatted in a very specific way, and it would be a bad idea to use anything like this in your code:

from django import template
from django.template.defaultfilters import stringfilter
import logging

register=template.Library()

@register.filter(name='pretty_checkbox')@stringfilterdefpretty_checkbox(value):
    # Iterate over the HTML fragment, extract <label> and <input> tags, and# switch the order of the pairs where the input type is "checkbox".
    scratch = value
    output = ''try:
        whileTrue:
            ls = scratch.find('<label')
            if ls > -1:
                le = scratch.find('</label>')
                ins = scratch.find('<input')
                ine = scratch.find('/>', ins)
                # Check whether we're dealing with a checkbox:if scratch[ins:ine+2].find(' type="checkbox" ')>-1:
                    # Switch the tags
                    output += scratch[:ls]
                    output += scratch[ins:ine+2]
                    output += scratch[ls:le-1]+scratch[le:le+8]
                else:
                    output += scratch[:ine+2]
                scratch = scratch[ine+2:]
            else:
                output += scratch
                breakexcept:
        logging.error("pretty_checkbox caught an exception")
    return output

pretty_checkbox scans its string argument, finds pairs of <label> and <input> tags, and switches them around if the <input> tag's type is "checkbox". It also strips the last character of the label, which happens to be the ':' character.

Advantages:

1. No futzing with CSS.
2. The markup ends up looking the way it's supposed to.
3. I didn't hack Django internals.
4. The template is nice, compact and idiomatic.

Disadvantages:

1. The filter code needs to be tested for exciting values of the labels and input field names.
2. There's probably something somewhere out there that does it better and faster.
3. More work than I planned on doing on a Saturday.