Question

我刚刚进入Django并阅读了一堆书，现在我正在构建我的第一个应用程序。当我使用...

在我的模板中渲染表单时

{{ form.as_ul }}

现在我正在尝试将一些CSS应用到我的表单中。事实证明它很难看起来很好看。我想知道是否有更好的渲染和样式表单方式？

Answer 1

嗯，您可以利用以下几种选项：

form.as_p
form.as_ul
form.as_table

由您来决定您想要什么。至于使用CSS自定义它，请看一下它们如何构建表单（taken from django docs）：

<form action="/contact/" method="post">
    {{ form.non_field_errors }}
    <div class="fieldWrapper">
        {{ form.subject.errors }}
        <label for="id_subject">Email subject:</label>
        {{ form.subject }}
    </div>
    <div class="fieldWrapper">
        {{ form.message.errors }}
        <label for="id_message">Your message:</label>
        {{ form.message }}
    </div>
    <div class="fieldWrapper">
        {{ form.sender.errors }}
        <label for="id_sender">Your email address:</label>
        {{ form.sender }}
    </div>
    <div class="fieldWrapper">
        {{ form.cc_myself.errors }}
        <label for="id_cc_myself">CC yourself?</label>
        {{ form.cc_myself }}
    </div>
    <p><input type="submit" value="Send message" /></p>
</form>

原始表单如下所示：

from django import forms

class ContactForm(forms.Form):
    subject = forms.CharField(max_length=100)
    message = forms.CharField()
    sender = forms.EmailField()
    cc_myself = forms.BooleanField(required=False)

因此，正如您所看到的，您只需通过

{{ form.<element_name>.<element_properties> }}

您可以将自己的CSS添加到label或div。完全取决于你决定你想做什么。另外，如果您想要使用Bootstrap 3格式化的表单，那么我建议您使用django-crispyforms extension for django。

Answer 2

嗯，这不能直接回答这个问题，但是如果你使用的是Bootstrap，你有两个选择：

和more from djangopackages.com

Answer 3

Django有一个非常容易安装和出色的工具，我用它来设置样式，它可以用于每个前端框架，如Bootstrap，Materialise，Foundation等。它被称为widget-tweaks文档：{{3 }}

您可以将它与Django的通用视图一起使用

或使用您自己的表单：

from django.forms import Form

class MyForm(Form):

    field1 = forms.CharField(max_length=512)
    field2 = forms.CharField(max_length=256)

而不是使用默认值：

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

您可以使用render_field属性设置样式，该属性为您提供了类似html的样式方式，如下例所示：

template.html

{% load widget_tweaks %}

<div class="container">
   <div class="col-md-6">
      {% render_field form.field1 class+="form-control myCSSclass" placeholder="Placeholder for field1" %}
   </div>
   <div class="col-md-6">
      {% render_field form.field2 class+="myCSSclassX myCSSclass2" placeholder=form.field2.label %}
   </div>
</div>

这使得在后端的前端和后端更容易保持前端而不必像以下那样：

class MyForm(forms.Form):
    field1 = forms.CharField(widget=forms.TextInput(attrs={'class' : 'myCSSclass'}))
    field2 = forms.CharField(widget=forms.TextInput(attrs={'class' : 'myCSSclassX myCSSclass2'}))

这在我看来非常有限，更容易混淆

Django格式化表单的最佳方法是什么？

3 个答案: