Django Forms'da css sınıfını tanımlama

Bir formum olduğunu varsayın

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

Benim işlenmiş sayfamda sınıfa dayalı jQuery kullanabilirsiniz böylece her alanda css sınıfları tanımlamak için bir yolu var mı?

El ile formu oluşturmak zorunda değil umuyordum.

Python kodunda değişiklik gerektirmeyen ve böylece tasarımcılar ve bir kerelik sunum değişiklikleri için daha iyi olan başka bir çözüm: django-widget-tweaks . Umarım biri faydalı bulur.

Kendi sorumu yanıtladı. İç çekmek

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

Widget yapıcısına geçtiğini fark etmedim.

Sınıftaki alanları bildirdikten sonra widget'lara sınıf tanımları eklemek için başka bir çözüm.

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

Django-widget-tweaks kullanın , kullanımı kolaydır ve oldukça iyi çalışır.

Aksi takdirde, bu özel bir şablon filtresi kullanılarak yapılabilir.

Formunuzu şu şekilde oluşturduğunuzu düşünürsek:

<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, as_widget yöntemine sahip bir BoundField örneğidir .

"my_app / templatetags / myfilters.py" klasöründe özel bir "addcss" filtresi oluşturabilirsiniz

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

Ardından filtrenizi uygulayın:

{% 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 daha sonra "MyClass" css sınıfıyla oluşturulur.

Umarım bu yardım.

DÜZENLEME 1

• Göre Filtreyi güncelle dimyG bireyin cevap

• Django-widget-tweak bağlantısı ekle

DÜZENLEME 2

• Filtreyi Bhyd adlı kullanıcının yorumuna göre güncelle

Yöntemin genişletilmesi docs.djangoproject.com adresine işaret etti:

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

Her alan için yerel widget türünü bilmek zahmetli olduğunu düşündüm ve sadece bir form alanına bir sınıf adı koymak için varsayılan geçersiz kılmak komik düşündüm. Bu benim için işe yarıyor gibi görünüyor:

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'

Bu benim için biraz daha temiz görünüyor.

Belirli bir sınıf miras formda bulunan tüm alanları isterseniz, sadece bir üst sınıf, o devralır tanımlamak forms.ModelFormve sonra ondan devralan

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

Bu, 'form-control'sınıfı, kod çoğaltması eklemeden, uygulamamın tüm formlarındaki tüm alanlara otomatik olarak eklememe yardımcı oldu.

İşte görünümde değiştirmek için basit bir yol. şablona geçmeden hemen önce görünümde ekleyin.

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

Sınıfları formunuza aşağıdaki gibi eklemeniz yeterlidir.

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

Yukarıda tüm alanlara aynı sınıfı verecek bir varyasyon var (örn. Jquery güzel yuvarlak köşeler).

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

Bunu deneyebilirsiniz ..

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

Daha fazla bilgi için: Django Widget'ları

Şablondaki bir formun alanına (view.py veya form.py içinde değil) bir sınıf eklemek istediğinizde, örneğin 3. taraf uygulamalarını görünümlerini geçersiz kılmaksızın değiştirmek istediğiniz durumlarda, ardından açıklandığı gibi bir şablon filtresi içinde Charlesthk cevap çok uygundur. Ancak bu yanıtta şablon filtresi, alanın sahip olabileceği tüm sınıfları geçersiz kılar.

Bunu düzenleme olarak eklemeye çalıştım, ancak yeni bir cevap olarak yazılması önerildi.

İşte, alanın mevcut sınıflarına saygı duyan bir şablon etiketi:

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

Görüldüğü gibi bunu form yapıcısında ( init işlevi) veya form sınıfı başlatıldıktan sonra yapabilirsiniz. Kendi formunuzu yazmıyorsanız ve bu form başka bir yerden geliyorsa bu bazen gereklidir -

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

Django Çıtır Formlarını da kullanabilirsiniz , Bootstrap veya Foundation gibi bazı CSS çerçevelerini kullanmak istemeniz durumunda formları tanımlamak için harika bir araçtır. Ve orada form alanlarınız için sınıfları belirtmek kolaydır.

Form sınıfınız şu şekilde:

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