Producing the right HTML semantics with Django

Question

I usually keep it simple and use the following form syntax in my templates:

<div>
       <div>{{form.title.label}}:</div>
       <div>{{form.title}}</div>
</div>

The problem with this approach is the bad semantic in the html output.

<div>
    <div>Title:</div>
    <div><input id="id_form-title" type="text" maxlength="30" name="form-title"></div>
</div>

Correct should be:

<div>
    <label for="id_form-title">Title</label>
    <input id="id_form-title" type="text" maxlength="30" name="form-title">
</div>

Is there a django build-in tag to do this automatically for me, or do I have to do it manually myself like this?

<div>
    <label for="id_form-title">{{form.title.label}}</label>
    {{form.title}}
</div>

Answer 1

It is indeed annoying that outputting fields one by one doesn't give you automatic access to a properly-constructed label element - doing form.as_p will correctly produce the fields plus labels, but you give up all control over the form layout.

You can build up the label tag using the field information fairly easily though:

<label for="{{ field.auto_id }}">{{ field.label }}</label>
{{ field }}

You can put this in a template tag for easier reuse.

Don't forget to also add {{ field.errors }} to display the errors associated with each field.

Answer 2

using label_tag should give you properly constructed label tag. So instead of just {{form.title.label}} you should use {{form.title.label_tag}} and it will result in the desired html