Introduction
This is another article which is focusing on how to use a Django form in a Django application. But in this context, the main focus is just to render each of the form component. Actually, there is an example of a Django application exist in a certain article which is perfectly fine as a reference. Using the Django form exist in that Django application, this article will show how to render the form components. Look at the article How to Define Widget for Django Form Attribute in Django Application.
How to Render Form Display of a Django Form using Django Widget Tweaks in a Django Application
So, in this article, in order to render the form display, django-widget-tweaks plugin is one of the alternative tool available. For the solution, it will use an additional plugin. Using this plugin, it will format the display of the form so that it will have each component to appear in a good order. Below is the step in order be able to do it :
-
First of all, just search the ‘django-widget-tweaks’ plugin using ‘pip’ tool. The following is the execution for searching the plugin :
(env) C:\django\myproject>python -m pip_search widget-tweaks 🐍 https://pypi.org/search/?q=widget-tweaks 🐍 ┌────────────────────────────────────┬────────────┬────────────┬──────────────────────────────────────────────────────┐ │ Package │ Version │ Released Description │ ├────────────────────────────────────┼────────────┼────────────┼──────────────────────────────────────────────────────┤ │ 📂 django-widget-tweaks 1.4.12 == 13-01-2022 Tweak the form field rendering in templates, not in │ │ │ │ python-level form definitions. │ ... ... ... └────────────────────────────────────┴────────────┴────────────┴──────────────────────────────────────────────────────┘
-
Following after, just install the ‘django-widget-tweaks’ by executing the command as follows :
(env) C:\django\myproject>pip install django-widget-tweaks Collecting django-widget-tweaks Using cached django_widget_tweaks-1.4.12-py3-none-any.whl (8.9 kB) Installing collected packages: django-widget-tweaks Successfully installed django-widget-tweaks-1.4.12 [notice] A new release of pip available: 22.3 -> 22.3.1 [notice] To update, run: python.exe -m pip install --upgrade pip (env) C:\django\myproject>
-
After successfully installing ‘django-widget-tweaks’, do not forget to register the plugin by adding it to the ‘settings.py’ file as follow :
# Application definition INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'django_extensions', 'widget_tweaks', 'myapp', ]
-
So, the next step is the modification of the form in one of the template file as follows :
{% load widget_tweaks %} <html> <head> <title>Employee</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body class="container"> <div class="col-12"> <div class="card-body"> <form method="post"> {% csrf_token %} {{ form }} </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> <html>The above form will be exist as in the following appearance :
How to Render Form Display of a Django Form using Django Widget Tweaks in a Django Application So, just modify it into the following modification :
{% load widget_tweaks %} <html> <head> <title>Employee</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body class="container"> <div class="col-12"> <div class="card-body"> <form method="post"> {% csrf_token %} {% for field in form.visible_fields %} <div class="row mb-3"> <label for="{{ field.id_for_label }}">{{ field.label }}</label> <div class="col-sm-8">{{ field|add_class:'form-control' }}</div> {% for error in field.errors %} <span class="help-block">{{ error }}</span> {% endfor %} </div> {% endfor %} <div class="row"> <div> <input type='submit' value='Save' class='btn btn-primary'></input> </div> </div> </form> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
How to Render Form Display of a Django Form using Django Widget Tweaks in a Django Application Below is the appearance of the form after modifying it using Django widget tweaks plugin :