1

The Django UserCreationForm is very useful and easy to use functionally, however, it just throws everything onto the page so all the TextFields are in one line.

Is there anyway to layout and style the form? Specifically to put labels and input fields on a new line and possibly make it possible to apply some CSS to the whole form and individual parts of the form.

Kyle
  • 303
  • 8
  • 21

3 Answers3

3

Use BoundField and custom filters, and correct names of attributes of UserCreationForm class

Uses the BoundField class to display HTML or access attributes for a single field of a Form instance. And add CSS with a filter in the templatetags folders with an __init__.py, if have error remember add templatetags in your INSTALLED_APP like to 'app.name.templatetags' like:

  {{ form.username.label_tag }}
  {{ form.username|addclass:'form-control' }}
  {{ form.password1.label_tag }}
  {{ form.password1|addclass:'form-control' }}
  {{ form.password2.label_tag }}
  {{ form.password2|addclass:'form-control' }}

View source https://github.com/django/django/blob/master/django/contrib/auth/forms.py

The passwords are named 'password1' and 'password2'

Carlos Azuaje
  • 109
  • 3
  • 13
1

Every django form has three methods:

as_p()
as_ul()
as_table()

See the outputting forms as html section in the docs. You can style this output as you want.

If you want even more control over form's html then read this section of the same documentation.

frozenjim
  • 746
  • 5
  • 11
catavaran
  • 44,703
  • 8
  • 98
  • 85
1

In your forms.py,you can inherit UserCreationForm and set css style.(How to set css for forms CSS styling in Django forms)

Community
  • 1
  • 1
QShengyao
  • 101
  • 1
  • 9