[英]Add custom CSS styling to model form django
我正在使用引导变体来帮助设置模型表单的样式。 有一个特定的类,我希望其中一个字段成为我已经阅读了有关该主题的内容,并且普遍的共识是在 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>
在我的模板中,我使用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;
}
尝试这个:
表格.py
class EmailForm(forms.ModelForm):
...
subject = forms.CharField(
label = 'Subject',
max_length = 1000,
required = True,
widget = forms.TextInput(
attrs = {'class': 'summernote', 'name': 'subject'}
)
)
body = forms.CharField(
label = 'Body',
max_length = 1000,
required = True,
widget = forms.TextInput(
attrs = {'class': 'summernote', 'name': 'body'}
)
)
...
class Meta:
model = MarketingEmails
fields = ('messageid','subject','body','name', ... )
视图.py
from django.shortcuts import render
from your_app_path.forms import EmailForm
def fname(request):
...
marketing = MarketingEmails.objects.get(...)
form = EmailForm(instance=marketing)
...
return render(request, 'yourview.html', { 'form': form })
yourview.html
<form action="" method="post">
{% 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>
不完全回答您的问题,但直接相关,我认为寻找它的人可能会在这里:您可以将类 attr 传递给模型表单(不仅仅是表单),但您必须注意不要将其放在class Meta
中:
class EmailForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super(EmailForm, self).__init__(*args, **kwargs):
for visible in self.visible_fields():
visible.field.widget.attrs['class'] = 'form-control'
class Meta:
model = MarketingEmails
fields = __all__ # or a list of ones you actually want to see
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.