HTML Forms

HTML Forms#

HTML forms allow user inputs. These data is send from the client (e.g. the web browser) to the web server. The syntax is:

<form>   

<!-- form elements -->

</form>

A HTML form contains one or many form elements. These elements can be

text input

* checkboxes * radio buttons * submit buttons

The `<input>` element#

The input element is a form element that allows the user to input data.

<form>
  <input type="text" name="...">
</form>

There are different types of input elements:

type=text: Defines a text input
type=password: Defines a text input where characters are hidden.
type=radio: Defines a radio button input (select one out of N).
type=submit: Defines a submit button for submitting the form.

Note: The name attribute is used as an identifier to access the form values.

Text input#

Radio input#

%%html
<form>
  <input type="radio" name="color" value="red" checked> Red
  <br>
  <input type="radio" name="color" value="blue"> Blue
</form>

Submit button#

We can also add a submit button to our form:

%%html
<form action="http://www.bing.com/search" method="GET">
  Bing search:
  <br/>
  <input type="text" name="q" value="Search me"/>
  <br/>
  <input type="submit" value="Submit"/>
</form>

Pressing the submit button will send a GET request to the bing.com/search URL.

Interactive web applications with HTML forms#

Using the template, we can now create a HTML form with a POST request

<!-- ./templates/login.html -->

<!doctype html>
<title>Login</title>

{% if error %}
<p style="color:red">{{ error }}</p>
{% endif %}

<form action="/login" method="POST">
    Username:
    <br>
    <input type="text" name="username">
    <br>
    Password:
    <br>
    <input type="password" name="password">
    <br>
    <input type="submit" value="Submit">
</form>

# File: hello_world.py
from flask import Flask, render_template

app = Flask(__name__)


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

app.run()

Matches http://localhost:5000/login

Handling the `POST` request.#

The form above sends a POST request to the handle_login URL.

We can use

@app.route('/handle_login', methods=['POST'])     

to create a new Flask handler that accepts POST requests.

We can then use the

flask.request

attribute to access the data contained the POST request (here the username and password that the user provided in the form).

from flask import Flask, render_template, request

app = Flask(__name__)


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


@app.route("/login", methods=["POST"])
def handle_login():
    # Acces the form data:
    username = request.form["username"]
    password = request.form["password"]

    if username == "kate" and password == "dade":
        return "You are logged in, Kate"
    else:
        error = "Invalid credentials"
        return render_template("login.html", error=error)

app.run(port=5001)

Try it on http://localhost:5001/login