Django 表单：明显地分组或分隔字段

Question

我有一个要在 Django 应用程序中显示的表单。此表单有多个字段。

为了使 UI 更直观，我希望显示的字段不是简单地一个接一个地显示，而是分成多个部分 - 无论是在一个框内还是用水平线分隔各个部分或更大的间距或自定义文本等

我的主要兴趣是让子组彼此明显分开。能够使用一些文本（基本上是没有附加字段的标签）作为部分分隔符将是一个受欢迎的奖励。

我怎样才能做到这一点？

当前示例代码：

forms.py:

from django import forms

class MyForm(forms.Form):
    color1 = forms.CharField()
    items_color1 = forms.CharField()
    # some devider here
    color2 = forms.CharField()
    items_color2 = forms.CharField()

mypage.html:

<table>
  {{ form.as_table }}
  <tr>
    <td>&nbsp;</td>
    <td><input type="submit" value="Submit" id="form_field" name="submit_btn"></td>
  </tr>
</table>

（我是 Django 的新手。我之前的 GUI 经验主要是使用 PyQt5。）

Answer 1

你真幸运，我的朋友。

看看 Django Crispy Forms。使用此产品，您可以在表单定义中以编程方式控制表单的布局。

将 Django Crispy Forms 安装到虚拟环境后，您必须在设置文件中添加一行才能使用它：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.humanize',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
     ...  
    'crispy_forms',
    ...
]

完成之后，您将能够在您的应用程序中使用 django crispy 表单。

您发布的示例表单在 forms.py 文件中可能如下所示：

from django import forms

from crispy_forms.bootstrap import FormActions
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Field, HTML, Layout, Submit

class MyForm(forms.ModelForm):

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper(self)
        self.fields['color1'].label = 'Color 1:'
        self.fields['items_color1'].label = 'Color 1 Items:'
        self.fields['color2'].label = 'Color 2:'
        self.fields['items_color2'] = 'Color 2 Items:'

        # You can dynamically adjust your layout
        self.helper.layout = Layout(Field('color1),
                                    Field('items_color1),
                                    HTML(<hr>), 
                                    Field('color2'),
                                    Field('items_color2),
                                    FormActions(Submit('save', 'Save changes')))

您可以在 CSS 中设置样式。

这里 some nice examples 使用 Django Crispy Forms。

Django 表单：明显地分组或分隔字段

Django form: visibly group or separate fields

html

forms

django