[css] 장고 양식의 CSS 스타일링

다음 스타일을 지정하고 싶습니다.

forms.py :

from django import forms

class ContactForm(forms.Form):
    subject = forms.CharField(max_length=100)
    email = forms.EmailField(required=False)
    message = forms.CharField(widget=forms.Textarea)

contact_form.html :

<form action="" method="post">
  <table>
    {{ form.as_table }}
  </table>
  <input type="submit" value="Submit">
</form>

예를 들어, 어떻게 내가 설정하는 클래스 또는 ID가 을 위해 subject, email, message에 외부 스타일 시트를 제공하기 위해?



답변

: 내 대답에서 촬영
<DIV 클래스 = ‘field_type’> 장고와 양식 필드를 마크 업하는 방법

class MyForm(forms.Form):
    myfield = forms.CharField(widget=forms.TextInput(attrs={'class' : 'myfieldclass'}))

또는

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel

    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        self.fields['myfield'].widget.attrs.update({'class' : 'myfieldclass'})

또는

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel
        widgets = {
            'myfield': forms.TextInput(attrs={'class': 'myfieldclass'}),
        }

— 편집 —
위의 내용은 질문을 수행하는 원래 질문의 코드를 변경하는 가장 쉬운 방법입니다. 또한 다른 장소에서 양식을 재사용 할 경우 자신을 반복하지 못하게합니다. Django의 as_table / as_ul / as_p 양식 메소드를 사용하는 경우 클래스 또는 기타 속성이 작동합니다. 완전히 커스텀 렌더링을 위해 모든 권한이 필요한 경우, 명확하게 문서화됩니다

-편집 2 —
ModelForm에 위젯과 속성을 지정하는 새로운 방법을 추가했습니다.


답변

이 작업은 사용자 정의 템플릿 필터를 사용하여 수행 할 수 있습니다. 이 방법으로 양식을 렌더링하십시오.

<form action="/contact/" method="post">
  {{ form.non_field_errors }}
  <div class="fieldWrapper">
    {{ form.subject.errors }}
    {{ form.subject.label_tag }}
    {{ form.subject }}
    <span class="helptext">{{ form.subject.help_text }}</span>
  </div>
</form>

form.subject의 인스턴스 BoundField갖는 as_widget()방법.

my_app / templatetags / myfilters.pyaddclass 에서 사용자 정의 필터 를 만들 수 있습니다 .

from django import template

register = template.Library()

@register.filter(name='addclass')
def addclass(value, arg):
    return value.as_widget(attrs={'class': arg})

그런 다음 필터를 적용하십시오.

{% load myfilters %}

<form action="/contact/" method="post">
  {{ form.non_field_errors }}
  <div class="fieldWrapper">
    {{ form.subject.errors }}
    {{ form.subject.label_tag }}
    {{ form.subject|addclass:'MyClass' }}
    <span class="helptext">{{ form.subject.help_text }}</span>
  </div>
</form>

form.subjects그런 다음 MyClassCSS 클래스 로 렌더링됩니다 .


답변

추가하지 않으려면 어떤 (shadfc의 대답 @에 코멘트에서 언급 한 바와 같이) 폼에 코드를, 그것은 확실히 가능하며, 여기에 두 가지 옵션이 있습니다.

먼저 한 번에 전체 양식이 아닌 HTML에서 개별적 으로 필드를 참조하면됩니다 .

<form action="" method="post">
    <ul class="contactList">
        <li id="subject" class="contact">{{ form.subject }}</li>
        <li id="email" class="contact">{{ form.email }}</li>
        <li id="message" class="contact">{{ form.message }}</li>
    </ul>
    <input type="submit" value="Submit">
</form>

(또한 정렬되지 않은 목록으로 변경했습니다 .)

둘째, HTML , Django 로 양식출력 하는 문서에서 참고하십시오 .

필드 ID는 필드 이름 앞에 ‘id_’를 추가하여 생성됩니다. id 속성 및 태그는 기본적으로 출력에 포함됩니다.

모든 양식 필드에는 이미 고유 한 ID가 있습니다. 따라서 CSS 파일에서 id_subject 를 참조 하여 주제 필드의 스타일을 지정하십시오 . 난 당신이 걸릴 때이 방법 양식 동작합니다입니다,주의해야 기본 단지 형태가 아닌 개별 필드를 인쇄 할 필요 HTML을 :

<ul class="contactList">
    {{ form }}  # Will auto-generate HTML with id_subject, id_email, email_message 
    {{ form.as_ul }} # might also work, haven't tested
</ul>

양식을 출력 할 때 다른 옵션에 대해서는 이전 링크를 참조하십시오 (테이블 등을 수행 할 수 있음).

참고-이것은 각 요소에 클래스 를 추가하는 것과 같지 않다는 것을 알고 있습니다 (양식에 필드를 추가 한 경우 CSS도 업데이트해야 함) -id로 모든 필드를 쉽게 참조 할 수 있습니다. CSS에서 다음과 같이 :

#id_subject, #id_email, #email_message 
{color: red;}


답변

블로그 게시물, 사용자 정의 템플릿 필터를 사용하여 필드에 CSS 클래스를 추가 할 수 있습니다.

from django import template
register = template.Library()

@register.filter(name='addcss')
def addcss(field, css):
    return field.as_widget(attrs={"class":css})

이것을 앱의 templatetags / 폴더에 넣으면 이제 할 수 있습니다

{{field|addcss:"form-control"}}


답변

당신은 이렇게 할 수 있습니다 :

class ContactForm(forms.Form):
    subject = forms.CharField(max_length=100)
    subject.widget.attrs.update({'id' : 'your_id'})

그것이 효과가 있기를 바랍니다.

이그나 스


답변

이 라이브러리를 사용할 수 있습니다 : https://pypi.python.org/pypi/django-widget-tweaks

다음을 수행 할 수 있습니다.

{% load widget_tweaks %}
<!-- add 2 extra css classes to field element -->
{{ form.title|add_class:"css_class_1 css_class_2" }}


답변

넌 할 수있어:

<form action="" method="post">
    <table>
        {% for field in form %}
        <tr><td>{{field}}</td></tr>
        {% endfor %}
    </table>
    <input type="submit" value="Submit">
</form>

그런 다음 <td>태그 와 같은 클래스 / ID를 추가 할 수 있습니다 . 물론 원하는 다른 태그를 사용할 수 있습니다. 확인 장고 형태의 작업을 각각 사용할 것을 예로 field(형태 {{field}}, 예를 들어 바로 입력 태그가 아닌 라벨 등을 출력한다).