Learning Django Forms: How to Add and Save Data Using a Single Page

This topic is empty.

Viewing 1 post (of 1 total)

Author

Posts
February 20, 2026 at 5:25 pm #6126
Rajeev Bagra
Keymaster
Below is a complete learning tutorial you can publish for your audience.

📘 Learning Django Forms: How to Add and Save Data Using a Single Page

In this tutorial, we’ll learn how to use forms in Django to collect user input, send it to the server, and store it in a database.

We will build a simple Task Manager where users can add tasks using a form.

This approach is commonly taught in Django tutorials and courses like CS50’s Web Programming with Python and JavaScript.

📌 What You Will Learn

By the end of this tutorial, you will understand:

✅ How forms work in Django
✅ What “submitting to the same page” means
✅ How URLs, views, and templates connect
✅ How to save submitted data
✅ How Django knows which user submitted what

📁 Project Structure (Context)

A typical Django project looks like this:
```
project/
│
├── project/          ← Main project folder
│   └── urls.py
│
├── tasks/            ← App folder
│   ├── views.py
│   ├── models.py
│   ├── urls.py
│   └── templates/
│       └── tasks/
│           ├── index.html
│           └── add.html
│
└── manage.py
```
We will work mainly inside:
- tasks/views.py
- tasks/urls.py
- tasks/templates/
- tasks/models.py
🧩 Step 1: Creating the Add View (views.py)

Open:
```
tasks/views.py
```
Add this:
```
from django.shortcuts import render, redirect
from .models import Task

# Show form and handle submission
def add(request):

    if request.method == "POST":
        task_text = request.POST["task"]

        Task.objects.create(
            user=request.user,
            title=task_text
        )

        return redirect("index")

    return render(request, "tasks/add.html")
```
Explanation

This function does two jobs:

Request Type Action

GET Shows the form

POST Saves the data

So one page both displays and processes the form.

🧩 Step 2: Creating URLs (urls.py)

Inside the App

Create:
```
tasks/urls.py
```
Add:
```
from django.urls import path
from . import views

urlpatterns = [
    path("add", views.add, name="add"),
]
```
Inside Main Project

Open:
```
project/urls.py
```
Add:
```
from django.urls import path, include

urlpatterns = [
    path("tasks/", include("tasks.urls")),
]
```
Final URL

Now your form page is available at:
```
/tasks/add
```
🧩 Step 3: Creating the Form Template (add.html)

Create file:
```
tasks/templates/tasks/add.html
```
Add:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Add Task</title>
</head>
<body>

    <h1>Add Task</h1>

    <form action="" method="post">
        {% csrf_token %}

        <input type="text" name="task" placeholder="Enter task" required>
        <input type="submit" value="Save">

    </form>

</body>
</html>
```
Explanation

1️⃣ action=""
```
<form action="">
```
Means:

👉 Submit to the same URL.

If page is:
```
/tasks/add
```
Form submits to:
```
/tasks/add
```
Again.

2️⃣ method="post"
```
method="post"
```
Uses secure POST method (recommended).

3️⃣ {% csrf_token %}
```
{% csrf_token %}
```
Protects against hacking attacks.

Required in Django forms.

4️⃣ name="task"
```
<input name="task">
```
This connects to:
```
request.POST["task"]
```
in views.

🧩 Step 4: Creating the Model (models.py)

To store data permanently, we need a database model.

Open:
```
tasks/models.py
```
Add:
```
from django.db import models
from django.contrib.auth.models import User

class Task(models.Model):

    user = models.ForeignKey(
        User,
        on_delete=models.CASCADE
    )

    title = models.CharField(max_length=200)

    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.title
```
What This Does

It creates a table like:

Column Meaning

user Who created task

title Task text

created_at Time

🧩 Step 5: Apply Database Changes

Run:
```
python manage.py makemigrations
python manage.py migrate
```
This creates database tables.

🧩 Step 6: Showing Tasks (index view)

Open:
```
tasks/views.py
```
Add:
```
def index(request):

    tasks = Task.objects.filter(user=request.user)

    return render(request, "tasks/index.html", {
        "tasks": tasks
    })
```
🧩 Step 7: Display Tasks (index.html)

Create:
```
tasks/templates/tasks/index.html
```
Add:
```
<!DOCTYPE html>
<html>
<head>
    <title>My Tasks</title>
</head>
<body>

<h1>My Tasks</h1>

<ul>
    {% for task in tasks %}
        <li>{{ task.title }}</li>
    {% endfor %}
</ul>

<a href="/tasks/add">Add New Task</a>

