Django Blog #22: Rendering Forms in Templates

After creating the form and view and adding the URL template, the only thing missing is a template for that view. Create a new file in the blog/templates/blog/post/ folder and name it share.html. After that, add the following code:

{% extends "blog/base.html" %}  
  
{% block title %}Share a post{% endblock %}  
  
{% block content %}  
  {% if sent %}  
    <h1>E-mail successfully sent</h1>  
    <p>  
      "{{ post.title }}" was successfully sent to {{ form.cleaned_data.to }}.  
    </p>  
  {% else %}  
    <h1>Share "{{ post.title }}" by e-mail</h1>  
    <form action="." method="post">  
      {{ form.as_p }}  
      {% csrf_token %}  
      <input type="submit" value="Send e-mail">  
    </form>  
  {% endif %}  
{% endblock %}

This is the template for displaying a form or message about a successful submission. As you can see, a form HTML element is created. It is sent using the POST method:

<form action="." method="post">

The actual form instance is then included. Django is told to render the fields in the HTML paragraphs – <p> elements using the as_p method. You can also render forms as an unnumbered list with as_ul or as an HTML table with as_table. If you want to render every field, you can search through the fields as in this example:

{% for field in form %}
  <div>
    {{ field.errors }}
    {{ field.label_tag }} {{ field }}
  </div>
{% endfor %}

The template label {% csrf_token %} is a hidden field with an automatically generated token that avoids cross-site request forgery (CSRF, “cross-site request forgery”) attacks. Such an attack is a malicious site or program that performs unwanted actions on the site for the user. For more information, see https://www.owasp.org/index.php/Cross-Site_Request_Forgery_ (CSRF). This shortcut generates a hidden field that looks like this:

<input type='hidden' name='csrfmiddlewaretoken'
value='26JjKo2lcEtYkGoV9z4XmJIEHLXN5LDR' />

By default Django checks the CSRF – token for all POST requests. Don’t forget to include the_ csrf_token shortcode in all forms submitted via POST

. Edit the blog/post/detail.html template and add the following link in the URL of the post to be shared, after the {{ post.body|linebreaks }} variable:

<p>
  <a href="{% url 'blog:post_share' post.id %}">
    Share this post
  </a>
</p>

URLs are created dynamically using the {% url %} template shortcut from Django. The blog namespace and post_share URLs are used. The post ID is passed as a parameter to create the absolute URL. Start the development server with the python manage.py runserver command and open https://127.0.0.1:8000/blog/ in your browser. Click on the title of any post, below it will be the added link: Click on “Share this post.” This will open a page with a form to share this post via email:

If the data is incorrect, the form will re-render with validation errors. Some modern browsers will not allow forms to be submitted with blank or incorrect fields. This is because form validation by browsers is based on field types and their limitations. In this case, the form will not be submitted and the browser will display an error for invalid fields.The form to share posts via email is ready. Next we’ll create a comment system for the blog.