• Home
  • Subscribe
  • Contribute Us
    • Share Your Interview Experience
  • Contact Us
  • About
    • About CSEstack
    • Campus Ambassador
  • Forum & Discus
  • Tools for Geek
  • LeaderBoard
CSEstack

What do you want to Learn Today?

  • Programming
    • Tutorial- C/C++
    • Tutorial- Django
    • Tutorial- Git
    • Tutorial- HTML & CSS
    • Tutorial- Java
    • Tutorial- MySQL
    • Tutorial- Python
    • Competitive Coding Challenges
  • CSE Subject
    • (CD) Compiler Design
    • (CN) Computer Network
    • (COA) Computer Organization & Architecture
    • (DBMS) Database Management System
    • (DS) Data Structure
    • (OS) Operating System
    • (ToA) Theory of Automata
    • (WT) Web Technology
  • Interview Questions
    • Interview Questions- Company Wise
    • Interview Questions- Coding Round
    • Interview Questions- Python
    • Interview Questions- REST API
    • Interview Questions- Web Scraping
    • Interview Questions- HR Round
    • Aptitude Preparation Guide
  • GATE 2022
  • Linux
  • Trend
    • Full Stack Development
    • Artificial Intelligence (AI)
    • BigData
    • Cloud Computing
    • Machine Learning (ML)
  • Write for Us
    • Submit Article
    • Submit Source Code or Program
    • Share Your Interview Experience
  • Tools
    • IDE
    • CV Builder
    • Other Tools …
  • Jobs

How to Render Django Form Layout Manually using Widget Tweaks?

Aniruddha Chaudhari/3573/0
Django

In earlier tutorial, we have learned about creating Django form. It is easy to create the Django form.

Before you learn about how to render Django form layout using Widget Tweaks, let’s see why do you actually need it.

Below is the simple HTML template for creating login form.

<div class="container">
    <form method="POST">
      <fieldset>
        <legend>Form</legend>
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="btn btn-primary">Submit</button>
      </fieldset>
    </form>
</div>

With a simple one liner tag form.as_p, you can render the complete form in the template.

This is how it looks like if you are creating login form.

django form example

The form may look broken and not well-rendered for the user.

Sometimes, we also want to format and style each of the fields in the form separately.

For most of the project, I use bootstrap theme for formatting and styling.

Do you want to make use of bootstrap and add more styling to your form? You can render each field manually and add the bootstrap styling to it to give better look?

Django-widget-tweaks Example

Let’s see how you can achieve that.

Step1: Install the Django Widget Tweaks Python module from PyPi using pip tool.

$ pip install django-widget-tweaks

You can learn more about pip tool to manage Python packages.

Step 2: Load widget tweaks tag library in your form template to use it.

{% load widget_tweaks %}

Note: If you use this tag without installing package, you will get error as …

Widget_tweaks is not a registered tag library

Step 3: Use render_field tag to set the bootstrap class for form field.

{% render_field form.username class="form-control" %}

In the above example, we are setting the “form-control” bootstrap class for username field.

This is how complete form looks like.

{% block bootstrap4_content %}
  <div class="container">
    {% load static %}
    {% load widget_tweaks %}
    <div class="col-lg-8">
      <h3>Form</h3>
        <hr>
        <form method="post">
          <fieldset>
            {% csrf_token %}
            <div class="form-group">
              <label>{{ form.username.label }}</label>
              {% render_field form.username class="form-control" %}
            </div>
            <div class="form-group">
              <label>{{ form.password.label }}</label>
              {% render_field form.password class="form-control" %}
            </div>
            <button type="submit" class="btn btn-primary"> Submit </button>
          </fieldset>
        </form>
      </div>
  </div>
{% endblock %}

When you execute your Django project, this is how the form looks like.

django bootstrap form

It looks more awesome now, isn’t it?

Personally, I find this Django Widget Tweaks package very useful to use along with the bootstrap. Even if you are not using bootstrap and want to set the class for the Django form field, this package is all you need.

Hope you find this tutorial to render Django form layout using Widget Tweaks useful. If you have any doubts or questions to ask me, write in the comment.

Python Interview Questions eBook

Django
Aniruddha Chaudhari
I am complete Python Nut, love Linux and vim as an editor. I hold a Master of Computer Science from NIT Trichy. I dabble in C/C++, Java too. I keep sharing my coding knowledge and my own experience on CSEstack.org portal.

Your name can also be listed here. Got a tip? Submit it here to become an CSEstack author.

Leave a Reply Cancel reply

Prerequisite for Django

Learn Python Basics

Django Tutorials

Why Django?

Django- Create Your First Project

Django- Adding CSS/Static Files

Django- Use/Load Static Files

Django- Create Form

Django- Create Input-Tags

Django- Display Message on Form Submit

Django- MultipleChoiceField in Form

Django- Read Model Data (order_by)

Django- Read First/Last Queryset Object

Django- Update Model Field

Django- Signals

Django- Create TextField in Form

Django- Add Model to Admin Site

Django- Customize Admin Site

Django- Understanding Model User

Django- Registration/Signup Form

Django- Form Layout with Widget-Tweaks

Django- OneToOneField in Model

Django- Foreign Key & Reverse Lookup

Django- Custom Template Filters

Django- Interactive Shell

Django- Social Login

Django- Deploy and Host [FREE] 🔥

© 2022 – CSEstack.org. All Rights Reserved.

  • Home
  • Subscribe
  • Contribute Us
    • Share Your Interview Experience
  • Contact Us
  • About
    • About CSEstack
    • Campus Ambassador
  • Forum & Discus
  • Tools for Geek
  • LeaderBoard