</body>
</html>
```
🔄 How Form Submission Works (Full Flow)

Let’s understand the complete process.

Step 1: User Opens Page
```
/tasks/add
```
Django → Shows form.

Step 2: User Submits

User enters:
```
Buy groceries
```
Clicks Save.

Step 3: Browser Sends Data

POST request to:
```
/tasks/add
```
With:
```
task=Buy groceries
```
Step 4: Django Processes

In views.py:
```
if request.method == "POST":
```
Data is saved in database.

Step 5: Redirect

User is sent to:
```
/tasks/
```
and sees updated list.

👥 How Django Knows “Who Submitted What”

Django has a built-in login system.

When user logs in:
```
request.user
```
contains their identity.

So when we save:
```
Task.objects.create(
    user=request.user,
    title=task_text
)
```
Each task is linked to its owner.

🗄️ Where Is Data Stored?

By default, Django uses:
```
db.sqlite3
```
File in project root.

Inside:
```
tasks_task
```
table stores all records.

🔍 How to See Submitted Data

Method 1: Admin Panel

Enable admin and visit:
```
/admin
```
You can see all tasks and users.

Method 2: Django Shell
```
python manage.py shell
```
```
from tasks.models import Task
Task.objects.all()
```
Method 3: Website

Each user sees their own tasks.

🌐 Important URLs Summary

Purpose URL

Task List /tasks/

Add Task /tasks/add

Admin /admin

✅ Best Practices

Always follow these rules:

✔ Use POST for forms
✔ Use csrf_token
✔ Save data in models
✔ Use redirect after submit
✔ Link tasks to users

🎯 Final Summary

In this tutorial, you learned:
- How Django forms work
- What “same page submission” means
- How views handle GET and POST
- How data is saved
- How users are tracked
- How URLs connect everything
This pattern is used in most professional Django projects.
Author

Posts

Request Type	Action
GET	Shows the form
POST	Saves the data

Column	Meaning
user	Who created task
title	Task text
created_at	Time

Purpose	URL
Task List	`/tasks/`
Add Task	`/tasks/add`
Admin	`/admin`

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

Learning Django Forms: How to Add and Save Data Using a Single Page

📘 Learning Django Forms: How to Add and Save Data Using a Single Page

📌 What You Will Learn

📁 Project Structure (Context)

🧩 Step 1: Creating the Add View (views.py)

Explanation

🧩 Step 2: Creating URLs (urls.py)

Inside the App

Inside Main Project

Final URL

🧩 Step 3: Creating the Form Template (add.html)

Explanation

1️⃣ `action=""`

2️⃣ `method="post"`

3️⃣ `{% csrf_token %}`

4️⃣ `name="task"`

🧩 Step 4: Creating the Model (models.py)

What This Does

🧩 Step 5: Apply Database Changes

🧩 Step 6: Showing Tasks (index view)

🧩 Step 7: Display Tasks (index.html)

🔄 How Form Submission Works (Full Flow)

Step 1: User Opens Page

Step 2: User Submits

Step 3: Browser Sends Data

Step 4: Django Processes

Step 5: Redirect

👥 How Django Knows “Who Submitted What”

🗄️ Where Is Data Stored?

🔍 How to See Submitted Data

Method 1: Admin Panel

Method 2: Django Shell

Method 3: Website

🌐 Important URLs Summary

✅ Best Practices

🎯 Final Summary

Additional menu

📘 Learning Django Forms: How to Add and Save Data Using a Single Page

📌 What You Will Learn

📁 Project Structure (Context)

🧩 Step 1: Creating the Add View (views.py)

Explanation

🧩 Step 2: Creating URLs (urls.py)

Inside the App

Inside Main Project

Final URL

🧩 Step 3: Creating the Form Template (add.html)

Explanation

1️⃣ action=""

2️⃣ method="post"

3️⃣ {% csrf_token %}

4️⃣ name="task"

🧩 Step 4: Creating the Model (models.py)

What This Does

🧩 Step 5: Apply Database Changes

🧩 Step 6: Showing Tasks (index view)

🧩 Step 7: Display Tasks (index.html)

🔄 How Form Submission Works (Full Flow)

Step 1: User Opens Page

Step 2: User Submits

Step 3: Browser Sends Data

Step 4: Django Processes

Step 5: Redirect

👥 How Django Knows “Who Submitted What”

🗄️ Where Is Data Stored?

🔍 How to See Submitted Data

Method 1: Admin Panel

Method 2: Django Shell

Method 3: Website

🌐 Important URLs Summary

✅ Best Practices

🎯 Final Summary

1️⃣ `action=""`

2️⃣ `method="post"`

3️⃣ `{% csrf_token %}`

4️⃣ `name="task"`