Definieren Sie CSS-Klasse in django Forms

Question

Angenommen, ich habe ein Formular

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

Gibt es eine Möglichkeit für mich, CSS-Klassen für jedes Feld so zu definieren, dass ich dann jQuery basierend auf Klasse in meiner gerenderten Seite verwenden kann?

Ich habe gehofft, nicht zu haben, um das Formular manuell zu erstellen.

Answer 1

meine eigene Frage beantwortet. Sigh

http: //docs.djangoproject .com / de / dev / ref / forms / Widgets / # django.forms.Widget.attrs

Ich wusste nicht, es wurde in das Widget-Konstruktor übergeben.

Answer 2

Noch eine andere Lösung, die Änderungen erfordert nicht in Python-Code und so ist besser für Designer und Einmal Präsentations Änderungen: django-widget-Tweaks . Hoffe, dass jemand es nützlich finden werden.

Answer 3

Hier ist ein andere Lösung für das Hinzufügen von Klassendefinitionen zu den Widgets nach den Feldern in der Klasse deklariert.

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

Answer 4

Verwenden Sie django-widget-Tweaks , es ist einfach sehr gut zu bedienen und funktioniert.

Ansonsten kann dies einen eigenen Template Filter durchgeführt werden.

In Anbetracht Sie Ihr Formular auf diese Weise machen:

<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 ist eine Instanz von Boundfield , die die as_widget Methode hat.

Sie können einen benutzerdefinierten Filter "addcss" in "my_app / templatetags / myfilters.py"

erstellen

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

Und dann wenden Sie Ihre Filter:

{% 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 wird dann mit der "MyClass" CSS-Klasse gemacht werden.

Hoffe diese Hilfe.

EDIT 1

• Update-Filter nach dimyG 's Antwort

• In django-widget-zwicken Link

EDIT 2

• Update-Filter nach Bhyd 's Kommentar

Answer 5

Aufbauend auf der Methode zeigte auf bei docs.djangoproject.com:

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

Ich dachte, es lästig war das native Widget-Typ für jedes Feld zu haben, zu wissen, und dachte, es lustig die Standardeinstellung außer Kraft setzen nur einen Klassennamen auf ein Formularfeld zu setzen. Dies scheint für mich zu arbeiten:

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'

Dies scheint ein wenig sauberer zu mir.

Answer 6

Wenn Sie alle Felder im Formular wollen eine bestimmte Klasse zu erben, müssen Sie nur eine Elternklasse definieren, die von forms.ModelForm erbt und dann von ihm erben

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

Das half mir die 'form-control' Klasse alle Felder auf alle Formen von meiner Anwendung automatisch hinzuzufügen, ohne die Replikation von Code hinzufügen.

Answer 7

Hier ist einfach Art und Weise im Hinblick auf zu verändern. unten in Sicht hinzufügen, kurz bevor es in Vorlage übergeben.

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

Answer 8

Sie einfach die Klassen zu Ihrem Formular hinzufügen, wie folgt.

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

Answer 9

Hier ist eine Variante der obigen, die allen Feldern die gleiche Klasse geben werden (zum Beispiel jquery schön abgerundete Ecken).

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

Answer 10

Wenn Sie eine Klasse zu einem Formular-Feld in einer Vorlage hinzufügen möchten (nicht in view.py oder form.py) zum Beispiel in Fällen, die Sie 3rd party apps ändern wollen, ohne ihre Ansichten überschreiben, dann ein Template-Filter, wie in Charlesthk beantworten sehr bequem ist. Aber in dieser Antwort der Template Filter überschreibt alle vorhandenen Klassen, die das Feld Macht hat.

Ich habe versucht, dies als bearbeiten hinzuzufügen, aber es wurde vorgeschlagen, als eine neue Antwort geschrieben werden.

So, hier ist ein Template-Tag, das die vorhandenen Klassen des Feldes respektiert:

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

Answer 11

Sie können versuchen, diese ..

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

Sie finden weitere Informationen in finden Sie unter: Django Widgets

Answer 12

Wie sich herausstellt Sie können dies tun, in Form Konstruktor ( init -Funktion) oder nach dem Formularklasse initiiert wurde. Dies wird manchmal benötigt, wenn Sie nicht Ihre eigene Form zu schreiben und diese Form kommt von woanders -

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

Answer 13

Sie auch Django Knusprige Forms verwenden könnte, ist es eine große Werkzeug, um Formen für den Fall definieren Sie möchten einige CSS-Framework wie Bootstrap oder Stiftung verwenden. Und es ist leicht es Klassen für Ihre Formularfelder angeben.

Ihre Form Klasse möchte diese dann:

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