首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Django表单中的CSS样式

Django表单中的CSS样式
EN

Stack Overflow用户
提问于 2011-04-29 11:41:01
回答 17查看 206.5K关注 0票数 173

以下是我的风格:

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>

例如,如何为要提供外部样式表的subjectemailmessage设置ID

EN

回答 17

Stack Overflow用户

回答已采纳

发布于 2011-04-29 11:56:48

摘自我对How to markup form fields with in 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'}),
        }

-编辑

以上是对原始问题的代码所做的最简单的更改,从而实现了所提出的问题。如果在其他地方重用表单,也可以避免重复;如果使用Django的as_table/as_ul/as_p form方法,那么您的类或其他属性就可以工作。如果您需要完全控制完全自定义的呈现,则可以使用clearly documented

--编辑2--

添加了一种较新的方法来指定ModelForm的小部件和属性。

票数 229
EN

Stack Overflow用户

发布于 2013-09-23 23:04:46

这可以使用自定义模板过滤器来完成。考虑以这种方式呈现表单:

<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中创建自定义过滤器addclass

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>

然后,将使用MyClass CSS类呈现form.subjects

票数 125
EN

Stack Overflow用户

发布于 2011-05-09 04:31:32

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

(请注意,我还将其更改为未排序列表。)

其次,请注意outputting forms as HTML文档中的Django:

通过将'id_‘前缀到字段名来生成字段id。默认情况下,id属性和标记包含在输出中。

您的所有表单域都已经有一个唯一的id。因此,您可以在CSS文件中引用id_subject来设置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 )--但是在你的CSS中通过id引用所有字段是很容易的,就像这样:

#id_subject, #id_email, #email_message 
{color: red;}
票数 32
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5827590

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档