Django with HTML Forms

Question

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:

Set up custom template filter (CSS styling in Django forms)
Use a for loop in order to loop through each form and render each field in turn (How to style a django form - bootstrap)
Reference the form fields directly y using list items https://stackoverflow.com/posts/5930179/revisions

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

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

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.

Please see the HTML form below:

<form id="register-form" name="register-form" class="nobottommargin" action="#" method="post">
      <div class="col_half">
        <label for="register-form-name">First Name:</label>
        <input type="text" id="register-form-name" name="register-form-name" value="" class="form-control"/>
      </div>
  
      <div class="col_half col_last">
        <label for="register-form-name">Last Name:</label>
     <input type="text" id="register-form-name" name="register-form-name" value="" class="form-control" />
      </div>
  
      <div class="col_half">
        <label for="register-form-email">Email Address:</label>
        <input type="text" id="register-form-email" name="register-form-email" value="" class="form-control" />
      </div>
  
      <!-- <div class="clear"></div> -->
  
      <div class="col_half col_last">
        <label for="register-form-username">Choose a Username:</label>
        <input type="text" id="register-form-username" name="register-form-username" value="" class="form-control" />
      </div>
  
      <div class="col_half">
        <label for="register-form-phone">Phone:</label>
        <input type="text" id="register-form-phone" name="register-form-phone" value="" class="form-control" />
      </div>
  
      <!--<div class="clear"></div> -->
  
      <div class="col_half col_last">
        <label for="register-form-phone">Country</label>
     <input type="text" id="register-form-phone" name="register-form-phone" value="" class="form-control" />
      </div>
  
      <div class="col_half">
        <label for="register-form-password">Choose Password:</label>
        <input type="password" id="register-form-password" name="register-form-password" value="" class="form-control" />
      </div>
  
      <div class="col_half col_last">
        <label for="register-form-repassword">Re-enter Password:</label>
        <input type="password" id="register-form-repassword" name="register-form-repassword" value="" class="form-control" />
      </div>
  
      <div class="clear"></div>
  
      <div class="col_full nobottommargin">
        <button class="button button-3d button-black nomargin" id="register-form-submit" name="register-form-submit" value="register">Register Now</button>
      </div>

</form>

score 5 · Answer 1 · edited Feb 17 '22 at 14:22

Ok, I figured it out.

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:

HTML:

<form id="register-form" name="register-form" class="nobottommargin" action="#" method="post">
     <div class="col_half">
       <label for="register-form-name">First Name:</label>
       {{ form.firstName }}
     </div>
</form>

FORMS.PY:

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'}))

class Meta:
    # specify model to be used
    model = model_name
    exclude = ()

THIS RENDERS THE HTML AS FOLLOWS

<form id="register-form" name="register-form" class="nobottommargin" action="#" method="post">
      <div class="col_half">
        <label for="register-form-name">First Name:</label>
        <input type="text" id="register-form-name" name="register-form-name" value="" class="form-control" />
      </div>
</form>

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

Django with HTML Forms

1 Answers1