django表单模板设计器友好

Question

我正在做django项目。我喜欢DRY的原则。我有一个表格可以应用于所有需要它的页面。我的意思是基于django文档的通用表单。但在表单中，可以选择类型，文件上传，复选框，收音机等，我不喜欢原生html的设计。我想利用一些定制材料的设计。我该怎么做？下面是我的表单，我的表单有复选框，文件上传和多个选择，我需要自定义。简而言之，我的问题是如何让我的通用表单设计器友好？

现在我处理我的表单模板遵循

<form class="form" role="form" action="" method="post"> 
    {% csrf_token %} 
    <div class="form-group label-floating"> 
     <label class="control-label" for="{{ form.company.id_for_label}}">Company</label> 
     <select class="form-control" name="{{ form.company.name }}" id="{{ form.company.id_for_label}}"> 
      <option value=""></option> 
      {% for id, name in form.company.field.choices %} 
       <option value="{{ id }}" class="option">{{ name }}</option> 
      {% endfor %} 
     </select> 
    </div> 
    <div class="form-group label-floating"> 
     <label class="control-label" for="{{ form.name.id_for_label}}">Job Title</label> 
     <input type="text" id="{{ form.name.id_for_label }}" name="{{ form.name.name }}" class="form-control"> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> 
      <div class="form-group label-floating"> 
       <label class="control-label" for="{{ form.description.id_for_label}}">{{ form.description.label }}</label> 
       <div class="markdownx"> 
        {{ form.description|add_css:'form-control' }} 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="form-group label-floating"> 
     <label class="control-label" for="{{ form.category.id_for_label}}">{{ form.category.label }}</label> 
     <select class="form-control" name="{{ form.category.name }}" id="{{ form.category.id_for_label}}"> 
      <option value=""></option> 
      {% for id, name in form.category.field.choices %} 
       <option value="{{ id }}">{{ name }}</option> 
      {% endfor %} 
     </select> 
    </div> 
    <div class="form-group label-floating"> 
     <label class="control-label" for="{{ form.city.id_for_label}}">{{ form.city.label }}</label> 
     <input type="text" id="{{ form.city.id_for_label }}" name="{{ form.city.name }}" class="form-control"> 
    </div> 
    <div class="form-group label-floating"> 
     <label class="control-label" for="{{ form.address.id_for_label}}">{{ form.address.label }}</label> 
     <input type="text" id="{{ form.address.id_for_label }}" name="{{ form.address.name }}" class="form-control"> 
    </div> 
</form> 

这样的代码来显示的形式变得如此庞大，仅1种形式。用超过8个10表格为应用程序编写这么庞大的代码并不好。

更好的方法是

{% load add_css %} 
<div class="row"> 
    <div class="col-lg-12"> 
     <div class="text-center m-t-lg"> 
      <form class="form-horizontal" role="form" action="" method="post" enctype='multipart/form-data'> 
       {% csrf_token %} 
       {% for field in form %} 
        {% if field.errors %} 
         <div class="form-group has-error"> 
          <label class="col-sm-2 control-label" for="id_{{ field.name }}">{{ field.label }}</label> 
          <div class="col-sm-10"> 
           {{ field|add_css:'form-control' }} 
           <span class="help-block"> 
           {% for error in field.errors %}{{ error }}{% endfor %} 
          </span> 
         </div> 
        </div> 
       {% else %} 
        <div class="form-group"> 
         <label class="col-sm-2 control-label" for="id_{{ field.name }}">{{ field.label }}</label> 
         <div class="col-sm-10"> 
          {{ field|add_css:'form-control' }} 
          {% if field.help_text %} 
           <p class="help-block"><small>{{ field.help_text }}</small></p> 
          {% endif %} 
         </div> 
        </div> 
       {% endif %} 
      {% endfor %} 
      <div class="form-group"> 
       <div class="col-sm-offset-2 col-sm-10"> 
        <button type="submit" class="btn btn-primary">Submit</button> 
       </div> 
      </div> 
     </form> 
    </div> 
</div> 
</div> 

但这里是我面临的一个困难。我无法检查其文件上传字段或多个选择字段等，所以我可以相应地设计它们。因为有时候，我需要处理很多div来正确显示它。

有什么办法让表单模板对设计者更灵活？

Answer 1

您可以在字段定义中使用arg widget，并创建一些自定义窗口小部件模板。所以你定义一次，你只需要关心模板中的打印字段。这里的文档widget和custom widget