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

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

{% 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" }}

Answer 2

你可以render the fields manually：

我们不必让Django解压缩表单的字段;我们能做到如果我们喜欢手动（允许我们重新排序字段，例如）。每个字段都可以使用{{作为表单的属性将呈现form.name_of_field}}，并在Django模板中适当。

文档中的示例：

{{1}}

正如我在评论中所说，另见Django Crispy Forms。如果没有这么多标记，你可以实现同样的目标。

使用Django中的表单创建自定义html模板

2 个答案: