Django Form Template Layout

In this tutorial, we will attempt to comprehend how to use HTML Forms in Django to create forms that collect user information and produce a simple template layout. A form in HTML is a collection of components contained within the <form> tag. These components enable the user to enter values, selection options, and other information, as well as update the database or send the data back to the server. Because there are widgets that are suitable for entering a wide range of different types of data, such as text boxes, checkboxes, radio buttons, date pickers, and so on, forms are an adaptable method for collecting user input.

The only HTTP methods that are utilized in the method attribute of <form> are GET and POST. The GET method is used to ask a web server for the URL so that HTML documents can be retrieved. The POST method’s objective is to update the data.

Creating Django Forms

Django forms are an advanced set of HTML forms that can be made with python and support all of the pythonic features of HTML forms. A project and an app need to be running for Django Forms to be used. You can create a form in app/forms.py after starting an app. In Django, creating a form is very similar to creating a model in that one must specify the type and number of fields in the form. A contact form, for instance, may require input fields for Name (CharField), Gender (CharField), Email (EmailField) and so on. 

from django import forms

CHOICES = [('M', 'Male'), ('F', 'Female')]

class ContactForm(forms.Form):
    name = forms.CharField(max_length=20)
    gender=forms.CharField(label='gender',widget=forms.RadioSelect(choices=CHOICES))
    email = forms.EmailField(max_length=60)
    address = forms.CharField(max_length=100)

Render Django Forms

If you use form.as_table, form.as_p, form.as_ul you must declare opening/closing HTML tags, a wrapping <form> tag, a Django {% csrf_token %} tag and an <input type="submit"> button. Django forms offer three helper methods to simplify the output of all form fields.

• form.as_table: Syntax for using form.as_table is <table>.

<tr>
    <th><label for="name">Name:</label></th>
    <td><input id=" name" name="name" type="text" /></td>
</tr>\n
<tr>
<label>Gender:</label>  <br>
<input type="radio" id="gender" name="gender" value="male"/> Male  <br> 
<input type="radio" id="gender" name="gender" value="female"/> Female <br/></tr>
<tr>
<th><label for="email">Your email:</label></th>
    <td><input id="email" name="email" type="email" required/></td>
</tr>\n
<tr>
    <th><label for="address">Comment:</label></th>
    <td><textarea cols="40" id="address" name="address" rows="10" required>\r\n </textarea> </td>
</tr>

• form.as_p: Form output is illustrated in HTML form using <p> tag.

<p>
    <label for="name">Name:</label></th>
    <input id=" name" name="name" type="text" />
</p>\n
<p>
<label>Gender:</label>  <br>
<input type="radio" id="gender" name="gender" value="male"/> Male  <br> 
<input type="radio" id="gender" name="gender" value="female"/> Female <br/></p>
<p>
<label for="email">Your email:</label>
    <input id="email" name="email" type="email" required/>
</p>\n
<p>
    <label for="address">Comment:</label>
    <textarea cols="40" id="address" name="address" rows="10" required> \r\n </textarea>
</p>

• form.as_ul: This layout is shown using <ul> list tag

<li>
    <label for="name">Name:</label></th>
    <input id=" name" name="name" type="text" />
</li>\n
<li>
<label>Gender:</label>  <br>
<input type="radio" id="gender" name="gender" value="male"/> Male  <br> 
<input type="radio" id="gender" name="gender" value="female"/> Female <br/></li>
<li>
<label for="email">Your email:</label>
    <input id="email" name="email" type="email" required/>
</li>\n
<li>
    <label for="address">Comment:</label>
    <textarea cols="40" id="address" name="address" rows="10" required>\r\n   </textarea>
</li>

Django Form Field Attributes

In case for further reference, take a look on GitHub.