Showing the Updated List
Everything is connected now. Let's look at the full picture of what happens when a user fills in the form and clicks Submit — from start to finish.
The full flow
User fills in form → clicks Submit
↓
Browser sends POST request to /add
↓
Flask reads request.form, builds a dict, appends to people list
↓
Flask redirects to /
↓
Flask calls home(), passes people list to index.html
↓
Jinja2 loops through people and builds the table rows
↓
Browser shows the page with the new entry in the table
No JavaScript. No database. No refresh tricks. Just a form, a Python list, and a template loop.
What the finished project looks like
Project structure:
flask-project/
│
├── .venv/
├── templates/
│ └── index.html
└── app.py
app.py (final):
from flask import Flask, render_template, request, redirect, url_for
app = Flask(__name__)
people = []
@app.route('/')
def home():
return render_template('index.html', people=people)
@app.route('/add', methods=['POST'])
def add():
person = {
"name": request.form["name"],
"age": int(request.form["age"]),
"gender": int(request.form["gender"])
}
people.append(person)
return redirect(url_for('home'))
if __name__ == '__main__':
app.run(debug=True)
templates/index.html (final):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>People</title>
</head>
<body>
<h1>Add a Person</h1>
<form action="/add" method="post">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Full name">
<label for="age">Age</label>
<input type="number" id="age" name="age" placeholder="Age">
<label for="gender">Gender</label>
<select id="gender" name="gender">
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<button type="submit">Add Person</button>
</form>
<h2>People so far</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
{% for person in people %}
<tr>
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{% if person.gender == 1 %}Male{% else %}Female{% endif %}</td>
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>
One thing to know about memory storage
The people list lives in Python's memory while the app is running. The moment you stop the app (Ctrl + C), the list is gone — all entries disappear. Restart the app and it starts fresh.
That is expected for now. A real application would save to a database instead. But the principle is exactly the same — Flask receives the data, stores it somewhere, and passes it to the template. The only thing that changes later is where it is stored.
Challenge
Run the finished app. Add five people using the form — mix of names, ages, and genders. Confirm the table shows all five with Male/Female displayed correctly.
Then stop the app with Ctrl + C and run it again. What happens to the list? Can you explain why?