使用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

是的，你可以通過做表單域環路以下

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

然後你就可以添加類到div和標籤標記和樣式表單字段

您也可以使用Django的Widget調整，以加歸類到表單域。

點擊here更詳細

讀通過使用插件的調整，你只需找到您要在其中做這個

{% load widget_tweaks %} 

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

Answer 2

您可以render the fields manually添加類領域：

我們不必讓Django解開表單的字段;如果我們喜歡，我們可以手動執行 （例如，允許我們對字段進行重新排序）。 每個字段都可以作爲表單的一個屬性使用，並且在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見。沒有太多標記就可以達到同樣的效果。