CS50-Style Django Tutorial: Adding & Handling a Form

This topic is empty.

Viewing 1 post (of 1 total)

Author

Posts
February 18, 2026 at 9:22 am #6093
Rajeev Bagra
Keymaster
In this tutorial you will learn:
1. How Django renders a page for adding a task
2. How to create a form in HTML
3. How to process form data in Django
4. How CS50 thinks about forms
Most of this is inspired by the CS50 Week 3 Django notes about using forms to update a web page. ([edX][1])

✅ Step 1 — What We Have So Far

So far you have:

✔ A view that renders the “add new task” page:
```
def add(request):
    return render(request, "tasks/add.html")
```
✳ This displays an empty page for adding tasks. ([edX][1])

✔ A corresponding path in urls.py:
```
path("add", views.add, name="add")
```
✳ This tells Django to show the add page at /add. ([edX][1])

✅ Step 2 — Create the Form in add.html

A form is what users fill out to send data back to the server.

Create this file:
```
templates/tasks/add.html
```
with:
```
<!DOCTYPE html>
<html>
<head>
    <title>Add Task</title>
</head>
<body>
    <h1>Add Task</h1>

    
    <form method="post">
        {% csrf_token %}
        <input type="text" name="task" placeholder="Enter task">
        <button type="submit">Submit</button>
    </form>
</body>
</html>
```
Explanation:

👉 <form method="post"> — Sends the user’s input to the server using POST.
👉 {% csrf_token %} — Django requires this for safe form submissions (prevents CSRF attacks).
👉 <input name="task"> — The field where the user types a task. ([edX][1])

🧠 What Forms Mean in CS50

In the CS50 notes, forms are shown as a way to let users input data instead of just seeing static content. CS50 builds on what you already learned about templates and dynamic pages and shows how forms change the page when submitted. ([edX][1])

✅ Step 3 — Handle the Form in the View

Right now your view only renders the page. To actually save the user’s input, change it to this:
```
def add(request):
    if request.method == "POST":
        # user submitted the form
        task_text = request.POST.get("task")
        # now you can store task_text or use it
        print(task_text)

        # after processing, redirect or show updated page
        return redirect("index")

    # if the request is GET, just show the add form
    return render(request, "tasks/add.html")
```
Here’s what is happening:
- Django checks request.method
  - If it’s POST, then the user submitted the form
  - request.POST.get("task") retrieves what the user typed
  - You can then store it or use it as needed
  - You might then send the user back to the task list
- If the user just opened the form without submitting (GET), render the form page. ([edX][1])
🎯 Step 4 — What Happens in the Browser

Now your app behaves like this:

Action What Django Does

User goes to /add Django shows the form

User submits form Django receives and handles form data

Django sends response Could redirect, reload, or show new content

That’s exactly how CS50 explains the role of forms in dynamic web pages — letting you respond to user input instead of just showing static content. ([edX][1])

⭐ Bonus: Why CSRF Token Matters

CS50 doesn’t go deeply into it at this stage, but Django requires {% csrf_token %} in every POST form so that browsers and servers can trust the request is genuine.

Without it you will get an error like:
```
Forbidden (403)
CSRF verification failed
```
This security feature protects users and your app.

🏁 What You’ve Learned

✔ How to create a form in Django
✔ How to connect a form to a view
✔ How to send and receive data using a POST request
✔ How CS50 introduces forms as part of full dynamic web apps ([edX][1])

📌 Next Steps

Once you master this:

⭐ Save submitted tasks into a database with Django models
⭐ Add validation to ensure users don’t submit empty tasks
⭐ Display tasks on another page
⭐ Learn how Django handles Forms class for easier validation (later in CS50) ([developer.mozilla.org][2])
Author

Posts

Action	What Django Does
User goes to `/add`	Django shows the form
User submits form	Django receives and handles form data
Django sends response	Could redirect, reload, or show new content

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

Additional menu

✅ Step 1 — What We Have So Far

✅ Step 2 — Create the Form in add.html

🧠 What Forms Mean in CS50

✅ Step 3 — Handle the Form in the View

🎯 Step 4 — What Happens in the Browser

⭐ Bonus: Why CSRF Token Matters

🏁 What You’ve Learned

📌 Next Steps

✅ Step 2 — Create the Form in `add.html`