python - 如何将 Django 表单嵌入到我的 CSS 设计中？

Question

我正在创建一个网站并且已经完成了前端。现在我想使用 python 处理表单提交发布请求。我正在尝试使用 django 来执行此操作，但我不知道该怎么做

1. 将 CSS 类、onchange 事件处理程序和 ID 附加到 Django 表单
2. 在单个表单中的 django 输入元素之间插入 div 和其他 html 元素

这是我当前的前端:

<form method="post" autocomplete="off">
<p class="sub-header">Or just leave Us a Message:</p>
<div>
    <div id="contact-layout">
        <div class="input-container">
            <input type="text" name="name" placeholder="Name">
            <div class="input-bar"></div>
        </div>
        <div class="input-container">
            <input type="text" name="email" placeholder="Email">
            <div class="input-bar"></div>
        </div>
        <div class="input-container">
            <input type="text" name="subject" placeholder="Subject">
            <div class="input-bar"></div>
        </div>
    </div>
    <div class="input-container">
        <textarea name="message" placeholder="Type your message here..." id="message-input"></textarea>
        <div class="input-bar"></div>
    </div>
</div>
<div>
    <p class="sub-header" id="user-image-header">Attach some images:</p>
    <div id="file-upload">
        <span class="form-button">Choose Files</span>
        <input id="upload" type="file" onchange="LoadImage(this)" name="image" accept="image/*" multiple>
    </div>
</div>
<div class="delimiter"></div>
<input class="form-button" type="submit" id="contact-submit" value="Submit">
<p id="submit-thanks">Thanks for submitting!</p>

如您所见，我有几个“普通”html 文本输入、一个文本区域和一个用于多个图像文件的输入。 在 django 中，我链接了我的静态 css 文件并将我的 html 前端设置为 django 模板。

到目前为止，我的 django 表单如下所示:

class ContactForm(forms.Form):
   name = forms.CharField()
   email = forms.CharField()
   phone = forms.CharField(required=False)
   subject = forms.CharField(required=False)
   message = forms.CharField(widget=forms.Textarea)

当我将它插入我的前端时，它显然看起来不太好，因为我不知道如何使用 django 来表示我相当复杂的表单设计。

您能否指出您将如何做到这一点，或者可以链接一些关于如何处理此类问题的好指南？

另外，如果可能的话，提供一些代码示例:)

仅供引用，我熟悉 python，但我以前从未使用过 django，所以也许我遗漏了一些明显的东西，对我来说，它作为一个框架的复杂性似乎有点难以抗拒。

Answer 1

一个好的起点是熟悉默认的 Django 表单生成的内容。例如，在这里，我正在为自己寻找有关 CheckboxSelectMultiple 小部件的信息:

>>> class ZForm( forms.Form):
...  foo = forms.MultipleChoiceField( choices=(('A','AA'),('B','BB'), ('C','CC')),   widget=forms.CheckboxSelectMultiple )
...
>>> z = ZForm()
>>> z.as_p()
'<p><label>Foo:</label> <ul id="id_foo">\n    <li><label for="id_foo_0"><input type="checkbox" name="foo" value="A" id="id_foo_0" />\n AA</label>\n\n</li>\n    <li><label for="id_foo_1"><input type="checkbox" name="foo" value="B" id="id_foo_1" />\n BB</label>\n\n</li>\n    <li><label for="id_foo_2"><input type="checkbox" name="foo" value="C" id="id_foo_2" />\n CC</label>\n\n</li>\n</ul></p>'
>>> 

如果你想用 css 设置样式，Django 生成的 css ids 可以使它变得公平。直接用 css 定位器描述任何元素。如果您不想要默认的 Django 布局，您可以在模板中逐字段生成表单，或者您可以了解 django-crispy-forms (尤其是布局助手)我衷心推荐。

至于在何处将 css 注入(inject) Django，有多种方法，但常见的方法是通过基本模板中名为 css 的 block 。 View 模板看起来像

{% extends "base.html" %}

{% block content %}
    <!-- code to render your form -->
    ...
{ %endblock content %}

{% block css %}
    /* base.html provides the surrounding style tags */
    /* block.super inherits the css common to all pages using base.html */                              

{{block.super}}

    /* additional styling for the form rendered in block content */

    #id_foo label {
        /* styling for labels on the foo field only */
        whatever;
    }

{% endblock css %} 

在传递我自己的 base.html 时也总是加载 Jquery(毫不奇怪，在一个名为 scripts 的 block 中，因此我可以根据需要覆盖或扩充每个模板)并且有一个 block onready_js 会在这个上下文中呈现，这可以节省大量容易打错的样板文件，这些样板文件可能是一个微不足道的 Jquery 代码段

<script type="text/javascript"> $(document).ready(  function() {
{% block onready_js %}{% endblock onready_js %}   
   }); 
</script>

并且您只需将调用 View 时需要执行的任何模板 Jquery 放入该 block 中即可。