CODEWITHSUNDEEP
pythondjangodjango-forms
GRS
GRS

Reputation: 3084

Django Forms: styling forms (checkboxes) manually - Input to be outside of label

I need to render checkbox form fields in the following format in html template:

<input id="tag" type="checkbox" name="check" value="1">
<label for="tag">Tag 1</label>

Currently, in my template I tried:

{{ filter.form.tags.errors }}
{% for field in filter.form.tags %}
<input id="{{ field.id_for_label }}" type="checkbox" name="check">
<label for="{{ field.id_for_label }}">{{ field.value }}</label>
{% endfor %}

This will not render {{ field.value }} (I get empty instead of Tag 1) and also is non sticky.

I also tried:

{% for field in filter.form.tags %}
{{ field.label_tag }}
{{ field }}
{% endfor %}

Which gives me nested of <label><input></input></label>, but displays everything that I need.

Is it possible to render a form such that I get the format that I'm after? (It should also preserve checked e.g. make ticks sticky).

Edit:

class TaskFilter(django_filters.FilterSet):
    """Filter for books by author"""
    tags = django_filters.ModelMultipleChoiceFilter(widget=forms.CheckboxSelectMultiple, queryset=Task.tags.most_common())
    title = django_filters.CharFilter(field_name='title', lookup_expr='icontains')

    class Meta:
        model = Task
        fields = ['tags', 'title']

views.py

def task_list_filter(request):
    if request.method == 'GET':
        form = AdditionalForm(request.GET)
        # process the form
        results = Task.objects.all().order_by('-created')

    f = TaskFilter(request.GET, queryset=results)

    # Output final query set
    results = f.qs[0:100]  # only get first 100 objects

    # Create pagination

    # Get the view

    return render(request, 'base/task_list_filter.html', {'filter': f,
                                                    'task_list': results,
                                                    'form': form })

Upvotes: 1

Views: 6071

Answers (2)

Baileyw75
Baileyw75

Reputation: 31

In HTML

{% for field in filter.form.tags %}
{{ field.tag }}  <!-- Generates the checkbox for the field -->
{{ field.choice_label }}  <!-- Generates the named label of the field -->
{% endfor %}

I learned that from this guy who has lots of helpful information specific to using Django.

Upvotes: 2

bonidjukic
bonidjukic

Reputation: 1479

To make sure the checkbox is in the correct state you can use the example you yourself provided with a few changes:

{% for field in filter.form.tags %}
<input type="checkbox" id="{{ field.id_for_label }}"
       name="{{ field.html_name }}"
       {% if field.value %}checked{% endif %}>
<label for="{{ field.id_for_label }}">{{ field.value }}</label>
{% endfor %}

And remember that you can use the {{ field.label_tag }} to generate the entire label HTML tag.

Upvotes: 3

Related Questions