Made withFlaskClip

Flask Tutorial #4 - HTTP Methods (GET/POST) & Retrieving Form Data

T

Tech With Tim

Creator on the Flask channel

Watch on YouTube ↗

526K viewsNov 2, 201911:06 runtime

Learn the fundamentals of handling user input in your Flask applications by exploring the GET and POST HTTP methods. This tutorial explains the key differences between these methods, focusing on when to use each for secure and non-secure data transmission. Follow a practical…

Chapters

#flask#clip#backend

Key Concepts: HTTP Methods & Form Data in Flask

This guide covers how to use GET and POST HTTP methods in a Flask application to handle and retrieve data from an HTML form.

HTTP Methods: GET vs. POST

GET: The default method for retrieving data from a server. Data is sent in the URL, making it visible and insecure. It's suitable for non-sensitive operations like navigating to a page.
POST: Used to send data to a server to create or update a resource. The data is sent in the request body, not the URL, making it more secure. Use POST for submitting forms with sensitive information like passwords or personal details.

Note
A GET request is visible in the browser's address bar and history, whereas POST data is not. This is a crucial security distinction.

Handling Methods in Flask

To allow a route to accept multiple HTTP methods, use the methods argument in the @app.route() decorator.

from flask import request, redirect, url_for, render_template

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        # Handle the form submission
        user_name = request.form['nm']
        return redirect(url_for('user', usr=user_name))
    else:
        # Display the login form
        return render_template('login.html')

The global request object from Flask provides access to incoming request data.
request.method is a string ('GET', 'POST', etc.) that tells you which method was used for the current request.

Building an HTML Form for POST

When creating an HTML form to send data, specify method="POST". Each input field that you want to access in Flask must have a unique name attribute.

<form action="#" method="POST">
  <p>Name</p>
  <p><input type="text" name="nm" /></p>
  <p><input type="submit" value="Submit" /></p>
</form>

Important
The name attribute of an <input> tag (e.g., name="nm") becomes the key for accessing its value in Flask's request.form dictionary.

Retrieving Form Data

When a form is submitted via POST, Flask populates the request.form object. It behaves like a dictionary, where keys are the name attributes from your form's input fields.

# In the POST request handler
user_name = request.form['nm'] # Accesses the value of the input with name="nm"

After processing the data, it's common practice to use redirect and url_for to send the user to a new page, preventing issues with form re-submission if the user refreshes the page.

Introduction to HTTP Methods

Hello everyone, and welcome back to another Flask tutorial. So, in today's video, we're going to be talking about two basic HTTP methods, which are GET and POST. Now, these are just ways of sending information to our server or to our client, whoever's using the website. We're going to talk about the differences between both of them, and then go through a basic example of how we can send, for example, some password data or some name data from a form to the back end of our website, so it can be processed and we can do something with that.

In future videos, we'll get into some more advanced things. We'll talk about databases, logging in, sessions, all of that, and we'll just go with it this until we kind of run out of things to do.

GET vs. POST: Security and Visibility

So, before I get too far into this, we need to explain what GET and what POST are, which are the two HTTP methods I'm going to explain today. Now, you've probably heard of both of these before. GET is the most common way of, well, getting or sending information to a website or, you know, to a client, depending on whatever way this information's going. POST is a way of doing this securely. So, GET essentially is an insecure way of getting information. It's most commonly used, and a basic example of that is, let's bring up the website here. When we type something in the URL bar or in the address bar.

So, you can see here, I've connected to my website. I have it running here. It just has the home page on it, and if I refresh this, we see in the console, we have a command that pops up saying GET. Now, what does this mean? Well, essentially, whenever we type something here that's not secure, which means, you know, anyone can see it, it's not secure information, it will send to the server here, and then it will return to us the actual webpage using a GET method.

Now, if we were to use POST, what we would actually do is send secure information that's encrypted, that cannot be, you know, seen from either ends, and is not stored on the actual web server. So, that is kind of the difference between GET and POST. Now, I know this might be a little bit confusing right now. I'm probably not explaining it in the best way, but as we go through the video, you guys will understand kind of the main differences between that.

