Django Forms Template Design Classes

Question

The structure of Django Forms is excellent and displays the entire form as follows.

{{ form.as_p }} 

For the registration form, it is converted above:

 <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 development, I want to add classes to each element in the form, as shown below:

 <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 to add these classes to individual form elements. Do you need to manually deploy the form in the template to add these classes (in this case, changing the form should also make the appropriate changes to the template); This is too time-consuming, especially if you need to add errors, display errors for each of these fields.

Or it's better to put some classes from a class of forms or views, which seems a little ugly.

I don't know much css, it should be possible for these classes to be defined for the specified tags in the given form class. If so, this should be the best way to do this.

How 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 the labels for a particular class, the best way would be to change the markup and CSS a bit. 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 also searched for the same, just adding info if you don't know about it.

If you want to apply css to a specific field, you can extract the individual form fields as shown below.

For example: form field name :

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

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

Another way is to add the class name through javascript.

Answer 3

Here's a similar question: Add class to Django label_tag () output . I am not sure that the selected answer to this question will meet your needs or not.

Answer 4

Adding a class directly to the form field as an attribute seemed to me to be DRY.

 name = forms.CharField(widget=forms.TextInput(attrs={"class":"form-control"})) message = forms.CharField(widget=forms.Textarea(attrs={"class":"form-control bar foo"})) 

This way you do not need to edit anything else. You can add as many classes to specific fields as you want.