在 Django 中使用 forms 创建自定义 html 模板

Question

我一直在查看文档和一些 StackOverflow 示例，但我仍然遇到了一些麻烦。 在 Django 中，我创建了一个表单，视图呈现它，并且在 HTML 模板中将其显示为 form.as_p。 这非常有效，但我希望能够自定义我的 HTML 模板，而不是将其显示为 form.as_p。 关于如何这样做的任何例子？

到目前为止，我有以下内容。

看法：

@login_required
def register(request):

    info = Content.objects.get(id=request.user.id)

    if request.method == 'POST':
        form = UploadFileForm(request.POST, request.FILES, instance=info)

        if form.is_valid():
            info = form.save(commit=False)
            info.save()
            return HttpResponseRedirect('/portal/register')
    else:
        form = UploadFileForm(instance=info)

        return render(request, 'portal/register.html', {'form': form, 'gallery': info})

形式：

class UploadFileForm(ModelForm):

    logo = forms.ImageField(required=False)
    image1 = forms.ImageField(required=False)
    terms = forms.CharField(required=False)

    class Meta:
        model = Content
        fields = ['user', 'logo', 'image1', 'terms']

Model：

class Content(models.Model):
    user = models.ForeignKey(User)
    logo = models.ImageField(upload_to=content_file_name, null=True, blank=True)
    image1 = models.ImageField(upload_to=content_file_name, null=True, blank=True)
    terms = models.CharField(max_length="256", blank=True)

    def __unicode__(self):
        return self.title

HTML 模板：

<form method="POST" action="" enctype="multipart/form-data">
    {% csrf_token %}

            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    {% if gallery.logo %}
                    <img class="img-responsive" id="logo" src="/media/{{ gallery.logo }}" alt="">
                    {% else %}
                    <img class="img-responsive" id="logo" src="/media/images/placeholder.png" alt="">
                    {% endif %}
                </a>
                <input type="file" name="logo" id="logo" multiple>
            </div>

            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    {% if gallery.image1 %}
                    <img class="img-responsive" id="image1" src="/media/{{ gallery.image1 }}" alt="">
                    {% else %}
                    <img class="img-responsive" id="image1" src="/media/images/placeholder.png" alt="">
                    {% endif %}
                </a>
                <input type="file" name="image1" id="image1" multiple>
            </div>

            <div class="form-group">
                <input type="text" name="terms" id="terms" class="form-control input-sm" placeholder="terms" value="{{ gallery.terms }}">
            </div>

    <input type="submit" value="Submit" />
</form>

Answer 1

是的，您可以通过执行以下操作在表单字段上循环

{% for field in form %}
    <div class="fieldWrapper">
        {{ field.errors }}
        <label> 
            {{ field.label_tag }}
        </label>
       <div>
           {{ field }}
       </div>
    </div>
{% endfor %}

然后，您可以将类添加到div和label标签并设置表单字段的样式

您还可以使用Django Widget Tweaks将分类添加到表单字段。

点击这里阅读更多详细信息

通过使用小部件调整，您只需执行以下操作即可找到要在其中添加类的字段

{% load widget_tweaks %}

{{ form.name|add_class:"inputContact volunteer" }}

Answer 2

您可以手动渲染字段 ：

我们不必让Django解压缩表单字段； 我们可以根据需要手动进行操作（例如，允许我们对字段进行重新排序）。 每个字段都可以使用{{form.name_of_field}}作为表单的属性使用，并且在Django模板中，将适当地呈现。

文档中的示例：

{{ form.non_field_errors }}
<div class="fieldWrapper">
    {{ form.subject.errors }}
    <label for="{{ form.subject.id_for_label }}">Email subject:</label>
    {{ form.subject }}
</div>
<div class="fieldWrapper">
    {{ form.message.errors }}
    <label for="{{ form.message.id_for_label }}">Your message:</label>
    {{ form.message }}
</div>

正如我在评论中说的，另请参阅Django Crispy Forms 。 您无需太多标记就可以实现相同目的。

Answer 3

以下教程链接可能会有所帮助：

如何手动渲染 django 表单

如何使用引导程序 4 forms 和 django.html

高级表单渲染与 django 脆 forms.html