A web form is a small HTML interface that asks a visitor for information and sends it to a web application. Menus, text fields, and buttons turn a page into something a customer can use: choose a drink, add a name, then press Submit. section 10.1 section 11.0
Start with a form element. Its action gives the destination address, and method="post" sends the entered values there. Inside the form, a select creates a menu, option elements supply its choices, and an input with type="submit" creates the button. section 10.0 section 10.1
A coffee order form
Give each field a name so the receiving program can identify its value. A drink menu might use name="drink"; more menus can use flavor and topping; a text input can use name="name". After submission, a Flask route checks for POST and reads values such as request.form["drink"]. section 11.0 section 10.0
Listing 11.2 Additional menu options in templates/forms.html
{% extends "base.html" %}
{% block content %}
<form action="/order" method="post">
<select name="drink">
<option value="">- Choose drink -</option>
<option value="coffee">Coffee</option>
<option value="chocolate">Chocolate</option>
<option value="decaf">Decaf</option>
</select>
<select name="flavor">
<option value="">- Choose flavor -</option>
<option value="caramel">Caramel</option>
<option value="vanilla">Vanilla</option>
<option value="peppermint">Peppermint</option>
<option value="raspberry">Raspberry</option>
<option value="plain">Plain</option>
</select>
<select name="topping">
<option value="">- Choose topping -</option>
<option value="chocolate">Chocolate</option>
<option value="cinnamon">Cinnamon</option>
<option value="caramel">Caramel</option>
</select>
<input type="submit" value="Submit">
</form>
{% endblock %}
This growing order form shows three select menus and their options: drink, flavor, and topping. section 11.0
The program can pass submitted values to a template for a friendly confirmation. A later version gathers the name, drink, flavor, and topping into one dictionary, adds it to a list of orders, and saves that list as JSON. A separate New order button returns to the order address so the customer can begin again. section 11.0
A simple form-to-program trip has four friendly steps:
- Create controls that collect choices or typed text. section 10.1
- Name each control so its submitted value has a label. section 11.0
- Set an action destination and submit the form with POST. section 10.0
- Read the values in the destination route and show the result in a template. section 10.0
