form not showing in template

i have a form that is not showing and here is the code:

forms.py:

from django import forms
from .models import Todo
from django.forms import ModelForm

class TodoForm(ModelForm):

    class Meta:
        model = Todo
        fields = ('username','title','details', 'date')
        
        labels = {

        'nuserame': '',
        'title': '',
        'details':'',
        'date':'',

        }

        widgets = {

        'username': forms.TextInput(attrs={'class':"form-control", 'placeholder':'Enter Username'}),
        'title': forms.TextInput(attrs={'class':"form-control", 'placeholder':'Enter Title'}),
        'details': forms.TextInput(attrs={'class':"form-control", 'placeholder':'Enter Details'}),
        'date': forms.DateTimeField(),

        }

in view.py:

from django.shortcuts import render,redirect
from django.contrib import messages
from django.contrib.auth import authenticate

## import todo form and models

from .forms import TodoForm
from .models import Todo

###############################################

def index(request):

    item_list = Todo.objects.order_by("-date")
    if request.method == "POST":
        form = TodoForm(request.POST)
        #form.cleaned_data['username'] = request.user
        if form.is_valid():
            # save user of current user
            form.save()
            return redirect('todo')
    form = TodoForm()
    page = {
             "forms" : form,
             "list" : item_list,
             "title" : "TODO LIST",
           }
    return render(request,'todo/index.html',page)

and index.html:

  <div class="row">

    <div class="col-md-8">

      {% for i in list %}
      <div class="card">
        <center><b>{{i.username}}</b></center>
        <hr/>
        <center><b>{{i.title}}</b></center>
        <hr/>
        {{i.date}}
        <hr/>
        {{i.details}}
        <br />
        <br />
        <form action="/del/{{i.id}}" method="POST" style=" padding-right: 4%; padding-bottom: 3%;">
          {% csrf_token %}
          <button value="remove" type="submit"  class="btn btn-primary" style="float: right;"><span class="glyphicon glyphicon-trash"></span> &nbsp; remove</button>
        </form>
      </div>
      {% endfor%}
    </div>
    <div class="col-md-1"> </div>
    <div class="col-md-3" >
      <div  class="submit_form">
      <form  method="POST">
        {% csrf_token %}
        {{TodoForm}}
        <center>
        <input type="submit" class="btn btn-default" value="submit" />
      </center>
      </form>
    </div>
  </div>
</div>

The first form is showing (existing data from database. The second form which is adding data to database it is showing only the buttons and not the fields. after inspecting the page i see that it says its hidden, how is that?

Your context is assigning the form to a key named forms, but the key you are trying to render in the template is TodoForm.

i have this

form = TodoForm()

Ok, but not relevant.

When you reference a variable in a template, say as {{ xyz }}, what is xyz?

You are right, so i need to pass form itself, correct?

I’m not sure exactly what you’re intending to say here, so I can’t say.

Please answer the question I asked.

I just replaced page with {‘page’:page} and it worked.
Thanks.