在Django窗体中的CSS样式
我如何devise以下内容：
在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以提供外部样式表？ 谢谢
从我的答案采取： 如何在Django中用<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'}), }
—编辑—
以上是对原始问题代码完成所要求的最简单的修改。 如果你在其他地方重复使用这个表格，这也使你不能重复自己; 如果你使用Django的as_table / as_ul / as_p表单方法，你的类或其他属性就可以工作。 如果你需要完全控制一个完全自定义的渲染，这是清楚的logging
– 编辑2 —
添加了一个新的方法来为ModelForm指定小部件和属性。
这可以使用自定义模板filter来完成。 考虑到你这样渲染你的表单：
<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方法的BoundField的一个实例。
您可以在“my_app / templatetags / myfilters.py”中创build一个自定义filter“addclass”
from django import template register = template.Library() @register.filter(name='addclass') def addclass(value, arg): return value.as_widget(attrs={'class': arg})
然后应用你的filter：
{% 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>
（请注意，我也将其更改为未sorting的列表 。）
其次，请注意输出格式为HTML ，Django的文档：
字段ID是通过将“id_”添加到字段名称中生成的。 id属性和标签默认包含在输出中。
所有的表单域都有一个唯一的ID 。 所以你可以在你的CSS文件中引用id_subject来设置主题字段的样式。 我应该注意到，当你采用默认的 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） – 但是很容易通过id来引用所有的字段在你的CSS是这样的：
#id_subject, #id_email, #email_message {color: red;}
你可以这样做：
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" }}
通过这篇博文，您可以使用自定义模板filter将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"}}
你可以做：
<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都有可用的内容，例如只输出input标记，而不是标签等。
您可能不需要重写表单类' __init__ '，因为Django在HTML input设置了name ＆ id属性。 你可以有这样的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（）方法只是懒惰开发人员的捷径 – 它们不是表单对象的唯一显示方式。
类BoundField用于显示表单实例的单个字段的HTML或访问属性。
此对象的str （）（Python 2上的unicode ）方法显示此字段的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，Materialise，Foundation等。它被称为小工具调整文档： 小工具调整
- 你可以在Django的通用视图中使用它
- 或者用你自己的forms：
从Django的importforms
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>
一种解决scheme是在页面准备就绪后使用JavaScript来添加所需的CSS类。 例如，样式djangoforms输出与引导类（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>
这样可以避免混淆样式与您的业务逻辑的丑陋。
