Aşağıdakileri şekillendirmek istiyorum:

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>

Örneğin, nasıl bir ayarlarım sınıf veya kimliği için subject, email, messageharici stil sayfası sağlamak için?

: Cevabım Alınan <div class = 'field_type'> Django ile form alanları biçimlendirme nasıl

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

veya

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

veya

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

--- DÜZENLE ---
Yukarıdakiler, sorulan şeyi gerçekleştiren orijinal soru kodunda yapılacak en kolay değişikliktir. Ayrıca formu başka yerlerde tekrar kullanırsanız kendinizi tekrarlamaktan da alıkoyar; Django'nun as_table / as_ul / as_p form yöntemlerini kullanırsanız sınıflarınız veya diğer öznitelikleriniz çalışır. Tamamen özel bir işleme için tam kontrole ihtiyacınız varsa, bu açıkça belgelenmiştir

- DÜZENLEME 2 ---
Bir ModelForm için pencere öğesi ve öznitelikleri belirtmenin daha yeni bir yolu eklendi.

Bu, özel bir şablon filtresi kullanılarak yapılabilir. Formunuzu şu şekilde oluşturmayı düşünün:

<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.subjectyöntemi BoundFieldolan bir örnektir as_widget().

My_app / templatetags / myfilters.pyaddclass içinde özel bir filtre oluşturabilirsiniz :

from django import template

register = template.Library()

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

Ve sonra filtrenizi uygulayın:

