Django表单中的CSS样式

我想做以下几点：

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

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)

<form action="" method="post">
  <table>
    {{ form.as_table }}
  </table>
  <input type="submit" value="Submit">
</form>

联系表单html:

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)

<form action="" method="post">
  <table>
    {{ form.as_table }}
  </table>
  <input type="submit" value="Submit">
</form>

{{form.as_table}}

例如，如何为

主题

、

电子邮件

、

消息

设置一个类或ID，以提供外部样式表？

摘自我的回答：

或

或

---编辑---
以上是对原始问题代码所做的最简单的更改，可以完成所问的内容。如果您在其他地方重复使用表单，它也可以防止您重复自己的操作；如果使用Django的as_table/as_ul/as_p form方法，类或其他属性就可以工作。如果您需要完全控制完全自定义的渲染，这是

--编辑2---
添加了一种新的方式来指定模型表单的小部件和属性。

您可以这样做：

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

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

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

希望能奏效

Ignas

您可以执行以下操作：

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

{%形式的字段为%}
{{field}}
{%endfor%}

---

然后，您可以将类/id添加到例如

标记中。当然，您可以使用您想要的任何其他标记。例如，检查表单中每个

字段可用的内容（
{{field}
例如只是输出输入标记，而不是标签等等）。
您可能不需要重写表单类“
\u init\u
，因为Django在HTML
input
s中设置
name
&
id
属性。您可以使用如下CSS：

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

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

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

如果您不想在表单中添加任何代码（如@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>

您可以使用此库：

它允许您执行以下操作：

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

{%load widget\u tweaks%}
{form.title | add_class:“css_class_1 css_class_2”}
这可以使用自定义模板过滤器完成。考虑以这种方式呈现表单：

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

然后应用过滤器：

{%loadmyfilters%}
{{form.non_field_errors}}
{{form.subject.errors}
{{form.subject.label_tag}
{{form.subject | addclass:'MyClass'}}
{{form.subject.help_text}

form.subjects
然后将使用
MyClass
CSS类呈现。
没有看到这一个


更细粒度的输出
as_p（）、as_ul（）和as_table（）方法只是懒惰开发人员的快捷方式——它们不是显示表单对象的唯一方式

类边界域
用于显示表单实例的单个字段的HTML或access属性

此对象的str（）（unicode在Python 2上）方法显示此字段的HTML

要检索单个BoundField，请在表单上使用字典查找语法，并将字段名称作为键：

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

>>form=ContactForm（）
>>>打印（表格['subject']）

要检索所有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" />

>>form=ContactForm（）
>>>对于表单中的边界字段：打印（边界字段）

特定于字段的输出符合表单对象的自动标识设置：

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

>f=ContactForm（auto\u id=False）
>>>打印（f[“消息”]）
>>>f=联系人表单（自动\u id='id\u%s'）
>>>打印（f[“消息”]）
在每篇博客文章中，您可以使用自定义模板过滤器将css类添加到字段中

from django import template
register = template.Library()

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

把它放到你的应用程序的templatetags/文件夹中，你现在就可以这样做了

在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

表格：

模板：

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

{%csrf\u令牌%}
{{form.non_field_errors}}
{{form.todo_name.errors}
姓名：
{{form.todo_name}
{{form.todo_description.errors}}
描述
{{form.todo_description}}
一种解决方案是在页面准备就绪后使用JavaScript添加所需的CSS类。例如，使用引导类设置django表单输出的样式（为了简洁起见使用jQuery）：


$（文档）.ready（函数（）{
$（'#some_django_form_id'）。查找（“input[type='text']，select，textarea”）。每个（函数（索引，元素）{
$（元素）.addClass（“表单控件”）；
});
});

这避免了混合样式细节与业务逻辑的丑陋。
 < P>有一个非常容易安装和很棒的工具，用于Django，用于样式化，它可以用于每个前端框架，如Bootstrap、ObjyLead、Fund等。它被称为小部件调整文档：
。
您可以将它与Django的通用视图一起使用
或使用您自己的表格：
来自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>

{%load widget\u tweaks%}
{%render_field form.subject class+=“form control myCSSclass”placeholder=“在此处输入主题”%}
{%render_field form.email type=“email”class+=“myCSSclassX myCSSclass2”%}
{%render_field form.message class+=“myCSSclass”rows=“4”cols=“6”placeholder=form.message.label%}

此库为您提供了将前端与后端很好地分离的机会编辑：我建议的另一种（稍微好一点的）方法如下：

以上所有选项都很棒，我想我会加入这一个，因为它不同

如果您想在表单上自定义样式、类等，可以在模板中输入与表单字段匹配的html。例如，对于CharField（默认小部件是
TextInput
），假设您想要一个引导式文本输入。您可以这样做：


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

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

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

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

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

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

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

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

class UserRegistration(forms.ModelForm):
   # list charfields

   class Meta:
      model = User
      fields = ('username', 'first_name', 'last_name', 'email', 'password', 'password2')

   def __init__(self, *args, **kwargs):
      super(UserRegistration, self).__init__(*args, **kwargs)
      for field in self.fields:
         self.fields[field].widget.attrs['class'] = 'form-control'