11 Web form for orders: Coffee shop on the web

 

In this chapter

  • Emily and Erik create a real web form for their shop
  • Simon explains how to pass values from the form to the program
  • Erik and Emily learn about form elements, such as input and select
  • Simon explains how files work

The next day, Erik, Emily, and Simon got together to continue working on the Coffee Shop application.

“Are you ready to get serious?” Simon asked. “Today, we have to work on our actual web form. We tried a very simple menu yesterday. Now we have to add two more menus and the text field where the customer can enter their name.

“Let’s look at our code from yesterday. We already created one menu there—the code between the <select> and </select> tags. This menu already has two options: coffee and decaf.

Listing 11.1 First 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>     #1
        <option value="decaf">Decaf</option>       #2
    </select>
    <input type="submit" value="Submit">
</form>
{% endblock %}

“Now we have to add another option to the drink menu. Erik, I think you had ‘chocolate’ in that menu, right?”

“Yes, coffee, chocolate, and decaf,” Erik confirmed.

“Good. And what about flavors and toppings?”

New things you have learned today

Code for this chapter