Render Forms Manually In Django - Django Tutorial

We all have visited the websites where we need to register or I can say signup to get access to the content of that site. The details that we fill up while registering are stored in the database with the help of forms in that particular website. A user can create a form manually for their website but why do Django Rest Framework do it for you? Yes you are reading it right, in Django a user can create their form in a PY file instead of creating it in HTML, well it’s up to you if you want to use Django form or want to create your own. But the problem with Django Forms is that their UI is not good enough, so that is why there is a need to render forms manually in Django. In this blog we will see how to do that.

How To Render Forms Manually In Django ?

What are Forms?

A HTML form on a web page provides a user the facility to enter data that will be sent to a server for processing. A form consists of different fields for different kinds of data eg, text, to enter text type data, number, to enter number type data and so on.

Django provides 3 in-built methods to render Django Form Fields.

{{ form.as_table }} which is used to render them as table cells.
{{ form.as_p }} which is used to render them wrapped in <p> tags.
{{ form.as_ul }} which is used to render them wrapped in <li> tags.

Here, we are going to render our form using the as_table method and with CSS but, before moving ahead let us first create a form and then will see implementation of these methods.

Implementation of Form

Step 1. Create Django Project

We are first going to create a Django project, an app inside that project.
1. Create a Django project.

django admin startproject blog12

2. Create an app in that django-project.

python manage.py startapp formrender

3. Add your app name in installed apps.

Settings.py

INSTALLED_APPS = [
    'formrender',
    'ckeditor',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

Step 2. Add files and Folder to the Django Project

We need to create a template folder in the django folder and a urls.py file in the app folder.

Create a new folder in the django folder(here, blog12 folder) save it with the name template.

2. Add the path for this template folder in blog12 > settings.py .

Settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'template')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

3. Create a new file in the app folder(here, form render) save it with the name urls.py .

4. Add path for this url.py file in blog12 > urls.py .

Urls.py

from django.contrib import admin
from django.urls import path,include
urlpatterns = [
    path('admin/', admin.site.urls),
    path('',include('texteditor.urls'))
]

Step 3. Creating a Form without any changes

Create a new file in the app folder(here, formrender folder) save it with the name forms.py. Now add the following code to create a form.

Forms.py

from django import forms 
# creating a form 
class createform(forms.Form):
    first_name = forms.CharField(max_length = 200)
    college_name = forms.CharField(max_length = 200)
    roll_no = forms.IntegerField(
                     help_text = "Enter 7 digit roll number"
                     )
    phn_no = forms.IntegerField(
                     help_text = "Enter  digit number"
                     )
    password = forms.CharField(widget = forms.PasswordInput())

2. Create a function in formrender > view.py to pass the created form in the html file.

Views.py

from django.shortcuts import render
from .forms import createform
# Create your views here.
def index(request):
    dict1={}
    dict1['form']=createform()
    return render(request,'index.html',dict1)

3. Create a html file for displaying the form.

Index.HTML

<html>
<head>
    <title>Blog12</title>
</head>
<body>
    <h1>Want to Register?</h1>
    <form action="" method="post">
        {% csrf_token %}
        {{ form }}
        <input type="submit" value=Submit">
    </form>
</body>
</html>

4. Add the path for the function added in views.py in formrender > urls.py.

Urls.py

from django.urls import path,include
from . import views
urlpatterns = [
    path('',views.index,name="index"),
]

Output :-

Rendering using as_table method

Add the following code in the html file. Here, we need to add the code within the table tag because we are creating a form as a table.

Inde.HTML

<html>
<head>
    <title>Blog12</title>
</head>
<body>
    <h1>Want to Register?</h1>
    <form action="" method="post">
        {% csrf_token %}
        <table>
            {{ form.as_table }}
        </table>
        <input type="submit" value=Submit">
    </form>
</body>
</html>

Output :-

Rendering using CSS

Add the following code in the HTML file. Here we are just passing the input fields of form and editing it normally as we edit html content using CSS.