Creating an “Add Task” Page Using Views and Forms

This topic is empty.

Viewing 1 post (of 1 total)

Author

Posts
February 16, 2026 at 10:59 am #6082
Rajeev Bagra
Keymaster
When building a task management application in Django, one of the first features you usually implement is displaying existing tasks in a list. Once that works, the next important step is allowing users to add new tasks.

In this tutorial, you will learn how to:

✅ Create a view to display a form
✅ Connect the view to a URL
✅ Render an HTML template
✅ Prepare the project for form submission
✅ Understand how Django handles form pages

This lesson focuses on the first step: showing the “Add Task” form page.

📌 Prerequisites

Before starting, you should already have:
- A Django project created
- An app (for example: tasks)
- A page that displays tasks in a list
- Basic knowledge of views, URLs, and templates
If you have followed Django’s official tutorial, you are already ready.

📂 Project Context

Assume your project structure looks like this:
```
project/
   manage.py
   project/
   tasks/
      views.py
      urls.py
      templates/
         tasks/
            list.html
            add.html
```
You already have:

✔ A page showing tasks (list.html)
✔ A view that loads the list
✔ A URL that connects to it

Now you want to add a page for creating new tasks.

🧩 Step 1: Understanding the Goal

Our goal is simple:

👉 When a user clicks “Add Task”, they should see a page with a form.

For now, the page will:
- Only display the form
- Not save data yet
- Not validate input yet
We are preparing the foundation.

🛠️ Step 2: Adding the View in views.py

Open your app’s views.py file and add this function:
```
from django.shortcuts import render

# Add a new task:
def add(request):
    return render(request, "tasks/add.html")
```
🔍 Explanation of the Code

Let’s understand this line by line.

1️⃣ Function Definition
```
def add(request):
```
This creates a Django view function.
- add → Name of the view
- request → Object that contains user request data
Every Django view must accept request.

2️⃣ Rendering the Template
```
return render(request, "tasks/add.html")
```
This tells Django:

👉 “Load the template add.html and display it.”

The render() function:
- Finds the HTML file
- Combines it with data (if any)
- Sends it to the browser
General format:
```
render(request, template_name, context)
```
Here, we are not passing any context yet.

📂 Step 3: Creating the Template File

Now, create this file:
```
templates/tasks/add.html
```
Inside 提醒

Add the following code:
```
<!DOCTYPE html>
<html>
<head>
    <title>Add Task</title>
</head>
<body>

<h1>Add New Task</h1>

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

    <input type="text" name="task" placeholder="Enter task">

    <button type="submit">Add Task</button>
</form>

</body>
</html>
```
🔍 Explanation of the Template

✅ Form Tag
```
<form method="post">
```
This means:
- The form will send data using POST
- Data will go back to the same URL
✅ CSRF Protection
```
{% csrf_token %}
```
Django requires this for security.

Without it, your form will fail.

✅ Input Field
```
<input type="text" name="task">
```
This is where the user types the task.

The name task will be used later to access data.

✅ Submit Button
```
<button type="submit">Add Task</button>
```
This sends the form.

🔗 Step 4: Connecting the View to a URL

Now open urls.py inside your app.

Add:
```
from django.urls import path
from . import views

urlpatterns = [
    path("add/", views.add, name="add"),
]
```
🌐 What This Does

This line:
```
path("add/", views.add, name="add")
```
Means:

👉 When a user visits /add/, run views.add.

So if your server runs at:
```
http://127.0.0.1:8000/
```
Then:
```
http://127.0.0.1:8000/add/
```
Will show the form page.

▶️ Step 5: Testing the Page

Now run the server:
```
python manage.py runserver
```
Open browser and visit:
```
http://localhost:8000/add/
```
You should see:

✔ “Add New Task” heading
✔ Input box
✔ Submit button

No errors = success 🎉

🔄 Step 6: Understanding What Happens Internally

When you visit /add/:

1️⃣ Browser sends GET request
2️⃣ Django receives request
3️⃣ URL matches add/
4️⃣ Django calls add(request)
5️⃣ Template is loaded
6️⃣ HTML is sent back

Flow:
```
Browser → URL → View → Template → Response
```
⚠️ Important Note: Why Nothing Is Saved Yet

At this stage:

❌ Data is not processed
❌ Database is not used
❌ Form is not handled

Because our view only does:
```
render(...)
```
We will add saving logic later.

This is intentional.

You must first show the form correctly.

📈 Step 7: Why This Step Is Important

Many beginners try to:

❌ Build forms
❌ Save data
❌ Validate
❌ Redirect

All at once.

This causes confusion.

Professional Django development follows:

1️⃣ Show form
2️⃣ Test UI
3️⃣ Handle POST
4️⃣ Validate
5️⃣ Save
6️⃣ Redirect

You are now on Step 1.

📘 Real-Life Example

Think of this like opening a form at a government office.

Before submitting documents, you must:

📄 Get the form first.

This view is giving users the blank form.

✅ Best Practices

When creating form pages:

✔ Keep display logic simple
✔ Separate UI and logic
✔ Always use CSRF token
✔ Use meaningful view names
✔ Store templates in folders

📌 Summary

In this tutorial, you learned how to:

✅ Create an “Add Task” view
✅ Render an HTML template
✅ Create a form page
✅ Connect URLs
✅ Test the page

Your core code:
```
def add(request):
    return render(request, "tasks/add.html")
```
Means:

👉 “Show the Add Task form page.”

🚀 What’s Next?

how to:

✔ Receive submitted data
✔ Use Django Forms
✔ Validate input
✔ Save to database
✔ Redirect users
Author

Posts

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

Additional menu

📌 Prerequisites

📂 Project Context

🧩 Step 1: Understanding the Goal

🛠️ Step 2: Adding the View in views.py

🔍 Explanation of the Code

1️⃣ Function Definition

2️⃣ Rendering the Template

📂 Step 3: Creating the Template File

🔍 Explanation of the Template

✅ Form Tag

✅ CSRF Protection

✅ Input Field

✅ Submit Button

🔗 Step 4: Connecting the View to a URL

🌐 What This Does

▶️ Step 5: Testing the Page

🔄 Step 6: Understanding What Happens Internally

⚠️ Important Note: Why Nothing Is Saved Yet

📈 Step 7: Why This Step Is Important

📘 Real-Life Example

✅ Best Practices

📌 Summary

🚀 What’s Next?

🛠️ Step 2: Adding the View in `views.py`