Zdefiniuj klasę css w formularzach django

Załóżmy, że mam formularz

class SampleClass(forms.Form):
    name = forms.CharField(max_length=30)
    age = forms.IntegerField()
    django_hacker = forms.BooleanField(required=False)

Czy istnieje sposób, aby zdefiniować klasy css w każdym polu, dzięki czemu mogę użyć jQuery na podstawie klasy na mojej renderowanej stronie?

Miałem nadzieję, że nie będę musiał ręcznie budować formularza.

Jeszcze jedno rozwiązanie, które nie wymaga zmian w kodzie Pythona, a więc jest lepsze dla projektantów i jednorazowych zmian prezentacji: django-widget-tweaks . Mam nadzieję, że ktoś uzna to za przydatne.

Odpowiedziałem na własne pytanie. Westchnienie

http://docs.djangoproject.com/en/dev/ref/forms/widgets/#django.forms.Widget.attrs

Nie wiedziałem, że został przekazany do konstruktora widgetów.

Oto inne rozwiązanie do dodawania definicji klas do widżetów po zadeklarowaniu pól w klasie.

def __init__(self, *args, **kwargs):
    super(SampleClass, self).__init__(*args, **kwargs)
    self.fields['name'].widget.attrs['class'] = 'my_class'

Użyj ulepszeń django-widget- , jest łatwy w użyciu i działa całkiem dobrze.

W przeciwnym razie można to zrobić za pomocą niestandardowego filtru szablonu.

Biorąc pod uwagę, że renderujesz formularz w ten sposób:

<form action="/contact/" method="post">
    {{ form.non_field_errors }}
    <div class="fieldWrapper">
        {{ form.subject.errors }}
        <label for="id_subject">Email subject:</label>
        {{ form.subject }}
    </div>
</form>

form.subject jest instancją BoundField, która ma metodę as_widget .

możesz utworzyć niestandardowy filtr „addcss” w „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})

A następnie zastosuj filtr:

{% load myfilters %}
<form action="/contact/" method="post">
    {{ form.non_field_errors }}
    <div class="fieldWrapper">
        {{ form.subject.errors }}
        <label for="id_subject">Email subject:</label>
        {{ form.subject|addcss:'MyClass' }}
    </div>
</form>

Form.subjects będą następnie renderowane za pomocą klasy css „MyClass”.

Mam nadzieję, że to pomoże.

EDYCJA 1

• Aktualizacja filtru według dimyG „s odpowiedź

• Dodaj link do django-widget-tweak

EDYCJA 2

• Zaktualizuj filtr zgodnie z komentarzem Bhyd

Rozwijając metodę wskazaną na docs.djangoproject.com:

class MyForm(forms.Form): 
    comment = forms.CharField(
            widget=forms.TextInput(attrs={'size':'40'}))

Pomyślałem, że trudno jest znać rodzimy typ widżetu dla każdego pola, i pomyślałem, że zabawne jest przesłonięcie domyślnej nazwy, aby umieścić nazwę klasy w polu formularza. Wydaje mi się, że to działa:

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'

Wydaje mi się to trochę czystsze.

Jeśli chcesz, aby wszystkie pola w formularzu dziedziczyły określoną klasę, wystarczy zdefiniować klasę nadrzędną, która dziedziczy po niej forms.ModelForm, a następnie dziedziczy po niej

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

Pomogło mi to automatycznie dodać 'form-control'klasę do wszystkich pól we wszystkich formularzach mojej aplikacji, bez dodawania replikacji kodu.

Oto prosty sposób zmiany widoku. dodaj poniżej w widoku tuż przed przekazaniem go do szablonu.

form = MyForm(instance = instance.obj)
form.fields['email'].widget.attrs = {'class':'here_class_name'}

Po prostu dodaj klasy do formularza w następujący sposób.

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'
        }
    ))

Oto wariant powyższego, który da wszystkim polom tę samą klasę (np. Jquery ładne zaokrąglone rogi).

  # 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'

Możesz spróbować tego ..

class SampleClass(forms.Form):
  name = forms.CharField(max_length=30)
  name.widget.attrs.update({'class': 'your-class'})
...

Możesz zobaczyć więcej informacji w: Widżety Django

Na przykład, jeśli chcesz dodać klasę do pola formularza w szablonie (nie w view.py lub form.py), na przykład w przypadkach, gdy chcesz zmodyfikować aplikacje innych firm bez przesłonięcia ich widoków, filtr filtra zgodnie z opisem w odpowiedzi Charlesthk jest bardzo wygodna. Ale w tej odpowiedzi filtr szablonu zastępuje wszystkie istniejące klasy, które może mieć pole.

Próbowałem dodać to jako edycję, ale zasugerowano, aby napisać jako nową odpowiedź.

Oto tag szablonu, który szanuje istniejące klasy pola:

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})

Jak się okazuje, można to zrobić w konstruktorze formularzy ( funkcja init ) lub po zainicjowaniu klasy formularza. Jest to czasem wymagane, jeśli nie piszesz własnego formularza, który pochodzi z innego miejsca -

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})

Możesz także użyć Django Crispy Forms , jest to świetne narzędzie do definiowania formularzy na wypadek, gdybyś chciał użyć frameworka CSS, takiego jak Bootstrap lub Foundation. I łatwo jest tam określić klasy dla pól formularza.

Twoja klasa form chciałaby wtedy:

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'),
        )
    )