장고 형태의 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.dll:

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

예를 들어, 클래스 또는 ID를 설정하는 방법subject,email,message외부 스타일 시트를 제공하는 용도는 무엇입니까?

제 답변에서 발췌한 내용:장고에서 <div class='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'}),
        }

---
위의 내용은 질문한 내용을 수행하는 원래 질문의 코드를 가장 쉽게 변경할 수 있습니다.또한 다른 위치에서 양식을 재사용할 경우 반복되는 것을 방지합니다. 클래스나 다른 속성은 장고의 as_table/as_ul/as_p 양식 메서드를 사용할 경우에만 작동합니다.완전히 사용자 지정된 렌더링에 대한 전체 제어가 필요한 경우 이는 명확하게 문서화되어 있습니다.

2 2 ---
모델 양식에 대한 위젯 및 특성을 지정하는 새로운 방법이 추가되었습니다.

이 작업은 사용자 정의 템플릿 필터를 사용하여 수행할 수 있습니다.양식을 다음과 같이 렌더링하는 것이 좋습니다.

<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의 예는 다음과 같습니다.as_widget()방법.

정의 필터를 할 수 .addclass내_app/compatategets/myfilters.py:

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로 출력하는 양식의 문서에서 장고:

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

모든 양식 필드에 이미 고유 ID가 있습니다.따라서 CSS 파일에서 id_subject를 참조하여 제목 필드에 스타일을 지정할 수 있습니다.기본 HTML을 사용할 때 양식은 이렇게 동작합니다. 기본 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도 업데이트해야 합니다). 그러나 다음과 같이 CSS에서 ID로 모든 필드를 참조하는 것은 충분히 쉽습니다.

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

이것을 앱의 템플릿 태그/폴더에 넣으면 이제 할 수 있습니다.

{{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" }}

양식을 다음과 같이 작성합니다.

    class MyForm(forms.Form):
         name = forms.CharField(widget=forms.TextInput(attr={'class':'name'}),label="Your Name")
         message = forms.CharField(widget=forms.Textarea(attr={'class':'message'}), label="Your Message")

HTML 필드에서 다음과 같은 작업을 수행합니다.

{% for field in form %}
      <div class="row">
        <label for="{{ field.name}}">{{ field.label}}</label>{{ field }}
     </div>
{% endfor %}

그런 다음 CSS에 다음과 같은 것을 적습니다.

.name{
      /* you already have this class so create it's style form here */
}
.message{
      /* you already have this class so create it's style form here */
}
label[for='message']{
      /* style for label */
}

이 대답이 시도해 볼 가치가 있기를 바랍니다!양식이 포함된 HTML 파일을 렌더링하려면 보기를 작성해야 합니다.

할 수 있는 일:

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

를 예를 들어 에할 수 . 예를 들어<td>태그. 물론 다른 태그도 사용할 수 있습니다.예를 들어 Django 양식 작업에서 각 양식에 대해 사용할 수 있는 항목을 확인합니다.field로)){{field}}예를 들어 라벨이 아닌 입력 태그만 출력합니다.

정말로 이걸 본 적이...

https://docs.djangoproject.com/en/1.8/ref/forms/api/ #더 많은 웹사이트 출력

보다 세분화된 출력

as_p(), as_ul() 및 as_table() 메서드는 게으른 개발자를 위한 바로 가기일 뿐이며 폼 개체를 표시할 수 있는 유일한 방법은 아닙니다.

classBoundField 양식 인스턴스의 단일 필드에 대한 HTML 또는 액세스 속성을 표시하는 데 사용됩니다.

이 개체의 str()(Python 2의 유니코드) 메서드는 이 필드의 HTML을 표시합니다.

단일 BoundField를 검색하려면 필드 이름을 키로 사용하여 양식에서 사전 검색 구문을 사용합니다.

>>> form = ContactForm()
>>> print(form['subject'])
<input id="id_subject" type="text" name="subject" maxlength="100" />

모든 BoundField 개체를 검색하려면 다음 형식을 반복합니다.

>>> form = ContactForm()
>>> for boundfield in form: print(boundfield)
<input id="id_subject" type="text" name="subject" maxlength="100" />
<input type="text" name="message" id="id_message" />
<input type="email" name="sender" id="id_sender" />
<input type="checkbox" name="cc_myself" id="id_cc_myself" />

