Django Forms Template design classes

Question

Django Forms framework is excellent and renders the entire form by just the following.

{{ form.as_p }}

For a registration form, it converts above into:

<p><label for="id_username">Username:</label> <input id="id_username" type="text" name="username" maxlength="30" /> Required. 30 characters or fewer. Alphanumeric characters only (letters, digits and underscores).</p>
<p><label for="id_email">Email:</label> <input type="text" name="email" id="id_email" /></p>
<p><label for="id_firstname">Firstname:</label> <input type="text" name="firstname" id="id_firstname" /></p>
<p><label for="id_lastname">Lastname:</label> <input type="text" name="lastname" id="id_lastname" /></p>
<p><label for="id_password1">Password:</label> <input type="password" name="password1" id="id_password1" /></p>
<p><label for="id_password2">Password confirmation:</label> <input type="password" name="password2" id="id_password2" /></p>

But for the sake of design I want to add classes to each element in the form, as follows:

<p><label for="id_email" class="field-title">Email:</label> <input type="text" name="email" id="id_email" /></p>
<p><label for="id_firstname" class="field-title">Firstname:</label> <input type="text" name="firstname" id="id_firstname" /></p>
<p><label for="id_lastname" class="field-title">Lastname:</label> <input type="text" name="lastname" id="id_lastname" /></p>
<p><label for="id_password1" class="field-title">Password:</label> <input type="password" name="password1" id="id_password1" /></p>
<p><label for="id_password2" class="field-title">Password confirmation:</label> <input type="password" name="password2" id="id_password2" /></p>

What is the standard way of adding these classes to individual form elements. Is it necessary to expand the form in the template manually to add these classes (in which case, the change in the form should also make corresponding changes in the template); This is too laborious, particularly since you need to add if errors, display errors also for each of those fields.

Or is it better to supply some classes from the form class or the views, which seems a little ugly.

I dont know much css, it should be possible to have these classes defined for the specified tags within a given class of a form. If yes, this should be the best way to go about doing it.

How do you add designer classes to form elements. What do you think is the best way to add them.

Answer 1

If you just need all labels to have a particular class, the best way would be to change the markup and CSS slightly. Put a <div> with your class around the form:

<div class="field-title">
    {{ form.as_p }}
</div>

and make the CSS definition as follows:

div.field-title label {
    ...
}

Answer 2

I was also searching for the same, just adding the info if you are not aware of this.

If you want to apply css to specific field, you can extract the individual form fields as like follows

Eg: form field name:

{{ form.name.label }}
{{ form.name.errors }}
{{ form.name }}
{{ form.name.help_text }}

Now, instead of {{ form.name.label }}, you can provide your own formatting as you mentioned.

Another way is adding the classname through javascript.