django Formularvorlage Designer freundlich

Question

Ich mache gerade das Django-Projekt. Ich liebe das Prinzip von DRY. Ich habe ein Formular, das auf alle anderen Seiten angewendet werden kann, die es benötigen. Ich meine eine generische Form basierend auf django docs. Aber in der Form kann es Typ, Datei-Upload, Checkbox, Radio usw. geben, die ich nicht mag das Design von nativem HTML. Ich möchte das Design des Materials mit einigen Anpassungen nutzen. Wie kann ich es tun? Unten ist mein Formular und mein Formular hat Kontrollkästchen, Datei hochladen und mehrere auswählen, die ich anpassen muss. Kurz gesagt, meine Frage ist, wie mache ich meine generische Form Designer freundlich?

Vorerst ich meine Formularvorlage am Umgang als

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

den Code auf diese Weise folgt die Form zu zeigen, so riesig, und es ist nur ein Formular wird. Es ist nicht gut so großen Code für die App mit mehr als 8 10 Formularen zu schreiben.

Der bessere Weg ist

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

Aber hier ist eine Schwierigkeit, die ich bin vor. Ich kann nicht überprüfen, ob es ein Datei-Upload-Feld oder mehrere Auswahlfeld usw., so dass ich sie entsprechend gestalten kann. Weil ich irgendwann mit vielen divs umgehen muss, um es richtig zu zeigen.

Gibt es eine Möglichkeit, die Formularvorlage für den Designer flexibler zu gestalten?

Answer 1

Sie können das Argument widget in Ihrer Felddefinition verwenden und eine benutzerdefinierte Widgetvorlage erstellen. Sie definieren sie also einmal, und Sie müssen sich nur um das Drucken des Feldes in Ihrer Vorlage kümmern. Hier doc on widget et custom widget