How to create Multi Tags Input Box in HTML CSS & JavaScript

Hey Everyone, today in this tutorial, you’ll learn How to create an Add Tags Input Box in HTML CSS & JavaScript. In the previous tutorial, I have shared How to Detect Browser in JavaScript and now it’s time to create Multi Tags Input Box.

A tags input is a user interface (UI) component for the user that allows the user to add or insert multiple entries as tags into an input field. In this Multu Tags Input in JavaScript project, as you can see on the webpage, there is an input box with some tags, button, and tags counter.

You can also remove each tag by clicking on a close icon as wll as you can remove all tags at once by clicking on the Remove All button. You can insert a maximum of 10 tags only and duplicate tags won’t be added in the input field.

You might like this:

Multi Tags Input Box in JavaScript with Source Codes

To create multi Tags Input in HTML CSS & JavaScript. First, you need to create three Files: HTML, CSS & JavaScript files. After creating these files just copy paste the following codes into your file. You can also download the source code files of this Tags Input project from the given download button.

HTML

First, you have to create an HTML file with the name of index.html and copy paste the given html codes into your HTML file.


<!DOCTYPE html>
<!-- Coding By Codegyan - codegyan.in -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Add Tags Input Box | Codegyan</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Unicons CDN Link for Icons -->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/thinline.css">
  </head>
  <body>
    <div class="wrapper">
      <div class="title">
        <img src="tag.svg" alt="icon">
        <h2>Tags</h2>
      </div>
      <div class="content">
        <p>Press enter or add a comma after each tag</p>
        <ul><input type="text" spellcheck="false"></ul>
      </div>
      <div class="details">
        <p><span>10</span> tags are remaining</p>
        <button>Remove All</button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS

After that you have to create style.css file and copy paste below css code to your css file.


/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #5372F0;
}
::selection{
  color: #fff;
  background: #5372F0;
}
.wrapper{
  width: 496px;
  background: #fff;
  border-radius: 10px;
  padding: 18px 25px 20px;
  box-shadow: 0 0 30px rgba(0,0,0,0.06);
}
.wrapper :where(.title, li, li i, .details){
  display: flex;
  align-items: center;
}
.title img{
  max-width: 21px;
}
.title h2{
  font-size: 21px;
  font-weight: 600;
  margin-left: 8px;
}
.wrapper .content{
  margin: 10px 0;
}
.content p{
  font-size: 15px;
}
.content ul{
  display: flex;
  flex-wrap: wrap;
  padding: 7px;
  margin: 12px 0;
  border-radius: 5px;
  border: 1px solid #a6a6a6;
}
.content ul  li{
  color: #333;
  margin: 4px 3px;
  list-style: none;
  border-radius: 5px;
  background: #F2F2F2;
  padding: 5px 8px 5px 10px;
  border: 1px solid #e3e1e1;
}
.content ul li i{
  height: 20px;
  width: 20px;
  color: #808080;
  margin-left: 8px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 50%;
  background: #dfdfdf;
  justify-content: center;
}
.content ul input{
  flex: 1;
  padding: 5px;
  border: none;
  outline: none;
  font-size: 16px;
}
.wrapper .details{
  justify-content: space-between;
}
.details button{
  border: none;
  outline: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  padding: 9px 15px;
  border-radius: 5px;
  background: #5372F0;
  transition: background 0.3s ease;
}
.details button:hover{
  background: #2c52ed;
}

JavaScript

Lastly, You have to create script.js file and copy paste below js code to your script.js file


const ul = document.querySelector("ul"),
input = document.querySelector("input"),
tagNumb = document.querySelector(".details span");

let maxTags = 10,
tags = ["code", "gyan"];

countTags();
createTag();

function countTags(){
    input.focus();
    tagNumb.innerText = maxTags - tags.length;
}

function createTag(){
    ul.querySelectorAll("li").forEach(li => li.remove());
    tags.slice().reverse().forEach(tag =>{
        let liTag = `<li>${tag} <i class="uit uit-multiply" onclick="remove(this, '${tag}')"></i></li>`;
        ul.insertAdjacentHTML("afterbegin", liTag);
    });
    countTags();
}

function remove(element, tag){
    let index  = tags.indexOf(tag);
    tags = [...tags.slice(0, index), ...tags.slice(index + 1)];
    element.parentElement.remove();
    countTags();
}

function addTag(e){
    if(e.key == "Enter"){
        let tag = e.target.value.replace(/\s+/g, ' ');
        if(tag.length > 1 && !tags.includes(tag)){
            if(tags.length < 10){
                tag.split(',').forEach(tag => {
                    tags.push(tag);
                    createTag();
                });
            }
        }
        e.target.value = "";
    }
}

input.addEventListener("keyup", addTag);

const removeBtn = document.querySelector(".details button");
removeBtn.addEventListener("click", () =>{
    tags.length = 0;
    ul.querySelectorAll("li").forEach(li => li.remove());
    countTags();
});

Also Read : What is Backlink? How to Get High Quality Backlinks in 2022

If you wann to check the demo of this code, then you can check using below demo button.

Click on the following download button to download all source code files of Add Tags Input Box directly  on your computer.

Final Word

In this way, we can create an Add Tags Input Box in HTML CSS & JavaScript.  I hope you all like this tutorial. Keep with us for next tutorial. if you wann the source code of this code you can get this on our github account. If you have any query please free to contact us Or comment below.

How to create Multi Tags Input Box in HTML CSS & JavaScript

Published on 16-Jan-2022 20:29:27

You may also like this!