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