title: Change the appearance of labels and input fields (from a Model Form) used in a DJango template
body: <p>I am using a script below (that resides in a DJango template) to display <code>input fields</code> that are associated with a particular <code>Model Form</code>. The purpose of this template is to add and modify data for a Model.</p>
  
  <p>The name of the template is : model_name_form.html (ex: customer_form.html for the Model representation of the table Customer)</p>
  
  <p>In order to add/modify data, the <code>Model Form</code> is being used.</p>
  
  <p>The problem is that when using the script below, a type of default presentation is being used for the fields. In my case, the fields need to be more customized.</p>
  
  <p>The customized <code>labels</code> and <code>input fields</code> make the form look much nicer.</p>
  
  <p><strong>I start out with this (which is in the template that displays the form):</strong></p>
  
  <pre><code>   {% for field in form %}
          &lt;div class="form-group"&gt;
              &lt;div class="col-sm-offset-2 col-sm-10"&gt;
                  &lt;span class="text-danger small"&gt; {{ field.errors }} &lt;/span&gt;
              &lt;/div&gt;
              &lt;label class="control-label col-sm-2"&gt; {{ field.label_tag }} &lt;/label&gt;
              &lt;div class="col-sm-10"&gt; {{ field }} &lt;/div&gt;
          &lt;/div&gt;
      {% endfor %}
  </code></pre>
  
  <p><strong>Which turns into this:</strong></p>
  
  <pre><code>&lt;div class="form-group"&gt;
  
     &lt;div class="col-sm-offset-2 col-sm-10"&gt;
  
       &lt;span class="text-danger small"&gt;  
       &lt;/span&gt;
  
     &lt;/div&gt;
  
     &lt;label class="control-label col-sm-2"&gt; 
        &lt;label for="id_companyname"&gt;Company Name:&lt;/label&gt; 
  
     &lt;/label&gt;
     &lt;div class="col-sm-10"&gt; 
  
        &lt;input name="companyname" id="id_companyname" type="text" maxlength="30"&gt; 
  
     &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>But what is needed is a label/input presentation similar to the following:</strong></p>
  
  <pre><code>&lt;div class="form-group"&gt;
       &lt;label&gt;Default Input Group&lt;/label&gt;
             &lt;div class="input-group"&gt;
                  &lt;input class="form-control" placeholder="Username" aria-describedby="sizing-addon1" type="text"&gt;
                  &lt;span class="input-group-addon" id="sizing-addon1"&gt;@&lt;/span&gt;
             &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>How can one control the attributes associated with :</strong></p>
  
  <pre><code>{{ field.errors }}
  {{ field.label_tag }}
  {{ field }}  &lt;&lt;&lt; especially this one
  </code></pre>
  
  <p><strong>For example, one can see above,  <code>{{ field }}</code> produces</strong></p>
  
  <pre><code>&lt;input name="companyname" id="id_companyname" type="text" maxlength="30"&gt;
  </code></pre>
  
  <p><strong>But what is needed is:</strong></p>
  
  <pre><code>&lt;input class="form-control" placeholder="Username" aria-describedby="sizing-addon1" type="text"&gt;
  </code></pre>
  
  <p><strong>How can one control the way labels and input fields are presented?</strong></p>
  
  <p>TIA</p>