A select element makes a menu inside an HTML form. Put option elements between its opening and closing tags, and each option becomes a choice the visitor can pick—like Coffee or Decaf. It is a friendly way to let people choose instead of typing everything themselves. section 10.0
Build a coffee-order menu
Start with one drink menu, then grow it a little at a time. Give the select a name such as drink, add a “Choose drink” option, and add choices such as coffee, chocolate, and decaf. Repeat the pattern for flavor and topping menus. section 11.0
The name matters when the form is submitted. A Flask order handler can read request.form["drink"], request.form["flavor"], and request.form["topping"], then pass those selected values to a template that prints the order back to the customer. section 11.0
A small menu checklist:
- Place the select element inside a form. section 10.0
- Add one option element for every available choice. section 11.0
- Use a name so the submitted choice can be retrieved from request.form. section 10.0
- Try changing and adding options, then open the page in a browser. 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 %}
Inspect three select menus side by side: drink, flavor, and topping. Each follows the same simple pattern, so copying one carefully is a useful first move. section 11.0
