An <option> element is one choice in a menu made with <select>. Put several options inside the select, and a visitor can pick a drink, flavor, or topping before submitting a form. Think of each option as one small label in the coffee-shop menu: Coffee, Chocolate, Decaf, and more. section 10.0 section 11.0
Start with the choices people should see. An option can display friendly text while its value is the shorter piece of data sent with the form. For example, Coffee can use the value coffee. A first option with an empty value can prompt the visitor to choose a drink. section 11.0 section 10.0
A drink menu
Place options between <select name="drink"> and </select>. When the form is posted to /order, the selected value is available as request.form["drink"], then can be displayed back in an order confirmation. section 11.0 section 10.0
Build a useful menu one choice at a time:
- Add a prompt such as “- Choose drink -” so the menu does not begin with a real drink choice. section 11.0
- Add an <option> for every available choice, such as coffee, chocolate, and decaf. section 11.0
- Make separate selects when the order needs separate choices, such as flavor and topping. section 11.0
- Indent options to make the HTML easier for people to read; HTML does not require that indentation. section 11.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 %}
Compare three select menus side by side: each one groups its own option elements for one part of an order. section 11.0
Try changing the menu yourself: add a new drink or replace the flavors with your own favorites. Then open the form in a browser, choose an option, submit it, and check that the selected value appears in the order result. section 10.0 section 11.0
