django formulaire modèle design amical

Question

Je fais le projet django en ce moment. J'aime le principe de DRY. J'ai un formulaire qui peut être appliqué à toutes les autres pages qui en ont besoin. Je veux dire un formulaire générique basé sur django docs. Mais sous la forme, il peut y avoir le type choisi, le téléchargement de dossier, la case à cocher, la radio etc. que je n'aime pas la conception du html natif. Je veux tirer parti de la conception du matériel avec une certaine personnalisation. Comment puis-je le faire? Ci-dessous est mon formulaire et mon formulaire a case à cocher, le téléchargement de fichiers et de multiples sélection que je dois personnaliser. En un mot, ma question est de savoir comment rendre mon concepteur de formulaires générique convivial?

Pour l'instant je traitais mon modèle de formulaire que suivre

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

De cette façon, le code pour montrer la forme devient si énorme et sa seule forme 1. Ce n'est pas bon d'écrire un tel code énorme pour l'application avec plus de 8 10 formes.

La meilleure façon est

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

Mais voici une difficulté que je suis confronté. Je ne peux pas vérifier s'il s'agit d'un champ de téléchargement de fichier ou d'un champ de sélection multiple, donc je peux les concevoir en conséquence. Parce que parfois, j'ai besoin de gérer plusieurs divs pour le montrer correctement.

Existe-t-il un moyen de rendre le modèle de formulaire plus flexible pour le concepteur?

Answer 1

Vous pouvez utiliser l'argument widget dans votre définition de champ et créer un modèle de widget personnalisé. Donc, vous les définissez une fois, et vous avez juste à vous soucier de l'impression du champ dans votre modèle. Ici doc sur widget et custom widget