Previous Page Next Page

Rendering Forms as HTML

An instance of a Form object can be rendered as HTML in a couple of ways. The first way is to render the form inside Python code—for example, inside a view function when building the text for the HttpResponse. The second way is to pass the form object as a variable to an HTML template file and then render the form inside the template itself.

Django provide three different versions of form rendering. The following sections discuss rendering forms as tables, lists, and paragraphs. The table version seems to be the most popular. Which one you use depends on how you want the form to be displayed.

Rendering Forms as a Table

Django provides the as_table() function to render forms as an HTML table. This method is also the default method if you simply use the print function to print the form.

When forms are rendered as an HTML table, each Field in the form is rendered as a two-column row. The first column displays the label in a <th> tag. The second column uses the HTML equivalent of the Widget object assigned to the Field to display the value in a <td> tag. For example, a CharField that is labeled Name and has a value of Tim renders to the following HTML:

<tr><th><label for"id_name"Name:</label><th>
<td><input type="text" name="name" value="Tim" /></td></tr>

By the Way

There are no <table> or <form> tags around the rendered table. This gives you much more flexibility in building the view.


The following line of code shows how to render a Form object as an HTML table in Python code:

html += myForm.as_table()

The following line of code shows how to render a Form object as an HTML table in an HTML template:

{{ myForm.as_table }}

Rendering Forms as a List

Django provides the as_ul() function to render forms as an HTML list. When forms are rendered as an HTML list, each Field in the form is rendered as a list item with a <label> and <input> tag. The <label> tag displays the label of the Field. The <input> tag displays the HTML equivalent of the Widget object assigned to the Field. For example, a CharField that is labeled Name and has a value of Tim renders to the following HTML:

<li><label for"id_name"Name:</label>
<input type="text" name="name" value="Tim" /></li>

By the Way

There are no <form> tags around the rendered list. This gives you much more flexibility in building the view.


The following line of code shows how to render a Form object as an HTML list in Python code:

html += myForm.as_ul()

The following line of code shows how to render a Form object as an HTML list in an HTML template:

{{ myForm.as_ul }}

Rendering Forms as Paragraphs

Django provides the as_p() function to render forms as HTML paragraphs. When forms are rendered as HTML paragraphs, each Field in the form is rendered inside <p> tags with <label> and <input> tags. The <label> tag displays the label of the Field. The <input> tag displays the HTML equivalent of the Widget object assigned to the Field. For example, a CharField that is labeled Name and has a value of Tim renders to the following HTML:

<p><label for"id_name"Name:</label>
<input type="text" name="name" value="Tim" /></p>

By the Way

There are no <form> tags around the rendered paragraph. This gives you much more flexibility in building the view.


The following line of code shows how to render a Form object as an HTML paragraph in Python code:

html += myForm.as_p()

The following line of code shows how to render a Form object as an HTML paragraph in an HTML template:

{{ myForm.as_p }}

Try It Yourself: Render a Form as HTML

In this section, you will add a contact_view() view to the iFriends website and create a basic form that will allow users to send emails to the site admin. You will create a new application called Home to store the contact_view() view in.

Did you Know?

When you add the Home application, you do not need to stop and then restart the server or add a line to the INSTALLED_APPS setting in the settings.py file. You will not be adding any model information that will need to be synchronized to the database.


Follow these steps to create the Home application, add a contact_view(), and create a contact form:

1.
From the iFriends root directory, use the following command to create an application called Home:

python manage.py startapp Home

2.
Open the iFriends/Home/views.py file in an editor.

3.
Add the following code to the file, as shown in Listing 10.1, to import the render_to_response and forms objects:

from django.shortcuts import render_to_response
from django import newforms as forms

4.
Add the following code to the file, as shown in Listing 10.1, to define the EmailForm form:

class EmailForm(forms.Form):
        title = forms.CharField(max_length=50)
        sender = forms.EmailField()
        date = forms.DateTimeField()
        text = forms.CharField(max_length=200)

5.
Add the following contact_view() function, as shown in Listing 10.1, to create an instance of the EmailForm and call the contact_form.html template:

def contact_view(request):
    eForm = EmailForm()
    return render_to_response('home/contact_form.html', { 'eForm':eForm })

6.
Save the iFriends/Home/views.py file.

7.
Create a directory called iFriends/templates/Home.

8.
Create and open an iFriends/templates/Home/contact_form.html file in an editor.

9.
Add the template code shown in Listing 10.2 to extend the base template and render the eForm variable as a table.

10.
Save the iFriends/templates/Home/contract_form.html file.

11.
Open the iFriends/urls.py file in an editor.

12.
Add the following line to the URL patterns to provide the URL link to the contact_view() view function:

(r'^Home/contact/$', 'iFriends.Home.views.contact_view'),

13.
Save the iFriends/urls.py file.

14.
Access the following URL in a web browser to bring up the contact view, shown in Figure 10.1, and verify that the form renders correctly:

http://127.0.0.1:8000/Home/contact/

Figure 10.1. Contact form rendered as an HTML table in the contact_form.html template.

[View full size image]


Listing 10.1. Full Contents of iFriends/Home/views.py

from django.shortcuts import render_to_response, get_object_or_404
from datetime import datetime
from django import newforms as forms

class EmailForm(forms.Form):
        title = forms.CharField(max_length=50)
        sender = forms.EmailField()
        date = forms.DateTimeField()
        text = forms.CharField(max_length=200)

def contact_view(request):
    eForm = EmailForm()
    return render_to_response('home/contact_form.html', { 'eForm':eForm })

Listing 10.2. Full Contents of iFriends/templates/Home/contact_form.html

{% extends "iFriends_base.html" %}

{% block title %}Contact Us{% endblock %}
{% block content %}
<table>
{{ eForm }}
</table>
{% endblock %}


Previous Page Next Page