Templates

Templates are files that contain static data as well as placeholdersfor dynamic data. A template is rendered with specific data to produce afinal document. Flask uses the Jinja template library to rendertemplates.

In your application, you will use templates to render whichwill display in the user’s browser. In Flask, Jinja is configured toautoescape any data that is rendered in HTML templates. This meansthat it’s safe to render user input; any characters they’ve entered thatcould mess with the HTML, such as < and > will be escaped withsafe values that look the same in the browser but don’t cause unwantedeffects.

Jinja looks and behaves mostly like Python. Special delimiters are usedto distinguish Jinja syntax from the static data in the template.Anything between {{ and }} is an expression that will be outputto the final document. {% and %} denotes a control flowstatement like if and for. Unlike Python, blocks are denotedby start and end tags rather than indentation since static text withina block could change indentation.

Each page in the application will have the same basic layout around adifferent body. Instead of writing the entire HTML structure in eachtemplate, each template will extend a base template and overridespecific sections.

is automatically available in templates. Based on ifg.user is set (from load_logged_in_user), either the usernameand a log out link are displayed, or links to register and log inare displayed. url_for() is also automatically available, and isused to generate URLs to views instead of writing them out manually.

There are three blocks defined here that will be overridden in the othertemplates:

• {% block title %} will change the title displayed in thebrowser’s tab and window title.

• {% block content %} is where the content of each page goes, suchas the login form or a blog post.

The base template is directly in the templates directory. To keepthe others organized, the templates for a blueprint will be placed in adirectory with the same name as the blueprint.

A useful pattern used here is to place {% block title %} inside{% block header %}. This will set the title block and then outputthe value of it into the header block, so that both the window and pageshare the same title without writing it twice.

The input tags are using the required attribute here. This tellsthe browser not to submit the form until those fields are filled in. Ifthe user is using an older browser that doesn’t support that attribute,or if they are using something besides a browser to make requests, youstill want to validate the data in the Flask view. It’s important toalways fully validate the data on the server, even if the client doessome validation as well.

This is identical to the register template except for the title andsubmit button.

flaskr/templates/auth/login.html

Now that the authentication templates are written, you can register auser. Make sure the server is still running (flask run if it’s not),then go to .

Try clicking the “Register” button without filling out the form and seethat the browser shows an error message. Try removing the requiredattributes from the register.html template and click “Register”again. Instead of the browser showing an error, the page will reload andthe error from flash() in the view will be shown.

Continue to .