다음 스타일을 지정하고 싶습니다.
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}}, 예를 들어 바로 입력 태그가 아닌 라벨 등을 출력한다).
