![\"\"](\"https:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/35-380x214.jpg\")
<\/p>\nThe quickest way to customize the form\u2019s presentation is with CSS. The list of errors in particular could do with some visual enhancement, and the <ul> has a class attribute of errorlist for that exact purpose. The following CSS really makes our errors stand out:<\/p>\n
<style type=”text\/css”>
\nul.errorlist {
\nmargin: 0;
\npadding: 0;
\n}
\n.errorlist li {
\nbackground-color: red;
\ncolor: white;
\ndisplay: block;
\nfont-size: 10px;
\nmargin: 0 0 3px;
\npadding: 4px 5px;
\n}
\n<\/style><\/p>\n
<\/p>\n
While it\u2019s convenient to have our form\u2019s HTML generated for us, in many cases the default rendering won\u2019t be right for our application. {{ form.as_table }} and friends are useful shortcuts while we develop our application, but everything about the way a form is displayed can be overridden, mostly within the template itself.<\/p>\n
Each field widget (<input type=”text”>, <select>, <textarea>, or similar) can be rendered individually by accessing {{ form.fieldname }}. Any errors associated with a field are available as {{ form.fieldname.errors }}. We can use these form variables to construct a custom template for our contact form:<\/p>\n
<form action=”.” method=”POST”>
\n<div class=”fieldWrapper”>
\n{{ form.topic.errors }}
\n<label for=”id_topic”>Kind of feedback:<\/label>
\n{{ form.topic }}
\n<\/div>
\n<div class=”fieldWrapper”>
\n{{ form.message.errors }}
\n<label for=”id_message”>Your message:<\/label>
\n{{ form.message }}
\n<\/div>
\n<div class=”fieldWrapper”>
\n{{ form.sender.errors }}
\n<label for=”id_sender”>Your email (optional):<\/label>
\n{{ form.sender }}
\n<\/div>
\n<p><input type=”submit” value=”Submit”><\/p>
\n<\/form><\/p>\n
{{ form.message.errors }} will display as a <ul class=”errorlist”> if errors are present and a blank string if the field is valid (or the form is unbound). We can also treat form.message.errors as a Boolean or even iterate over it as a list, for example:<\/p>\n
<div class=”fieldWrapper{% if form.message.errors %} errors{% endif %}”>
\n{% if form.message.errors %}
\n<ol>
\n{% for error in form.message.errors %}
\n<li><strong>{{ error|escape }}<\/strong><\/li>
\n{% endfor %}
\n<\/ol>
\n{% endif %}
\n{{ form.message }}
\n<\/div><\/p>\n
In the case of validation errors, this will add an \u201cerrors\u201d class to the containing <div> and display the list of errors in an ordered list.<\/p>\n
By default, the labels on Django\u2019s auto-generated form HTML are created by replacing underscores with spaces and capitalizing the first letter \u2013 so the label for the email field is \u201cEmail\u201c. (Sound familiar? It\u2019s the same simple algorithm that Django\u2019s models use to calculate default verbose_name values for fields.) But, as with Django\u2019s models, we can customize the label for a given field. Just use label, like so:<\/p>\n
class ContactForm(forms.Form):
\nsubject = forms.CharField(max_length=100)
\nemail = forms.EmailField(required=False, label=’Your e-mail address’)
\nmessage = forms.CharField(widget=forms.Textarea)<\/p>\n
Our contact_form.html template uses {{ form.as_table }} to display the form, but we can display the form in other ways to get more granular control over display. The quickest way to customize forms\u2019 presentation is with CSS. Error lists, in particular, could do with some visual enhancement, and the auto-generated error lists use <ul class=”errorlist”> precisely so that you can target them with CSS. Add the following CSS in the <head><\/head> section of contact_form.html to really make our errors stand out (Figure 6-9):<\/p>\n
<style type=”text\/css”>
\nul.errorlist {
\nmargin: 0;
\npadding: 0;
\n}
\n.errorlist li {
\nbackground-color: red;
\ncolor: white;
\ndisplay: block;
\nfont-size: 1.2em;
\nmargin: 0 0 3px;
\npadding: 4px 5px;
\n}
\n<\/style><\/p>\n
<\/p>\n
While it\u2019s convenient to have our form\u2019s HTML generated for us, in many cases you\u2019ll want to override the default rendering. {{ form.as_table }} and friends are useful shortcuts while you develop your application, but everything about the way a form is displayed can be overridden, mostly within the template itself, and you\u2019ll probably find yourself doing this.<\/p>\n
Each field\u2019s widget (<input type=”text”>, <select>, <textarea>, etc.) can be rendered individually by accessing {{ form.fieldname }} in the template, and any errors associated with a field are available as {{ form.fieldname.errors }}. With this in mind, we can construct a custom template for our contact form with the following template code:<\/p>\n
<html>
\n<head>
\n<title>Contact us<\/title>
\n<\/head>
\n<body>
\n<h1>Contact us<\/h1><\/p>\n
{% if form.errors %}
\n<p style=”color: red;”>
\nPlease correct the error{{ form.errors|pluralize }} below.
\n<\/p>
\n{% endif %}<\/p>\n
<form action=”” method=”post”>
\n<div class=”field”>
\n{{ form.subject.errors }}
\n<label for=”id_subject”>Subject:<\/label>
\n{{ form.subject }}
\n<\/div>
\n<div class=”field”>
\n{{ form.email.errors }}
\n<label for=”id_email”>Your e-mail address:<\/label>
\n{{ form.email }}
\n<\/div>
\n<div class=”field”>
\n{{ form.message.errors }}
\n<label for=”id_message”>Message:<\/label>
\n{{ form.message }}
\n<\/div>
\n{% csrf_token %}
\n<input type=”submit” value=”Submit”>
\n<\/form>
\n<\/body>
\n<\/html><\/p>\n
In the above template code, {{ form.message.errors }} displays a <ul class=”errorlist”> if errors are present and a blank string if the field is valid (or the form is unbound). This is the same for the other fields on our contact form.<\/p>\n
We can also treat form.message.errors as a Boolean or even iterate over it as a list. This is useful when there can be multiple errors associated with a field. For example:<\/p>\n
<div class=”field{% if form.message.errors %} errors{% endif %}”>
\n{% if form.message.errors %}
\n<ul>
\n{% for error in form.message.errors %}
\n<li><strong>{{ error }}<\/strong><\/li>
\n{% endfor %}
\n<\/ul>
\n{% endif %}
\n<label for=”id_message”>Message:<\/label>
\n{{ form.message }}
\n<\/div><\/p>\n
In the case of validation errors, this will add an \u201cerrors\u201d class to the containing <div> and display the list of errors associated with the message field in an unordered list.<\/p>\n\n\n