Django Style the Forms - Model Form

Learn Django style the forms created by model forms. In this tutorial, you learn how to add Django stylings to the model forms which doesn’t have the Html code, i.e. class for the input fields in the HTML form using the forms.py file.

Requirements :

pip install django

This command will install Django on your local machine. Link for Bootstrap

Firstly Create a Django Project :

python -admin django startproject project

This command will create new project.

Navigate to Project folder :

cd project #projectname

This will change the current directory of the terminal to the project directory

Secondly Creating app with Demo app :

py manage.py startapp demo

Create a demo app for the Django project we have created.

Thirdly Create Urls.py in Demo app

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

Here, We are creating the routing paths for the home view this will render out the html page we have created for the model form. However the ” will represent the local host path it will render the html template as the homepage for the project on local host address . i.e. 127.0.0.1:8000

Model Creation in Demo app :

from django.db import models

# Create your models here.

class Student(models.Model):
    name = models.CharField(max_length=200)
    roll = models.IntegerField()

In this step, we are creating a model with the name of the Student with the two fields that are name and rank. However, the name is character field this will create a column with the name under the student table. And the roll is an integer field this will also create a new column under the Student table in the Database.

Apply Model Table Migrations :

py manage.py makemigrations
py manage.py migrate

These commands will detected the changes in model.py file and hence create the new models. The second command as well also related to the model table which will migrate the tables to the database we have configured

Create Forms.py in Demo app :

from django.forms import ModelForm
from .models import *

class StudentForm(forms.ModelForm):
    class Meta:
        model = Student
        fields = "__all__"
        widgets = {
            'name': forms.TextInput(attrs={'class': 'form-control'}),
            'roll': forms.NumberInput(attrs={'class': 'form-control'}),
        }

Now, We are creating the model form for the previously created model form which is the Student model consisting the 2 fields, name and roll.

After that just add the attributes to the created field using the widgets. Options under the fields in the model form meta configuration. Here the form-control is the class name of bootstrap framework use can any of your personal choice.

Main urls.py (include demo URLs) :

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('demo.urls'))
]

Configure the demo app URLs to main URLs by using the include function this will render the demo app paths as well along with the admin paths which are configured above

Html Form Code :

<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        {{form.as_p}}
    </div>
</body>
</html>

The final step was rendering the form with bootstrap style fir that add the Bootstrap CDN for CSS in the head section of your HTML template.

And the .as_p will render the form fields in paragraph style. Using the jinja format we can achieve the form for the model created into the home page view. So finally you can see the styling added for the field of the model form on the address 127.0.0.1:8000.

Hence, Django style forms was customized by bootstrap

Django Style the Forms – Model Form