在 Django 中使用表单创建自定义 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']

型号：

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

你可以render the fields manually:

我们不必让 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>

正如我在 cmets 中所说，另请参阅 Django Crispy Forms。不用这么多标记也能达到同样的效果。

Answer 2

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

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

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

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

点击here阅读更多详情

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

{% load widget_tweaks %}

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