ฉันต้องการสไตล์ดังต่อไปนี้:

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 class = 'field_type'> ใน Django

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 ของ Django หากคุณต้องการการควบคุมเต็มรูปแบบสำหรับการเรนเดอร์แบบกำหนดเองทั้งหมดนี่เป็นเอกสารที่ชัดเจน

- แก้ไข 2 ---
เพิ่มวิธีใหม่ในการระบุวิดเจ็ตและ attrs สำหรับ 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()วิธีการ

คุณสามารถสร้างตัวกรองที่กำหนดเองได้addclassในmy_app / templatetags / 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จะถูกแสดงผลด้วยMyClassคลาส CSS

หากคุณไม่ต้องการที่จะเพิ่มใด ๆรหัสในรูปแบบ (ตามที่กล่าวไว้ในการแสดงความคิดเห็นเป็น @ คำตอบของ 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_subjectในไฟล์ CSS ของคุณเพื่อจัดรูปแบบฟิลด์หัวเรื่อง ฉันควรทราบว่านี่เป็นวิธีการทำงานของแบบฟอร์มเมื่อคุณใช้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_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'})

หวังว่าจะได้ผล

Ignas

คุณสามารถใช้ห้องสมุดนี้: 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>

จากนั้นคุณสามารถเพิ่มคลาส / id ของตัวอย่างเช่น<td>แท็ก แน่นอนคุณสามารถใช้แท็กอื่น ๆ ที่คุณต้องการ ตรวจสอบการทำงานกับแบบฟอร์ม Djangoเป็นตัวอย่างสิ่งที่มีให้สำหรับแต่ละfieldรูปแบบ ( {{field}}ตัวอย่างเช่นเพียงแค่แสดงแท็กอินพุตไม่ใช่ป้ายกำกับและอื่น ๆ )

ทางออกหนึ่งคือการใช้ JavaScript เพื่อเพิ่มคลาส CSS ที่จำเป็นหลังจากที่หน้าพร้อม ตัวอย่างเช่นการจัดแต่งทรงผมเอาท์พุทแบบฟอร์ม django พร้อมคลาส bootstrap (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>

สิ่งนี้หลีกเลี่ยงความน่าเกลียดของการผสมผสานสไตล์เฉพาะกับตรรกะทางธุรกิจของคุณ

เขียนแบบฟอร์มของคุณเช่น:

    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 ที่มีแบบฟอร์ม

คุณอาจจะไม่จำเป็นต้องแทนที่ระดับฟอร์มของคุณ__init__เพราะชุด Django nameและidแอตทริบิวต์ใน HTML inputs คุณสามารถมี CSS แบบนี้:

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

ไม่เห็นอันนี้จริงๆ ...

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

ผลผลิตละเอียดยิ่งขึ้น

วิธี as_p (), as_ul () และ as_table () เป็นเพียงทางลัดสำหรับนักพัฒนาที่ขี้เกียจพวกเขาไม่ได้เป็นเพียงวิธีเดียวที่วัตถุรูปแบบสามารถแสดงได้

class BoundField ใช้เพื่อแสดง HTML หรือแอตทริบิวต์การเข้าถึงสำหรับเขตข้อมูลเดียวของอินสแตนซ์ของแบบฟอร์ม

STR () ( Unicodeในหลาม 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" />

มีเครื่องมือที่ง่ายต่อการติดตั้งและดีเยี่ยมที่สร้างขึ้นสำหรับ Django ที่ฉันใช้สำหรับการจัดแต่งทรงผมและสามารถใช้กับเฟรมเวิร์กส่วนหน้าเช่น Bootstrap, Materialize, Foundation และอื่น ๆ เรียกว่า widget-tweaks เอกสาร: Widget Tweaks

1. คุณสามารถใช้มันกับมุมมองทั่วไปของ Django
2. หรือแบบฟอร์มของคุณเอง:

จากแบบฟอร์มการนำเข้า django

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

คุณสามารถแก้ไขได้ด้วยวิธีของคุณเองโดยใช้แอททริบิวต์ render_field ที่ให้รูปแบบ html เหมือนคุณมากขึ้นในลักษณะนี้:

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>

ห้องสมุดนี้เปิดโอกาสให้คุณแยกส่วนหน้าคุณจากแบ็กเอนด์ของคุณ

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

แก้ไข:อีกวิธีหนึ่ง (ดีกว่าเล็กน้อย) ในการทำสิ่งที่ฉันแนะนำคือคำตอบที่นี่: Django ใส่สไตล์ฟิลด์ป้อนข้อมูลในแบบฟอร์ม

ตัวเลือกทั้งหมดข้างต้นนั้นยอดเยี่ยมเพียงแค่คิดว่าฉันจะเลือกอันนี้เพราะมันแตกต่าง

ถ้าคุณต้องการสไตล์ที่กำหนดเองคลาส ฯลฯ ในฟอร์มของคุณคุณสามารถป้อนข้อมูล html ในเทมเพลตของคุณที่ตรงกับเขตข้อมูลฟอร์มของคุณ สำหรับ CharField ตัวอย่างเช่น (วิดเจ็ตเริ่มต้นคือTextInput) สมมติว่าคุณต้องการป้อนข้อความแบบ bootstrap คุณจะทำสิ่งนี้:

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

และตราบใดที่คุณใส่ชื่อเขตข้อมูลฟอร์มตรงกับของ html nameattribue (และวิดเจ็ตอาจจะต้องตรงกับประเภทของการป้อนข้อมูลเช่นกัน) Django จะทำงานทุก validators เดียวกันบนสนามที่ว่าเมื่อคุณเรียกใช้validateหรือform.is_valid()และ

จัดแต่งทรงผมอย่างอื่นเช่นป้ายกำกับข้อความแสดงข้อผิดพลาดและข้อความช่วยเหลือไม่จำเป็นต้องใช้วิธีการแก้ปัญหามากนักเพราะคุณสามารถทำสิ่งที่ชอบform.field.error.as_textและจัดแต่งทรงตามที่คุณต้องการ เขตข้อมูลจริงเป็นฟิลด์ที่ต้องเล่นซอ

ฉันไม่รู้ว่านี่เป็นวิธีที่ดีที่สุดหรือวิธีที่ฉันจะแนะนำ แต่มันเป็นวิธีหนึ่งและอาจเหมาะกับใครบางคน

นี่คือคำแนะนำแบบฟอร์มที่มีประโยชน์และมีคำตอบส่วนใหญ่ที่แสดงรายการไว้ใน SO (เช่นการใช้ attr บนวิดเจ็ตและปรับแต่งวิดเจ็ต) https://simpleisbetterthancomplex.com/article/2017/08/19/how-to-render-django-form-manually.html

อินสแตนซ์วิดเจ็ตจัดแต่งทรงผม

หากคุณต้องการให้อินสแตนซ์วิดเจ็ตหนึ่งดูแตกต่างจากอีกอินสแตนซ์หนึ่งคุณจะต้องระบุแอททริบิวเพิ่มเติมในเวลาที่วัตถุวิดเจ็ตนั้นถูกสร้างอินสแตนซ์และกำหนดให้กับฟิลด์แบบฟอร์ม

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>