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

Posted 2023-02-24

【中文标题】Django 格式化表单的最佳方法是啥？

【英文标题】：Django What is the best way to format forms?Django 格式化表单的最佳方法是什么？

【发布时间】：2013-09-15 12:58:59

【问题描述】：

我刚刚进入 Django 并阅读了很多书籍，现在我正在构建我的第一个应用程序。当我在我的模板中呈现我的表单时，我使用...

 form.as_ul 

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

【问题讨论】：

你读过this chapter 吗？它应该有帮助。特别是Looping over the form’s fields

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

【讨论】：

谢谢我最终使用了最容易用 CSS 格式化的表格

【参考方案2】：

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

django-bootstrap3 django-bootstrap-toolkit django-crispy-forms

和more from djangopackages.com

【讨论】：

一段时间后，我最终使用了 bootstrap / django-crispy-forms，我再也没有回头。我不是平面设计师或 CSS 奇才，所以 bootstrap 与清晰的表单相结合让我的生活变得如此轻松。

【参考方案3】：

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

您可以将它与 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 的样式设置方式，如下例所示：

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

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