• 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 Add Input Tags in Django Form using Bootstrap+jQuery?

Aniruddha Chaudhari/456/0
Django

This is how the input tags looks like.

Above screenshot is from the CSEstack CV builder where we are using input tags in Django form to allow users to submit their skills.

Do you want to add this kind of input tags in your Django app form?

I will explain it step by step.

You can also watch this video.

How does input tags work?

  • These are nothing but the comma separated values.
  • When you give a comma ,, input string gets converted into the tag.
  • You can provide as many tags as you want.
  • Input tags can be spread across multiple lines.
  • By clicking on the cross x, you can also delete the specific input tag.

How to create input tags in Django App Form?

Creating input tags is simple. If you are using bootstrap and jQuery plugin, you don’t have to write even single line of code.

Follow the steps given below.

Step 1: Download jQuery Plugin

There are lot of plugins or code snippet available to create input tags. After trying many, I found one that works seamlessly.

  • You can download the jQuery plugin from here.
  • Extract all the files from downloaded bundle.

It contains following files.

  • inde.html – This is sample file to demonstrate.
  • LICENSE – describe the license used for this package.
  • package.json – Information related to the plugin package.
  • README.md – Read me files.
  • tagsinput.css – style sheet
  • tagsinput.js – JavaScript file

Here we only need last two files (tagsinout.css and tagsinput.js). These two are the actual files and all other are supporting files.

This plugin comes with the MIT licences. That means it is free to use in your application.

Step 2: Add Plugin to Your Django App

The best way to keep all the CSS, JavaScript and plugins is into the static directory.

  • Create directory “plugin” (you can give any name) inside the “static” folder.
  • Create directory with name “input-tags” (you can give any name) inside the “plugin” folder.
  • Copy tagsinout.css and tagsinput.js files into the new folder.

If you are not clear about the directory strture, watch the video. I have demonstrated it.

Run below command.

python manage.py collectstatic

This command will copy all the static files into the executable directory.

Step 3: Add Input Tags in Your Django Form

First of all you have to create Django form.

Define the Django model field. Make sure you define it as charField() as below.

skills = models.CharField(max_length=200, default="", null=True, blank=True)

Inside your Django HTML page, add below line of code to add the input field.

{% render_field form.skills class="form-control" id="input-skill" data-role="tagsinput" %}

Make sure you add data-role="tagsinput". If you don’t add it, your input tags will not work.

For the sake of this example, we are using form.skills Django form field. Based on your project demand, you can use any other model and form field name.

In your HTML file, insert CSS and JS script. This is how the code looks like.

<link rel="stylesheet" type="text/css" href="{% static 'plugins/tags-input/tagsinput.css' %}" />

<script src="{% static 'plugins/tags-input/tagsinput.js' %}"></script>

That is all.

Step 4: Run Django App and Test

Start your Django application.

python manage.py runserver

Once started, open the Django form. You will see input tags working like a charm.

Wow! You done it.

Let me know how do you find this tricks in the comment section below 😀

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