7

I have just gotten into Django and read a bunch of books, now im building my first app. When I render my forms in my template im using... 

{{ form.as_ul }}

And now I'm trying to apply some CSS to my form. It's proving difficult to get it look nice. I was wondering if there is a better way of rendering and styling forms?

4

3 回答 3

13

好吧，您可以利用以下几个选项：

  1. form.as_p
  2. form.as_ul
  3. form.as_table

由您决定您想要什么。至于用 CSS 自定义它，看看他们如何在此处构建表单（取自 django 文档）：

<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 添加到labels 或divs。完全由你决定你想做什么。附带说明一下，如果您想要使用 Bootstrap 3 格式化的表单，那么我建议您使用django-crispyformsdjango 的扩展名。

于 2013-09-11T13:27:13.560 回答
1

好吧，这并不能直接回答问题，但是如果您使用的是 Bootstrap，您有几个选择：

以及来自 djangopackages.com 的更多内容

于 2013-09-11T13:55:07.833 回答
1

有一个非常易于安装且非常棒的 Django 工具，我使用它来进行样式设置，它可以用于每个前端框架，如 Bootstrap、Materialize、Foundation 等。它被称为 widget-tweaks 文档：Widget Tweaks

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

  2. 或使用您自己的表格：

    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 的样式设置方式，如下例所示：

模板.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'}))

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

于 2017-04-13T20:32:04.247 回答