Chapter 4. Please Fill in This Form, Madam

Have you ever imagined what happens when you fill in a form on a website and click on that fancy Send button at the end of it? Well, all the data you wrote—comment, name, checkbox, or whatever—is encoded and sent through a protocol to the server, which then routes that information to the Web application. The Web application will validate the data origin, read the form, validate the data syntactically then semantically, and then decide what to do with it. Do you see that long chain of events where every link might be the cause of a problem? That's forms for you.

In any case, there is nothing to fear! Flask can help you in those steps but there are also tools specifically designed for this purpose. In this chapter, we will learn:

  • How to write and handle forms with Flask
  • How to validate form data
  • How to use WTForms to validate forms with Flask
  • How to implement cross-site request forgery protection

This will actually be a fairly smooth chapter, with lots of new info but nothing complex. Hope you enjoy it!

HTML forms for the faint of heart

HTML is, pretty much, the language in which the Web is written. With the help of special markups called tags, it's possible to add meaning and context to plain text, turning it into HTML. For us, HTML is a means to an end. So, if you want to learn more about it, please open http://www.w3schools.com/html/ in your preferred browser. We are not covering HTML syntax fully, nor all the beautiful magic involved in the process.

Although we will not cover HTML extensively, we will cover HTML specifically; by this, I refer to the <form> tag. Here is the deal: every time you open a webpage and there are a few blank fields for you to fill in, you're most likely filling in an HTML form. That's the plainest way to transfer data from your browser to a server. How does that work? Let's see an example:

<!-- example 1 -->
<form method='post' action='.'>
<input type='text' name='username' />
<input type='password' name='passwd' />
<input type='submit' />
</form>

In the preceding example, we have a full login form. Its beginning is defined by the <form> tag, which has two non-required attributes: method and action. The method attribute defines how you want your form data to be sent to the server when it is sent. Its value could be either get or post. You should use get, which is the default, only when the form data is small (a few hundred characters), not sensitive (it doesn't matter if someone else sees it) and there are no files in the form. These requirements exist because when using get, all the form data will be appended to the current URL as encoded parameters before being sent. In our example, the chosen method is post because one of our input fields is a password and we don't want other people looking into our password. A good use case for using the get method would be with search forms. For example:

<!-- example 2 -->
<form action='.'>
<input type='search' name='search' />
</form>

In example 2, we have a simple search form. If we fill the name input with the search term SearchItem and hit Enter, the URL will look like this:

http://mydomain.com/?search=SearchItem

The preceding URL would then be saved into the browser history and anyone with access to it would be able to see what the previous user was searching for. In the case of sensitive data, that's bad.

Anyway, back to example 1. The second attribute, action, is useful for telling the browser which URL should receive and respond to the form data. We used '.' as its value because we want the form data to be sent to the current URL.

The next two lines are our input fields. Input fields are used to collect user data and, contrary to what the name may suggest, an input field may be an input, textarea, or select element. When using input fields, always remember to name them with the attribute name as it facilitates handling them in the Web application.

In the third line we have a special input field, which does not necessarily have any data to be sent, the Submit input button. By default, a form will be sent if you press Enter while an input element has focus or when a Submit button is pressed. Our example 1 is the latter.

Wow! Finally, our form is written and explained. For an extensive list of possible types for an input field, take a look at http://www.w3schools.com/tags/tag_input.asp.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.134.81.206