필드별 출력은 폼 개체의 auto_id 설정을 따릅니다.

>>> f = ContactForm(auto_id=False)
>>> print(f['message'])
<input type="text" name="message" />
>>> f = ContactForm(auto_id='id_%s')
>>> print(f['message'])
<input type="text" name="message" id="id_message" />

한 가지 해결책은 페이지가 준비된 후 자바스크립트를 사용하여 필요한 CSS 클래스를 추가하는 것입니다.예를 들어, 부트스트랩 클래스가 있는 django 폼 출력 스타일 지정(간단함을 위해 사용되는 jQuery):

<script type="text/javascript">
    $(document).ready(function() {
        $('#some_django_form_id').find("input[type='text'], select, textarea").each(function(index, element) {
            $(element).addClass("form-control");
        });
    });
</script>

이렇게 하면 스타일의 세부사항을 비즈니스 논리와 혼합하는 추악함을 피할 수 있습니다.

클래스 ' 양식클재필없요수을있도습니다가할정의를스래'▁your'다'를 재정의할 수도 .__init__는 고가설정때문기에하장때▁d문에▁because기▁sets하.name&id 성속input다음과 같은 CSS를 사용할 수 있습니다.

form input[name='subject'] {
    font-size: xx-large;
}

설치가 매우 쉽고 제가 스타일링에 사용하는 장고용으로 만들어진 훌륭한 도구가 있으며 부트스트랩, 머티리얼라이즈, 파운데이션 등 모든 프론트엔드 프레임워크에 사용할 수 있습니다.위젯-트위크 설명서라고 합니다.위젯 조정

1. Django의 일반 보기와 함께 사용할 수 있습니다.
2. 또는 자신만의 양식으로:

장고 수입 양식에서

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

기본값을 사용하는 대신:

{{ form.as_p }} or {{ form.as_ul }}

다음 예제처럼 좀 더 HTML과 유사한 스타일을 제공하는 render_field 특성을 사용하여 원하는 방식으로 편집할 수 있습니다.

template.vmdk

{% load widget_tweaks %}

<div class="container">
   <div class="col-md-4">
      {% render_field form.subject class+="form-control myCSSclass" placeholder="Enter your subject here" %}
   </div>
   <div class="col-md-4">
      {% render_field form.email type="email" class+="myCSSclassX myCSSclass2" %}
   </div>
   <div class="col-md-4">
      {% render_field form.message class+="myCSSclass" rows="4" cols="6" placeholder=form.message.label %}
   </div>
</div>

이 라이브러리를 사용하면 프런트 엔드를 백엔드에서 잘 분리할 수 있습니다.

Django 1.10에서는 다음과 같이 할 수 있습니다.

모델:

class Todo(models.Model):
    todo_name = models.CharField(max_length=200)
    todo_description = models.CharField(max_length=200, default="")
    todo_created = models.DateTimeField('date created')
    todo_completed = models.BooleanField(default=False)

    def __str__(self):
        return self.todo_name

양식:

class TodoUpdateForm(forms.ModelForm):
    class Meta:
        model = Todo
        exclude = ('todo_created','todo_completed')

템플릿:

<form action="" method="post">{% csrf_token %}
    {{ form.non_field_errors }}
<div class="fieldWrapper">
    {{ form.todo_name.errors }}
    <label for="{{ form.name.id_for_label }}">Name:</label>
    {{ form.todo_name }}
</div>
<div class="fieldWrapper">
    {{ form.todo_description.errors }}
    <label for="{{ form.todo_description.id_for_label }}">Description</label>
    {{ form.todo_description }}
</div>
    <input type="submit" value="Update" />
</form>

모든 필드에 대해 분류된 CSS를 쓰는 대신 더 큰 형태의 경우 가능합니다.

class UserRegistration(forms.ModelForm):
   # list charfields

   class Meta:
      model = User
      fields = ('username', 'first_name', 'last_name', 'email', 'password', 'password2')

   def __init__(self, *args, **kwargs):
      super(UserRegistration, self).__init__(*args, **kwargs)
      for field in self.fields:
         self.fields[field].widget.attrs['class'] = 'form-control'

편집: 제가 제안하는 것을 하는 또 다른 (조금 더 나은) 방법은 여기에 답이 있습니다: 장고 양식 입력 필드 스타일링.

