将自定义 CSS 样式添加到模型表单 django

Question

我正在使用引导程序变体来帮助设计模型表单。我希望有一个特定的类，其中一个字段是我已经阅读过的有关该主题的内容，普遍的共识是向 ModelForm 的元添加一个小部件，就像我在下面尝试的那样：

表格.py

class EmailForm(forms.ModelForm):
    class Meta:
        model = MarketingEmails
        fields = ['messageid','subject','body','name','altsubject','utm_source','utm_content','utm_campaign',]
        widgets = {
            'body': Textarea(attrs={'class': 'summernote'}),
        }

然而，这似乎没有呈现在我的模板上，即：

<div class="row">
<div class="col-sm-6">
    <form method="POST" class="post-form" action ="">
    {% csrf_token %}        
        <p><label for="id_subject">Subject</label>
        <input class="form-control" id="id_subject" type="text" name="subject" maxlength="1000" value="{{rows.subject}}"required /></p>

        <p><label for="id_name">Name</label>
        <input class="form-control" id="id_name" type="text" name="name" maxlength="1000" value="{{rows.name}}"required /></p>

        <p><label for="id_body">Body</label>
        <input class="form-control" id="id_body" type="text" name="body" maxlength="1000" value="{{rows.body}}"required /></p>

        <p><label for="id_altsubject">Alt Subject</label>
        <input class="form-control" id="id_altsubject" type="text" name="altsubject" maxlength="1000" value="{{rows.altsubject}}"required /></p>

        <p><label for="id_utm_source">utm_source</label>
        <input class="form-control" id="id_utm_source" type="text" name="utm_source" maxlength="1000" value="{{rows.utm_source}}"required /></p>

        <p><label for="id_utm_content">utm_content</label>
        <input class="form-control" id="id_utm_content" type="text" name="utm_content" maxlength="1000" value="{{rows.utm_content}}"required /></p>

        <p><label for="id_utm_campaign">utm_campaign</label>
        <input class="form-control" id="id_utm_campaign" type="text" name="utm_campaign" maxlength="1000" value="{{rows.utm_campaign}}"required /></p>

        <button type="submit" class="save btn btn-default">Save</button>

    </form>
</div>

还有另一种方法可以做到这一点还是我的代码中做错了什么？

更新 我已遵循 Jacek 的建议，现在它已设计样式，但信息不再显示，这是我的新代码：

形式.py：

class EmailForm(forms.ModelForm):
subject = forms.CharField(
    label = 'Subject',
    max_length = 2000,
    required = True,
    widget = forms.TextInput(
        attrs = {'class': 'summernote', 'name': 'subject'}
        )
    )

... 
class Meta:
    model = MarketingEmails
    fields = ['messageid','subject','body','name','altsubject','utm_source','utm_content','utm_campaign',]

视图.py：

def emailinfo(request, pk):
if request.session.has_key('shortname'):
    shortname =  request.session['shortname']
    form = MarketingEmails.objects.filter(messageid =pk).get()
    if request.method == 'GET':
        form = EmailForm(instance=form)
        return render(request, 'marketingemails/emailinfo.html',{'shortname': shortname, 'form': form})

    else:
        form = EmailForm(request.POST,instance=form)
        if form.is_valid():
            return redirect('marketingemails:emailinfo', pk = form.messageid)

    return render(request, 'marketingemails/emailinfo.html',{'shortname': shortname, 'form': form})
else:
    return HttpResponseRedirect(reverse('common:login'))    

html:

<div class="row">
<div class="col-sm-6">
    <form method="POST" action ="">
    {% csrf_token %}        
    {% for field in form %}
        {{ field.label_tag }}
        {{ field }}

        {% if field.help_text %}
            {{ field.help_text }}
        {% endif %}

        {% for error in field.errors %}
            {{ error }}
        {% endfor %}

    {% endfor %}
    <button type="submit" class="btn btn-primary">Submit</button>

    </form>
</div>

Answer 1

在我的模板中，我使用Widget Tweaks 您可以添加 CSS 类或 twitter-bootstrap 类。它真的很有用

<form method='POST' action="/" enctype='multipart/form-data'>
 {% load widget_tweaks %}
 {% csrf_token %}
 {{ form.first_name |add_class:"customCSS1 customCSS2" }}
 {{ form.second_name |add_class:"form-control customCSS4" }}
</form>
{{ form.media.js }}

使用此插件，您可以根据需要设置表单样式。您可以添加您的form-control类或使用个人 CSS 类，例如

.customCSS1{
  width60%;
  border-radius:5px;
 }