Tentukan kelas css dalam Formulir Django

Anggaplah saya memiliki formulir

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

Apakah ada cara bagi saya untuk mendefinisikan kelas css pada masing-masing bidang sehingga saya dapat menggunakan jQuery berdasarkan kelas di halaman yang diberikan?

Saya berharap tidak harus secara manual membangun formulir.

Namun solusi lain yang tidak memerlukan perubahan dalam kode python dan karena itu lebih baik untuk desainer dan perubahan presentasi satu kali: django-widget-tweaks . Semoga ada yang berguna.

Menjawab pertanyaan saya sendiri. Mendesah

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

Saya tidak menyadari itu dilewatkan ke konstruktor widget.

Berikut adalah solusi lain untuk menambahkan definisi kelas ke widget setelah mendeklarasikan bidang di kelas.

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

Gunakan django-widget-tweak , mudah digunakan dan berfungsi dengan baik.

Kalau tidak, ini bisa dilakukan menggunakan filter templat kustom.

Mengingat Anda membuat formulir Anda dengan cara ini:

<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 adalah turunan dari BoundField yang memiliki metode as_widget .

Anda dapat membuat filter khusus "addcss" di "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})

Lalu terapkan filter Anda:

{% 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 kemudian akan diberikan dengan kelas css "MyClass".

Semoga bantuan ini.

EDIT 1

• Perbarui filter sesuai dengan jawaban dimyG

• Tambahkan tautan django-widget-tweak

EDIT 2

• Perbarui filter sesuai dengan komentar Bhyd

Memperluas metode yang ditunjukkan pada docs.djangoproject.com:

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

Saya pikir itu merepotkan karena harus mengetahui jenis widget asli untuk setiap bidang, dan menganggapnya lucu untuk mengesampingkan default hanya dengan meletakkan nama kelas pada bidang formulir. Ini sepertinya bekerja untuk saya:

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'

Ini agak bersih bagi saya.

Jika Anda ingin semua bidang dalam formulir mewarisi kelas tertentu, Anda cukup mendefinisikan kelas induk, yang mewarisi dari forms.ModelForm, dan kemudian mewarisi dari itu

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

Ini membantu saya untuk menambahkan 'form-control'kelas ke semua bidang pada semua bentuk aplikasi saya secara otomatis, tanpa menambahkan replikasi kode.

Berikut adalah cara sederhana untuk mengubah tampilan. tambahkan di bawah ini tepat sebelum meneruskannya ke templat.

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

Cukup tambahkan kelas ke formulir Anda sebagai berikut.

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

Berikut adalah variasi di atas yang akan memberikan semua bidang kelas yang sama (misalnya sudut bulat bagus jquery).

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

Anda bisa coba ini ..

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

Anda dapat melihat informasi lebih lanjut di: Django Widgets

Jika Anda ingin menambahkan kelas ke bidang formulir di Templat (bukan di view.py atau form.py) misalnya dalam kasus yang Anda ingin memodifikasi aplikasi pihak ke-3 tanpa mengesampingkan tampilan mereka, maka filter template seperti yang dijelaskan dalam jawaban Charlesthk sangat nyaman. Tetapi dalam jawaban ini filter templat menimpa kelas yang ada yang mungkin dimiliki bidang.

Saya mencoba menambahkan ini sebagai suntingan tetapi disarankan untuk ditulis sebagai jawaban baru.

Jadi, inilah tag templat yang menghormati kelas bidang yang ada:

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

Ternyata Anda bisa melakukan ini dalam bentuk konstruktor ( fungsi init ) atau setelah kelas bentuk dimulai. Ini kadang-kadang diperlukan jika Anda tidak menulis formulir Anda sendiri dan formulir itu datang dari tempat lain -

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

Anda juga bisa menggunakan Django Crispy Forms , ini adalah alat yang hebat untuk mendefinisikan formulir jika Anda ingin menggunakan beberapa kerangka kerja CSS seperti Bootstrap atau Foundation. Dan mudah untuk menentukan kelas untuk bidang formulir Anda di sana.

Kelas formulir Anda akan menyukai ini:

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