Define css class in django Forms

Question

Assume I have a form  class SampleClass forms Form       name   forms CharField max length 30      age   forms IntegerField       django hacker   forms BooleanField required False    Is there a way for me to define css classes on each field such that I can then use jQuery based on class in my rendered page   I was hoping not to have to manually build the form

User · Accepted Answer

Answered my own question  Sigh  http   docs djangoproject com en dev ref forms widgets  django forms Widget attrs  I didn t realize it was passed into the widget constructor

User · Answer

Here is Simple way to alter in view  add below in view just before passing it into template   form   MyForm instance   instance obj  form fields  email   widget attrs     class   here class name

User · Answer

Here is another solution for adding class definitions to the widgets after declaring the fields in the class   def   init   self   args    kwargs       super SampleClass  self    init    args    kwargs      self fields  name   widget attrs  class      my class

User · Answer

Expanding on the method pointed to at docs djangoproject com   class MyForm forms Form        comment   forms CharField              widget forms TextInput attrs   size   40       I thought it was troublesome to have to know the native widget type for every field  and thought it funny to override the default just to put a class name on a form field   This seems to work for me   class MyForm forms Form         This instantiates the field w  the default widget     comment   forms CharField         We only override the part we care about     comment widget attrs  size      40    This seems a little cleaner to me

User · Answer

In case that you want to add a class to a form s field in a template  not in view py or form py  for example in cases that you want to modify 3rd party apps without overriding their views  then a template filter as described in Charlesthk answer is very convenient  But in this answer the template filter overrides any existing classes that the field might has    I tried to add this as an edit but it was suggested to be written as a new answer   So  here is a template tag that respects the existing classes of the field   from django import template  register   template Library      register filter name  addclass   def addclass field  given class       existing classes   field field widget attrs get  class   None      if existing classes          if existing classes find given class     -1                if the given class doesn t exist in the existing classes             classes   existing classes         given class         else              classes   existing classes     else          classes   given class     return field as widget attrs   class   classes

User · Answer

Use django-widget-tweaks  it is easy to use and works pretty well   Otherwise this can be done using a custom template filter   Considering you render your form this way     lt form action   contact   method  post  gt         form non field errors         lt div class  fieldWrapper  gt             form subject errors             lt label for  id subject  gt Email subject  lt  label gt             form subject         lt  div gt   lt  form gt    form subject is an instance of BoundField which has the as widget method   you can create a custom filter  addcss  in  my app templatetags myfilters py   from django import template  register   template Library     register filter name  addcss   def addcss value  arg       css classes   value field widget attrs get  class       split          if css classes and arg not in css classes          css classes     s  s     css classes  arg      return value as widget attrs   class   css classes     And then apply your filter      load myfilters     lt form action   contact   method  post  gt         form non field errors         lt div class  fieldWrapper  gt             form subject errors             lt label for  id subject  gt Email subject  lt  label gt             form subject addcss  MyClass          lt  div gt   lt  form gt    form subjects will then be rendered with the  MyClass  css class   Hope this help   EDIT 1   Update filter according to dimyG s answer Add django-widget-tweak link   EDIT 2   Update filter according to Bhyd s comment

User · Answer

Here is a variation on the above which will give all fields the same class  e g  jquery nice rounded corners        Simple way to assign css class to every field   def   init   self   args    kwargs       super TranslatedPageForm  self    init    args    kwargs      for myField in self fields        self fields myField  widget attrs  class      ui-state-default ui-corner-all

User · Answer

Here is another solution for adding class definitions to the widgets after declaring the fields in the class   def   init   self   args    kwargs       super SampleClass  self    init    args    kwargs      self fields  name   widget attrs  class      my class

User · Answer

As it turns out you can do this in form constructor  init function  or after form class was initiated  This is sometimes required if you are not writing your own form and that form is coming from somewhere else  -  def some view request       add css to fields     list   of   fields       if request method     POST           form   SomeForm request POST          if form is valid                return HttpResponseRedirect   thanks        else          form   SomeForm        for key in form fields keys            if key in add css to fields              field   form fields key              css addition    css addition               css   field widget attrs get  class                   field widget attrs  class     css addition   css classes      return render request   template name html     form   form

User · Answer

Here is another solution for adding class definitions to the widgets after declaring the fields in the class   def   init   self   args    kwargs       super SampleClass  self    init    args    kwargs      self fields  name   widget attrs  class      my class

User · Answer

You could also use Django Crispy Forms  it s a great tool to define forms in case you d like to use some CSS framework like Bootstrap or Foundation  And it s easy to specify classes for your form fields there   Your form class would like this then   from django import forms  from crispy forms helper import FormHelper from crispy forms layout import Layout  Div  Submit  Field from crispy forms bootstrap import FormActions  class SampleClass forms Form       name   forms CharField max length 30      age   forms IntegerField       django hacker   forms BooleanField required False       helper   FormHelper       helper form class    your-form-class      helper layout   Layout          Field  name   css class  name-class            Field  age   css class  age-class            Field  django hacker   css-class  hacker-class            FormActions              Submit  save changes    Save changes

User · Answer

You can try this    class SampleClass forms Form     name   forms CharField max length 30    name widget attrs update   class    your-class          You can see more information in  Django Widgets

User · Answer

Here is Simple way to alter in view  add below in view just before passing it into template   form   MyForm instance   instance obj  form fields  email   widget attrs     class   here class name

User · Answer

Yet another solution that doesn t require changes in python code and so is better for designers and one-off presentational changes  django-widget-tweaks  Hope somebody will find it useful

User · Answer

