Django with HTML Forms
<p>I know how to set up Django forms to have Django render them. Unfortunately styling forms then becomes a little less straight forward. I am interested in finding a way to have the HTML form pass its entered values to Django. The HTML form is completely programmed in HTML and CSS. Just for context, please find below a list of solutions I dismissed for several reasons:</p>

<ul>
<li>Set up custom template filter (<a href="https://stackoverflow.com/questions/5827590/css-styling-in-django-forms">CSS styling in Django forms</a>)</li>
<li>Use a for loop in order to loop through each form and render each field in turn (<a href="https://stackoverflow.com/questions/18805999/how-to-style-a-django-form-bootstrap">How to style a django form - bootstrap</a>)</li>
<li>Reference the form fields directly y using list items <a href="https://stackoverflow.com/posts/5930179/revisions">https://stackoverflow.com/posts/5930179/revisions</a></li>
</ul>

<p>My problem with the first two solutions is that my s inside my form rely on class attributes which sees them assigned into a left or right column (col_half and col_half col_last). </p>

<p>The third doesn't quite work for me since my form is not using list items. If I happen to convert my form into list items, a strange border is added into the form field (see screenshot below). </p>

<p>As such I am wondering whether there is a way to just keep my HTML template and assign its valued to the forms.py one-by-one without getting this strange border (ideally I would like to stick to my input tag)? Any ad advice would be highly appreciated.</p>

<p>Please see the HTML form below:</p>

<p><a href="https://i.stack.imgur.com/5x3Ck.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5x3Ck.png" alt="strange border in First Name field"></a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="register-form" name="register-form" class="nobottommargin" action="#" method="post"&gt;
      &lt;div class="col_half"&gt;
        &lt;label for="register-form-name"&gt;First Name:&lt;/label&gt;
        &lt;input type="text" id="register-form-name" name="register-form-name" value="" class="form-control"/&gt;
      &lt;/div&gt;
  
      &lt;div class="col_half col_last"&gt;
        &lt;label for="register-form-name"&gt;Last Name:&lt;/label&gt;
     &lt;input type="text" id="register-form-name" name="register-form-name" value="" class="form-control" /&gt;
      &lt;/div&gt;
  
      &lt;div class="col_half"&gt;
        &lt;label for="register-form-email"&gt;Email Address:&lt;/label&gt;
        &lt;input type="text" id="register-form-email" name="register-form-email" value="" class="form-control" /&gt;
      &lt;/div&gt;
  
      &lt;!-- &lt;div class="clear"&gt;&lt;/div&gt; --&gt;
  
      &lt;div class="col_half col_last"&gt;
        &lt;label for="register-form-username"&gt;Choose a Username:&lt;/label&gt;
        &lt;input type="text" id="register-form-username" name="register-form-username" value="" class="form-control" /&gt;
      &lt;/div&gt;
  
      &lt;div class="col_half"&gt;
        &lt;label for="register-form-phone"&gt;Phone:&lt;/label&gt;
        &lt;input type="text" id="register-form-phone" name="register-form-phone" value="" class="form-control" /&gt;
      &lt;/div&gt;
  
      &lt;!--&lt;div class="clear"&gt;&lt;/div&gt; --&gt;
  
      &lt;div class="col_half col_last"&gt;
        &lt;label for="register-form-phone"&gt;Country&lt;/label&gt;
     &lt;input type="text" id="register-form-phone" name="register-form-phone" value="" class="form-control" /&gt;
      &lt;/div&gt;
  
      &lt;div class="col_half"&gt;
        &lt;label for="register-form-password"&gt;Choose Password:&lt;/label&gt;
        &lt;input type="password" id="register-form-password" name="register-form-password" value="" class="form-control" /&gt;
      &lt;/div&gt;
  
      &lt;div class="col_half col_last"&gt;
        &lt;label for="register-form-repassword"&gt;Re-enter Password:&lt;/label&gt;
        &lt;input type="password" id="register-form-repassword" name="register-form-repassword" value="" class="form-control" /&gt;
      &lt;/div&gt;
  
      &lt;div class="clear"&gt;&lt;/div&gt;
  
      &lt;div class="col_full nobottommargin"&gt;
        &lt;button class="button button-3d button-black nomargin" id="register-form-submit" name="register-form-submit" value="register"&gt;Register Now&lt;/button&gt;
      &lt;/div&gt;

&lt;/form&gt;</code></pre>
</div>
</div>
</p>