An important role of websites is gathering information from the user. Whether a user is signing into their Codecademy account, ordering clothes online or leaving feedback for a company, web forms have provided a simple way to enter and submit data over the internet.
The use of forms in a site can be an involved process. The designer must gather the right information, display the fields in a pleasing manner and ensure the data is collected correctly. Over the years this has become easier thanks to frameworks like Flask, which help streamline the process of displaying fields and gathering data.
This lesson assumes a foundational knowledge of web forms and the steps involved in sending the data to the web server. In the following exercises we are going to look at how Flask can help gather data from regular web forms as well as create forms in an entirely new way.
Instructions
To help us learn about forms we will be using a cookbook app that lists recipes on a main page and links to individual recipe pages.
- The main Flask app is contained in app.py and has three routes:
index,recipeandabout. Theindexroute has methodPOSTadded to handle form submission. - The file helper.py contains the mock data for the app and has two functions,
add_ingredients()andadd_instructions()to help populate the data. - The main web page is rendered from the template index.html. There is a title, list of recipes and a new recipe form. The form has fields for the recipe name, description, ingredients and instructions.
- The other template is recipe.html which renders each individual recipe using the mock data.
Review the site structure and head to the next exercise when you’re ready.