As it turns out you can do this in form constructor  init function  or after form class was initiated  This is sometimes required if you are not writing your own form and that form is coming from somewhere else  -  def some view request       add css to fields     list   of   fields       if request method     POST           form   SomeForm request POST          if form is valid                return HttpResponseRedirect   thanks        else          form   SomeForm        for key in form fields keys            if key in add css to fields              field   form fields key              css addition    css addition               css   field widget attrs get  class                   field widget attrs  class     css addition   css classes      return render request   template name html     form   form

User · Answer

You could also use Django Crispy Forms  it s a great tool to define forms in case you d like to use some CSS framework like Bootstrap or Foundation  And it s easy to specify classes for your form fields there   Your form class would like this then   from django import forms  from crispy forms helper import FormHelper from crispy forms layout import Layout  Div  Submit  Field from crispy forms bootstrap import FormActions  class SampleClass forms Form       name   forms CharField max length 30      age   forms IntegerField       django hacker   forms BooleanField required False       helper   FormHelper       helper form class    your-form-class      helper layout   Layout          Field  name   css class  name-class            Field  age   css class  age-class            Field  django hacker   css-class  hacker-class            FormActions              Submit  save changes    Save changes

User · Answer

If you want all the fields in the form to inherit a certain class  you just define a parent class  that inherits from forms ModelForm  and then inherit from it  class BaseForm forms ModelForm       def   init   self   args    kwargs           super BaseForm  self    init    args    kwargs          for field name  field in self fields items                field widget attrs  class      someClass    class WhateverForm BaseForm       class Meta          model   SomeModel   This helped me to add the  form-control  class to all of the fields on all of the forms of my application automatically  without adding replication of code

User · Answer

Here is another solution for adding class definitions to the widgets after declaring the fields in the class   def   init   self   args    kwargs       super SampleClass  self    init    args    kwargs      self fields  name   widget attrs  class      my class

User · Answer

You can try this    class SampleClass forms Form     name   forms CharField max length 30    name widget attrs update   class    your-class          You can see more information in  Django Widgets

User · Answer

In case that you want to add a class to a form s field in a template  not in view py or form py  for example in cases that you want to modify 3rd party apps without overriding their views  then a template filter as described in Charlesthk answer is very convenient  But in this answer the template filter overrides any existing classes that the field might has    I tried to add this as an edit but it was suggested to be written as a new answer   So  here is a template tag that respects the existing classes of the field   from django import template  register   template Library      register filter name  addclass   def addclass field  given class       existing classes   field field widget attrs get  class   None      if existing classes          if existing classes find given class     -1                if the given class doesn t exist in the existing classes             classes   existing classes         given class         else              classes   existing classes     else          classes   given class     return field as widget attrs   class   classes

User · Answer

If you want all the fields in the form to inherit a certain class  you just define a parent class  that inherits from forms ModelForm  and then inherit from it  class BaseForm forms ModelForm       def   init   self   args    kwargs           super BaseForm  self    init    args    kwargs          for field name  field in self fields items                field widget attrs  class      someClass    class WhateverForm BaseForm       class Meta          model   SomeModel   This helped me to add the  form-control  class to all of the fields on all of the forms of my application automatically  without adding replication of code

User · Answer

Expanding on the method pointed to at docs djangoproject com   class MyForm forms Form        comment   forms CharField              widget forms TextInput attrs   size   40       I thought it was troublesome to have to know the native widget type for every field  and thought it funny to override the default just to put a class name on a form field   This seems to work for me   class MyForm forms Form         This instantiates the field w  the default widget     comment   forms CharField         We only override the part we care about     comment widget attrs  size      40    This seems a little cleaner to me

User · Answer

Simply add the classes to your form as follows   class UserLoginForm forms Form       username   forms CharField widget forms TextInput          attrs            class   form-control            placeholder   Username                       password   forms CharField widget forms PasswordInput          attrs            class   form-control            placeholder   Password

User · Answer

Use django-widget-tweaks  it is easy to use and works pretty well   Otherwise this can be done using a custom template filter   Considering you render your form this way     lt form action   contact   method  post  gt         form non field errors         lt div class  fieldWrapper  gt             form subject errors             lt label for  id subject  gt Email subject  lt  label gt             form subject         lt  div gt   lt  form gt    form subject is an instance of BoundField which has the as widget method   you can create a custom filter  addcss  in  my app templatetags myfilters py   from django import template  register   template Library     register filter name  addcss   def addcss value  arg       css classes   value field widget attrs get  class       split          if css classes and arg not in css classes          css classes     s  s     css classes  arg      return value as widget attrs   class   css classes     And then apply your filter      load myfilters     lt form action   contact   method  post  gt         form non field errors         lt div class  fieldWrapper  gt             form subject errors             lt label for  id subject  gt Email subject  lt  label gt             form subject addcss  MyClass          lt  div gt   lt  form gt    form subjects will then be rendered with the  MyClass  css class   Hope this help   EDIT 1   Update filter according to dimyG s answer Add django-widget-tweak link   EDIT 2   Update filter according to Bhyd s comment

User · Answer

Yet another solution that doesn t require changes in python code and so is better for designers and one-off presentational changes  django-widget-tweaks  Hope somebody will find it useful

User · Answer

Simply add the classes to your form as follows   class UserLoginForm forms Form       username   forms CharField widget forms TextInput          attrs            class   form-control            placeholder   Username                       password   forms CharField widget forms PasswordInput          attrs            class   form-control            placeholder   Password

User · Answer

Here is a variation on the above which will give all fields the same class  e g  jquery nice rounded corners        Simple way to assign css class to every field   def   init   self   args    kwargs       super TranslatedPageForm  self    init    args    kwargs      for myField in self fields        self fields myField  widget attrs  class      ui-state-default ui-corner-all

[python] Define css class in django Forms

Examples related to python

Examples related to django

Examples related to django-forms