django Forms에서 css 클래스를 정의합니다.

django Forms에서 css 클래스를 정의합니다.

내가 폼을 가지고 있다고 가정해봐

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

각 필드에 css 클래스를 정의하여 렌더링된 페이지에서 클래스를 기반으로 jQuery를 사용할 수 있는 방법이 있습니까?

폼을 수동으로 만들지 않아도 될 것 같아서요.

그러나 python 코드의 변경이 필요하지 않기 때문에 디자이너나 프레젠테이션의 일회성 변경에는 django-widget-tweaks가 더 좋습니다.누군가 유용하게 써주길 바라.

내 질문에 답을 했다.하아

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

위젯 컨스트럭터에 전달된 줄은 몰랐습니다.

다음은 클래스의 필드를 선언한 후 위젯에 클래스 정의를 추가하기 위한 다른 솔루션입니다.

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

django-widget-tweaks를 사용하면 사용하기 쉽고 효과가 좋습니다.

그렇지 않으면 커스텀템플릿 필터를 사용하여 실행할 수 있습니다.

다음과 같이 폼을 렌더링합니다.

<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 메서드를 가진 BoundField 인스턴스입니다.

"my_app/mycatetags/myfilters.py"에서 커스텀 필터 "addcss"를 생성할 수 있습니다.

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

그런 다음 필터를 적용합니다.

{% 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는 "MyClass" css 클래스로 렌더링됩니다.

이게 도움이 됐으면 좋겠다.

편집 1

• dimyG의 답변에 따라 필터 업데이트

• django-widget-tweak 링크 추가

편집 2

• Bhyde의 코멘트에 따라 필터 업데이트

폼의 모든 필드가 특정 클래스를 상속하도록 하려면 다음에서 상속하는 상위 클래스를 정의하기만 하면 됩니다.forms.ModelForm그 후 상속합니다.

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

이 기능을 통해,'form-control'코드 복제를 추가하지 않고 자동으로 내 응용 프로그램의 모든 양식에 있는 모든 필드에 클래스를 적용합니다.

docs.djangoproject.com에 기재되어 있는 방법을 확장합니다.

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

필드마다 네이티브 위젯 유형을 알아야 하는 것은 번거롭고 폼 필드에 클래스 이름을 넣는 것만으로 기본값을 덮어쓰는 것은 재미있다고 생각했습니다.이 방법이 효과가 있는 것 같습니다.

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'

이건 좀 더 깨끗한 것 같아요.

다음과 같이 양식에 클래스를 추가하십시오.

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

다음은 보기 변경의 간단한 방법입니다.템플릿으로 전달하기 직전에 뷰에 추가합니다.

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

이거 드셔보세요.

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

자세한 내용은 Django 위젯을 참조하십시오.

다음은 모든 필드에 동일한 클래스를 부여하는 위의 변형입니다(예: jquery nice 둥근 모서리).

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

예를 들어 타사 앱의 보기를 재정의하지 않고 수정하려는 경우 템플릿(view.py 또는 form.py이 아닌)에 있는 폼 필드에 클래스를 추가하는 경우 Charleshk 응답에 설명된 템플릿 필터가 매우 편리합니다.그러나 이 응답에서는 템플릿필터가 필드에 있을 수 있는 기존 클래스를 덮어씁니다.

저는 이것을 편집으로 추가하려고 했지만, 새로운 답변으로 쓰라고 제안받았습니다.

필드의 기존 클래스를 지원하는 템플릿태그를 다음에 나타냅니다.

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

이는 폼 컨스트럭터(init 함수) 또는 폼 클래스가 시작된 후에 실행할 수 있습니다.사용자가 직접 양식을 작성하지 않고 다른 곳에서 양식을 작성해야 하는 경우 이 작업이 필요할 수 있습니다.

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 Crispy Forms를 사용할 수도 있습니다.이것은 부트스트랩이나 Foundation과 같은 CSS 프레임워크를 사용하고 싶은 경우에 폼을 정의하는 훌륭한 도구입니다.또한 양식 필드에 대한 클래스를 쉽게 지정할 수 있습니다.

양식 클래스는 다음과 같습니다.

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

모든 종류의 입력 필드에 대한 스타일 옵션을 여기에서 얻을 수 있습니다.

위젯은 HTML 입력 요소의 Django 표현입니다.위젯은 HTML 렌더링 및 위젯에 해당하는 GET/POST 사전에서 데이터 추출을 처리합니다.

email = forms.EmailField(label='Your email', widget=forms.EmailInput(attrs={'class': 'ui segment teal'}))

ModelForm을 사용하고 필드 속성에 필수 필드를 포함하면 해당 필드에 대한 css 클래스를 정의할 수 있습니다.다른 입력 필드에 대해 다른 유형의 css 클래스를 원했기 때문에 이 방법은 'for loop' 메서드보다 더 잘 작동했습니다.

fields = ( 'date', 'title'),
widgets = {'date': forms.DateInput(attrs={'class': 'datepicker'}),
          'title': forms.TextInput(attrs={'class': 'title'})}

또는 양식 클래스의 생성자를 통해 설정을 시도할 수도 있습니다.

def __init__(self, *args, **kwargs):
       super().__init__(*args, **kwargs)
       self.fields['date'].widget.attrs.update({'class': 'datepicker'})
       self.fields['title'].widget.attrs.update({'class':'title'})

언급URL : https://stackoverflow.com/questions/401025/define-css-class-in-django-forms