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="http://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="http://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="http://stackoverflow.com/posts/5930179/revisions">http://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="http://i.stack.imgur.com/5x3Ck.png" rel="nofollow"><img src="http://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>

<p>Ok, I figured it out. </p>

<p>The trick was to realize that Django will already render its form tags (i.e. {{form.firstName}}) to an input tag. We can then add class attributes to this tag in in forms.py where we define this form:</p>

<p><strong>HTML:</strong></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;
	   {{ form.firstName }}
	 &lt;/div&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>

<p><strong>FORMS.PY:</strong></p>

<pre><code>class newUserRegistration(forms.Form):
firstName = forms.CharField(widget=forms.TextInput(attrs={'type': 'text', 'id':'register-form-name', 'name':'register-form-name', 'value':"", 'class':'form-control'}))
</code></pre>

<p><strong>THIS RENDERS THE HTML AS FOLLOWS</strong></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;/form&gt;</code></pre>
</div>
</div>
</p>

<p>By adding the attributes to forms.py we are essentially rendering the input tag into the HTML.</p>

python html css django