Make POST Requests with Flask and HTML Forms

Written by Sümeyye Sever (notes I took while learning Python)

index.html:

<!DOCTYPE html>
<html lang="en">
	<head>
    <meta charset="UTF-8">
    <title>Title</title>
	</head>
	<body>
		<form action="/login" method="post">
		  <label for="name">Name:</label><br>
		  <input type="text" id="name" name="username"><br>
		  <label for="password">Password:</label><br>
		  <input type="password" id="password" name="password"><br><br>
		  <input type="submit" value="OK">
		</form>
	</body>
</html>

<form action="/login" method="post">

action=”/login”: Specifies the URL or endpoint where the form data will be sent after submission.
method=”post”: Specifies the HTTP method used to send the form data.

How It Works:

A user fills in their Name and Password fields.
When the user clicks the OK button, the form sends the data to the server(main.py) using the POST method at the /login endpoint.
The server processes the form data (name=”username” and name=”password”).

main.py:

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("index.html")

@app.route("/login", methods=["POST"])
def log_in():
    if request.method == 'POST':
        name = request.form["username"]
        password = request.form["password"]
        return f"<h1>Hello {name}. This is your password: {password}"

if __name__ == "__main__":
    app.run(debug=True)

Login route code breakdown:

request: This object is used to access data sent from the client to the server, such as form data.
@app.route(”/login”, methods=[”POST”]): This defines a route for handling /login requests, allowing only the POST method.
log_in(): A view function for the /login route.
if request.method == “POST”:: Ensures the function processes only POST requests.
- request.form[”username”]: Retrieves the value of the **username**field from the form data sent by the client.
- request.form[”password”]: Retrieves the value of the password field from the form data.