{% 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.subjectsdaha sonra MyClassCSS sınıfı ile işlenecektir .

Forma herhangi bir kod eklemek istemiyorsanız (@ shadfc'nin Cevabına yapılan yorumlarda belirtildiği gibi), kesinlikle mümkündür, işte iki seçenek.

İlk olarak, tek seferde formun tamamı yerine HTML'deki alanlara tek tek başvurursunuz:

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

(Ayrıca sıralanmamış bir liste olarak değiştirdiğimi de unutmayın .)

İkinci olarak, formların çıktısını HTML , Django olarak almakla ilgili dokümanlardaki not :

Alan kimliği, Alan adının başına 'id_' eklenerek oluşturulur. İd nitelikleri ve etiketleri varsayılan olarak çıktıya dahil edilir.

Tüm form alanlarınızın zaten benzersiz bir kimliği var . Dolayısıyla , konu alanını biçimlendirmek için CSS dosyanızda id_subject'e başvurursunuz . Unutmamalıyım, varsayılan HTML'yi aldığınızda formun nasıl davrandığı , tek tek alanları değil, yalnızca formu yazdırmayı gerektirir:

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

Formların çıktısını alırken diğer seçenekler için önceki bağlantıya bakın (tablolar vb. Yapabilirsiniz).

Not - Bunun her öğeye bir sınıf eklemekle aynı olmadığını anlıyorum (Forma bir alan eklediyseniz, CSS'yi de güncellemeniz gerekir) - ancak tüm alanlara id ile başvurmak yeterince kolaydır CSS'nizde şöyle:

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

Başına bu blog yayınında, özel bir şablon filtresi kullanarak alanlara css sınıfları ekleyebilir.

from django import template
register = template.Library()

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

Bunu uygulamanızın templatetags / klasörüne koyun ve şimdi yapabilirsiniz

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

Bunu beğenebilirsin:

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

Umarım işe yarar.

Ignas

Bu kitaplığı kullanabilirsiniz: https://pypi.python.org/pypi/django-widget-tweaks

Aşağıdakileri yapmanızı sağlar:

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

Yapabilirsin:

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

Daha sonra, örneğin <td>etikete sınıflar / id'ler ekleyebilirsiniz . Elbette istediğiniz diğer etiketleri de kullanabilirsiniz. Kontrol Django formları ile Çalışma her biri için mevcut olanı örnek olarak field(formda {{field}}örneğin sadece giriş etiketini değil, etiket ve benzeri çıktısı).

Formunuzu şöyle yazın:

    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 alanınızda şuna benzer bir şey yapın:

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

Ardından CSS'nizde şöyle bir şey yazın:

.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 */
}

Umarım bu cevap denemeye değerdir! Formu içeren HTML dosyasını oluşturmak için görünümlerinizi yazmış olmanız gerektiğini unutmayın.

Bunu gerçekten görmedim ...

https://docs.djangoproject.com/en/1.8/ref/forms/api/#more-granular-output

Daha ayrıntılı çıktı

As_p (), as_ul () ve as_table () yöntemleri tembel geliştiriciler için kısayollardır - bir form nesnesinin görüntülenmesinin tek yolu bunlar değildir.

class BoundField Bir Form örneğinin tek bir alanı için HTML'yi görüntülemek veya niteliklere erişmek için kullanılır.

Str () ( unicode bu nesne görüntüler bu alan için HTML yöntemine Python 2).

Tek bir BoundField almak için, alan adını anahtar olarak kullanarak formunuzda sözlük arama sözdizimini kullanın:

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

Tüm BoundField nesnelerini almak için formu yineleyin:

>>> 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" />

Alana özgü çıktı, form nesnesinin auto_id ayarına uygundur:

>>> 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" />

Çözümlerden biri, sayfa hazır olduktan sonra gerekli CSS sınıflarını eklemek için JavaScript kullanmaktır. Örneğin, django form çıktısının önyükleme sınıfları ile stilize edilmesi (kısalık için jQuery kullanılır):

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

Bu, stil özelliklerini iş mantığınızla karıştırmanın çirkinliğini önler.

Form sınıfınızı geçersiz kılmanız gerekmeyebilir __init__, çünkü Django HTML’lerde name& idöznitelikleri ayarlar input. Bunun gibi CSS'ye sahip olabilirsiniz:

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

Django için kurulumu çok kolay ve harika bir araç var ve bu araç Bootstrap, Materialize, Foundation vb. Gibi her ön uç çerçevesi için kullanılabilir. Buna widget-tweaks adı verilir Belgeleme: Widget Tweaks

1. Django'nun genel görünümleriyle kullanabilirsiniz.
2. Veya kendi formlarınızla:

django içe aktarma formlarından

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

Varsayılanı kullanmak yerine:

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

Bu örnekte olduğu gibi size daha html benzeri bir biçimlendirme sağlayan render_field özelliğini kullanarak bunu kendi yönteminizle düzenleyebilirsiniz:

template.html

{% 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>

Bu kütüphane, ön ucunuzu arka ucunuzdan iyice ayırma fırsatı verir.

Django 1.10'da (muhtemelen daha önce de) bunu aşağıdaki gibi yapabilirsiniz.

Model:

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

Form:

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

Şablon:

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

Düzenleme: Önerdiğim şeyi yapmanın başka bir (biraz daha iyi) yolu burada yanıtlanıyor: Django form girdi alanı stili

Yukarıdaki tüm seçenekler harika, sadece farklı olduğu için bunu atayım dedim.

Formlarınızda özel stil, sınıflar vb. İstiyorsanız, şablonunuzda form alanınızla eşleşen bir html girişi yapabilirsiniz. Örneğin, bir CharField için (varsayılan widget TextInput), önyükleme görünümlü bir metin girişi istediğinizi varsayalım . Bunun gibi bir şey yaparsınız:

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

Ve form alanı adını html nameniteliğiyle eşleştirdiğiniz sürece (ve widget muhtemelen giriş tipiyle de eşleşmelidir) Django, çalıştırdığınızda o alanda aynı doğrulayıcıları çalıştırır validateveya form.is_valid()ve

Etiketler, hata mesajları ve yardım metni gibi diğer şeyleri biçimlendirmek çok geçici çözüm gerektirmez çünkü istediğiniz gibi form.field.error.as_textbunları yapabilir ve onlara stil verebilirsiniz. Gerçek alanlar, biraz uğraşmayı gerektiren alanlardır.

Bunun en iyi yol mu, yoksa benim önereceğim yol mu olduğunu bilmiyorum, ama bu bir yol ve birisi için doğru olabilir.

İşte şekillendirme formları için faydalı bir adım adım açıklamalı kılavuz ve SO'da listelenen yanıtların çoğunu içerir (örneğin, widget'larda ve widget ayarlarında attr'ı kullanma). https://simpleisbetterthancomplex.com/article/2017/08/19/how-to-render-django-form-manually.html

Widget örneklerinin stilini belirleme

Bir pencere öğesi örneğinin diğerinden farklı görünmesini istiyorsanız, pencere öğesi nesnesinin somutlaştırıldığı ve bir form alanına atandığı sırada ek nitelikler belirlemeniz (ve belki de CSS dosyalarınıza bazı kurallar eklemeniz) gerekir.

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

Bunu yapmak için, pencere öğesini oluştururken Widget.attrs argümanını kullanırsınız:

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

Ayrıca, form tanımındaki bir pencere öğesini de değiştirebilirsiniz:

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

Veya alan doğrudan form üzerinde bildirilmezse (model form alanları gibi), Form.fields özniteliğini kullanabilirsiniz:

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 daha sonra işlenen çıktıya ekstra nitelikleri dahil edecektir:

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