Specifying a css class for a field of a generic form

Question

I have the CRUD views, one of them looks like this:

#model
class Model(models.Model):
    field1 = models.CharField()
    field2 = models.CharField()



#view
class Model1CreateView(CreateView):
    model = Model1
    fields = ['field1', 'field2']

#template
and model1_form.html

    <form action="{% url 'model1_new' %}" method="post">
      {% csrf_token %}
      {{ form.as_p }}
      <input type="submit" value="Submit" />
    </form>

I need to specify a css class for field1, how can I do that?

Not a direct answer but github.com/kmike/django-widget-tweaks is useful. Also fields have IDs, sometimes you might want to use one for CSS. — Kos
– Kos, Commented Nov 3, 2014 at 11:49
@Kos, for such a simple thing I'll have to install all that? No, thanks. — Mario Honse
– Mario Honse, Commented Nov 3, 2014 at 11:51
That's not what I meant. The lib is useful because Django normally encourages setting field classes in the Widget instances for a given Form, while it's (arguably) more logical to put that in templates. — Kos
– Kos, Commented Nov 3, 2014 at 11:55

Timmy O'Mahony · Accepted Answer · 2014-11-03 12:10:52Z

2

You need to create a Form and modify the attrs of that fields widget. There are two common ways of doing this. In either case, you need to create a custom Form and tell your View to use that form:

forms.py

from django import forms
from myapp.models import FooModel

class FooForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(FooForm, self).__init__(*args, **kwargs)
        self.fields['field1'].widget.attrs = { 'class': 'fooclass' }

    class Meta:
        model = FooModel
        fields = ['field1', 'field2']

or

from django import forms
from myapp.models import FooModel

class FooForm(forms.ModelForm):
    field1 = forms.CharField(widget=forms.Textarea(attrs={'class':'fooclass';}))

    class Meta:
        model = FooModel
        fields = ['field1', 'field2']

then in your views.py:

from myapp.forms import FooForm

class Model1CreateView(CreateView):
    model = Model1
    fields = ['field1', 'field2']
    form_class = FooForm

edited Nov 3, 2014 at 12:10

answered Nov 3, 2014 at 11:54

Timmy O'Mahony

54.1k19 gold badges160 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mario Honse Over a year ago

in Model1CreateView, does it have to be form_class= FooForm or form= FooForm?

Timmy O'Mahony Over a year ago

form_class. You can see all of the attribute and methods that a CreatView provides here: ccbv.co.uk/projects/Django/1.5/django.views.generic.edit/…. Also, I forgot to add your second field to the form. I've updated

Daniel Roseman · Accepted Answer · 2014-11-03 12:07:44Z

1

You have to define a form explicitly if you want to do this.

class Model1Form(forms.ModelForm):
    field1 = forms.CharField(widget=forms.TextInput(attrs={'class': 'myclass'}))
    class Meta:
        model = Model1
        fields = ['field1', 'field2']

class Model1CreateView(CreateView):
    form_class = Model1Form
    model = Model1

edited Nov 3, 2014 at 12:07

answered Nov 3, 2014 at 11:54

Daniel Roseman

602k68 gold badges911 silver badges924 bronze badges

4 Comments

Mario Honse Over a year ago

shouldn't I specify field2 in Model1Form as well?

Daniel Roseman Over a year ago

If you're not changing anything from the default (as defined in the model), then no there's no reason to.

Mario Honse Over a year ago

also it throws an error: Model1CreateView is missing a queryset. Do you have any idea why?

Daniel Roseman Over a year ago

Apologies, should be form_class and you still need model.

Collectives™ on Stack Overflow

Specifying a css class for a field of a generic form

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related