But, the basic way to think of it is whenever you're using a GET command, it's something that's not secure, that you don't care if someone sees it. It's typically just typed in through the address bar, or it's just a link, you redirect to it. And then with POST, that's something that's secure. It's usually form data, and it's something that we're not going to be saving on the actual web server itself, unless we're going to be sending that to a database.

All right. So, let's now go through a basic example. I just want to set up a few different pages here for this example first, and then we'll get into actually sending the information. So, what I want to do is a really basic script, where essentially, we have a little dialogue box. Someone can, you know, type in hello. They can hit a button. It's going to send that information to the server using a POST request, which we'll talk about in a second, or a POST method. And then, we're going to display that information on another page.

So, what I want to do is set up a page here for logging in, or just, actually, we'll just say, uh, yeah, we'll just call it login for now, although it's not really a login. Um, we'll give this a decorator, so at app.route, and then we're going to just going to put /login.

Now, in this decorator, I'm actually going to add another aspect that we haven't seen yet, which is the methods we can use on this login page. So, by default, whenever you connect or, you know, go to one of these pages, you're going to go with a get request, which means that, you know, we're just going to get that information, it's not going to be secure, and that's fine. But, we can actually have different methods. So, if I wanted to find the different methods that are going to be allowed from these pages, I can say methods equals, make a list, and then put POST and GET, because for this specific function or this specific page, we're going to need to use those.

Now, inside of here, um, for right now, actually, we'll just return render_template, and then we won't put anything in here, actually, we haven't created a template. And let's create one more page. We'll say define user. It's actually going to take the variable usr, and then inside here, we'll just say return render_template, and then again, in here, we'll put something else after. So, let's do @app.route. Let's make this dynamic, so that we can actually just pass through the user right into here. So, we'll say /, and in this case, user, like that. And we should be, actually, this is going to have to say usr. My apologies. And actually, instead of returning render_template, I'm actually just going to return some basic HTML, because I just want to make this easy. So, let's just say, you know, h1. We'll do this in an F string, so we'll say usr. We'll put an F here. And then, we'll do a /h1 to close that there.

Okay, so now, what I'm going to do is go and build out this login page as a basic HTML form. So, inside of my templates, what I'm going to do is create a new file. Let's just call this login.html. And then, inside here, we'll start creating the form. So, we're going to first start by extending that base.html. So, we'll say extends, and then here, if I could spell this correctly, base.html.

Then, we'll do these tags for our title, so we'll say block title, and then we'll end our block here. And then, inside here, we'll just put Login Page, like that. Okay, so let's do some more blocks for the content. We'll just do a quick form here, nothing too crazy. We'll say block content...endblock. And now, we'll start building out our form.

So, essentially, forms are a way that we can actually send information to the website. We're usually going to send information through forms. So, whenever we know we're going to be, you know, getting some information from a form, we need to put our form tags in HTML. I'm sure most of you guys know that, but I'm just going to specify that here. And we need to say the action that this form is going to take. Now, the action essentially is just a URL that we want to redirect to once this form is submitted. So, in this case, I'm actually just going to put the pound sign, which means we're going to go back to the same page, and we're just going to do, you know, whatever the same page we're at, you know, /pound. This is kind of a basic way of just saying, you know, we're going to stay on the same page.

Now, after action, we're also going to put method, and in this case, our method is actually going to be POST, because we're going to be posting information, not getting information. Usually, if you put GET in here, that means you're actually going to fill this form with information that you get from the server. OK, so now, we're just going to do some basic things. So, I'm just going to say <p>. I'm going to say Name, and here, we'll just ask the user for their name. We'll do another p tag. Oops, I didn't want to do form there. I want to do /p. End that p tag, and then in here, we're actually going to put an input. We'll say type equals... if I could end this here... type equals text, and then name equals, and make sure you remember this. Let's just call this nm, just for name. And then, we'll do another input, so we'll actually copy this, except this time, we're going to make this a submit button. We're just going to say input type equals submit, and instead of name, we're going to say value equals, in this case, we'll just put Submit as the value there. Okay, so now, we've built out this form.