위의 모든 옵션은 훌륭합니다, 단지 이것은 다르기 때문에 이것을 넣으려고 생각했습니다.

양식에서 사용자 정의 스타일, 클래스 등을 원하는 경우 양식 필드와 일치하는 HTML 입력을 템플리트에 작성할 수 있습니다.들어 (은 "CharField" ("CharField")입니다TextInput입력을 해 보겠습니다.은 다음과 을 할 입니다: 다과같작수수행있습다니할을.

<input type="text" class="form-control" name="form_field_name_here">

.name도 입력함) 는 , (성위입일야할해수있음치과) Django를 실행할 때 합니다.validate또는form.is_valid()그리고.

라벨, 메시지,을 스타일링하는 , 오지메및텍와같트스은다른스항목하면다을타음링일다와 같은 것들을 할 수form.field.error.as_text원하는 스타일로 스타일링할 수 있습니다.실제 필드는 약간의 조정이 필요한 필드입니다.

이것이 최선의 방법인지, 아니면 제가 추천하고 싶은 방법인지는 모르겠지만, 그것은 방법이고, 누군가에게 맞는 것일 수도 있습니다.

다음은 스타일 양식의 유용한 단계별 설명이며, SO에 나열된 대부분의 답변을 포함합니다(위젯 및 위젯 조정의 특성 사용 등).https://simpleisbetterthancomplex.com/article/2017/08/19/how-to-render-django-form-manually.html

스타일 지정 위젯 인스턴스

하나의 위젯 인스턴스를 다른 위젯 인스턴스와 다르게 표시하려면 위젯 개체가 인스턴스화되고 양식 필드에 할당될 때 추가 속성을 지정해야 합니다(그리고 CSS 파일에 규칙을 추가할 수도 있습니다).

https://docs.djangoproject.com/en/2.2/ref/forms/widgets/

이렇게 하려면 위젯을 만들 때 Widget.attrs 인수를 사용합니다.

class CommentForm(forms.Form):
    name = forms.CharField(widget=forms.TextInput(attrs={'class': 'special'}))
    url = forms.URLField()
    comment = forms.CharField(widget=forms.TextInput(attrs={'size': '40'}))

양식 정의에서 위젯을 수정할 수도 있습니다.

class CommentForm(forms.Form):
    name = forms.CharField()
    url = forms.URLField()
    comment = forms.CharField()

    name.widget.attrs.update({'class': 'special'})
    comment.widget.attrs.update(size='40')

또는 필드가 양식에 직접 선언되지 않은 경우(예: 모델 양식 필드) Form.fields 특성을 사용할 수 있습니다.

class CommentForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['name'].widget.attrs.update({'class': 'special'})
        self.fields['comment'].widget.attrs.update(size='40')

그런 다음 Django는 렌더링된 출력에 추가 속성을 포함합니다.

>>> f = CommentForm(auto_id=False)
>>> f.as_table()
<tr><th>Name:</th><td><input type="text" name="name" class="special" required></td></tr>
<tr><th>Url:</th><td><input type="url" name="url" required></td></tr>
<tr><th>Comment:</th><td><input type="text" name="comment" size="40" required></td></tr>

앱 전체에서 일관성을 유지하기 위해 이 솔루션을 사용했습니다.

def bootstrap_django_fields(field_klass, css_class):
    class Wrapper(field_klass):
        def __init__(self, **kwargs):
            super().__init__(**kwargs)

        def widget_attrs(self, widget):
            attrs = super().widget_attrs(widget)
            if not widget.is_hidden:
                attrs["class"] = css_class
            return attrs

    return Wrapper


MyAppCharField = bootstrap_django_fields(forms.CharField, "form-control")

그러면 양식별로 CSS 클래스를 정의할 필요가 없습니다. 사용자 정의 양식 필드를 사용하십시오.

---

기술적으로 장고의 정의를 재정의하는 것도 가능합니다.forms시작 시 클래스는 다음과 같습니다.

forms.CharField = bootstrap_django_fields(forms.CharField, "form-control")

그러면 직접 제어하지 않는 앱에 대해서도 전체적으로 스타일링을 설정할 수 있습니다.이것은 꽤 대충 만든 것 같아서 제가 이것을 추천할 수 있을지 모르겠습니다.

언급URL : https://stackoverflow.com/questions/5827590/css-styling-in-django-forms