Rumours of Cats Everywhere have sent the web into a frenzy. Now is the time to move our dusty old static landing page into an exciting and invigorating sign-up page!
To do this we will need two things: * A HTML form on the web page. This will have a text input field and a submit button. * A route in our Flask app to accept the data posted by the form.
At the moment we will just print out the email addresses that we receive directly to the console.
The form is simple enough:
<form action="/signup" method="post"> <input type="text" name="email"></input> <input type="submit" value="Signup"></input> </form>
Place this form inside the
<body> section of
index.html. You can fiddle around a bit to get it in the place you want.
Now the action attribute of the form is saying it will be posted to
/signup. We don’t have any code for this URL at the moment, so it is time to make some!
We are going to need to import more objects from Flask. We need
request to get the form data,
redirect to redirect the browser once we are done. Integrate this to the top of your Python code:
from flask import request, redirect
Now we can add our new route for
@app.route('/signup', methods = ['POST']) def signup(): email = request.form['email'] print("The email address is '" + email + "'") return redirect('/')
This gets a little complicated, so we’ll go through it line-by-line:
@app.route('/signup', methods = ['POST'])
We apply a decorator to the signup function, saying that we want it to be used when the browser requests
/signup. It will accept the HTTP POST method, which you can see is mentioned in the HTML form element as
def signup(): email = request.form['email'] print("The email address is '" + email + "'")
In the signup method we can retrieve the email address using the
request object, which contains the form data. In the HTML we used
name="email", which means that in the
request object we can use
request.form["email"]. If we used
name="address" in the HTML then it would be
When we write
request.form["email"] we are using
request.form as a Python Dictionary, looking up the entry held in there for
"email". Dictionaries are a type of data structure we haven’t seen before, we’ll talk about them more in the Data Structures chapter.
At this stage We just print out the email address that’s supplied. So when you submit the form you should be able to see the address you supplied printed out on the console.
Once we have printed the email address we still need a response to send back to the web browser. A common option is to send a HTTP Redirect response. This tells the browser to go to another page. In our case we just send them back to the home page,
/, which is served by the
Try it out!
Give it a whirl and see how the email addresses get printed to the console. Perhaps you would like to experiment by adding some extra form elements such as a text box for a name, or a checkbox for also including dogs.