Handling GET and POST Logic in Flask

This is going to be a page that we render. I don't think I made any mistakes, but knowing me, I probably did. So, in here, for rendering this template now, what we're going to do is simply just put in login.html, and we don't need to pass that any information. All right, so we've created the form, and we've created and rendered this template now. So, now, what we need to do is figure out how we're actually going to get this information and handle it from this side.

So, let's start by actually, um, this should hopefully update here. So, let's actually go and look at the website and go to /login and just see what we get. So, when we go to /login, we can see this is kind of what we're getting now. We have, you know, a basic little box where we can type some things in, and we have a submit button. And notice that when I hit that, we're posting, and you can see that it has this little hashtag here. And it notice that it's different, because it's saying POST, whereas if I were to refresh this, then we're going to get a GET request, rather than POST. Okay. So, awesome. That is all we have for now.

So, now, what I need to do is actually say, how can we determine in this login function, whether we called the GET request or whether we called the POST request? What we need to do is start by importing request. So, we're just going to import request up here with render_template. And now, I'm going to show you how we can check whether we reached this page with a GET request or a POST request. It's pretty basic. All we're going to do is just say, if request.method ==, and make sure this is in all capitals, POST, then we're going to do something specific. Otherwise, we'll do something else. So, in this case, what I'm going to do is move this render down here. So, if we have the GET request, what we're going to do is render the login template, because that means, you know, we didn't click the submit button, we're just going to the /login page, so let's show it here. But, if we have POST, what I want to do is actually get the information that was from that little name box, and then use that and send us to the user page, where we can display the user's name.

Retrieving Form Data and Redirecting the User

So, how do we do that? Well, it's actually pretty easy. So, all we need to do is actually set up a variable that's going to store our user's name. We need to say user = request.form. And then, what we're going to do in here is put the dictionary key that we want to access for the name corresponding with whatever input we had here. So, in this case, we had name equals nm. So, what we're going to do is put nm as a dictionary key here, and what that's going to do is actually give us the data that was typed into this input box. So, we could go as far as to, you know, make sure that this wasn't blank before we go to the next page.

What I'm actually going to do is just use this information to redirect us to the user page. I'll show us that, show you that example, and then we'll, uh, talk about this a bit more. So, I'm going to say return, and in this case, we're going to say redirect(url_for()), we're going to say user, and then we're going to say usr equals, in this case, user.

So, now, what we should be doing is essentially, if we click that submit button, it should send us over to this user page, and then it should just tell us, you know, whatever that user is that we saw. So, let's try this and see if it works. Let's make sure that this refreshed. I think it did. So, let's actually just go to /login, make sure the GET's working. See, GET /login, working fine. Let's type Tim and hit submit. And there we go. We can see that we get redirected to a page that says our name. Now, note that we see POST, and then we see GET, and that is kind of the basic way that works. And let's just go back to /login... what's happening here? There we go. And then if I go to, you know, hello and we do that, we could see that hello is showing up on the screen. So, that is the way that we can actually get information from a form.

Summary and Future Topics

And obviously, if you had more than one, you know, input type here, then you can get all of those information by just using the name as a dictionary key on request.form.

So, that is kind of the basics behind this. Notice that, you know, request.form actually comes in as a dictionary, which means that you can access each object using the key. So, whenever, like I said already, you have names in here, you have multiple things, make sure they're unique, and then you can actually access all of them by just doing request.form.

Make sure, however, before you do this, that the method was POST and not GET, otherwise you may run into an issue. So, that has been HTTP methods, how to get some information from a form. I know this was a basic example, we didn't go through too much, but in the next video, we'll go in a more advanced example, and we'll use the POST and the GETs, and actually go through a login example, and then we'll get into sessions and some more advanced stuff. As always, if there's anything you guys would like me to cover in this series, leave a comment down below, and I'll see you guys in another video.