Add Tags Input Box using HTML, CSS & JavaScript

Add Tags Input Box using HTML, CSS & JavaScript

Hello developers, today in this blog, you'll learn to create an Add Tags Input Box using HTML, CSS & JavaScript.

An input box is a field where the user can add or insert many entries. A tags input is a user interface component that allows the user to add or insert many entries as a tag as an input. The input box with some tags, buttons, and tags counters. simply, the input box is an input field where the user can enter the data.

In this blog (Add Tags Input Box), on the webpage, there is an input box with some tags, buttons, and tags counter at the center of the webpage. There are input tags, where you can type your data to make it as a tag. After you enter your data, by clicking the enter button on the keyboard of your device, the data will become a tag. You can enter a maximum of 15 tags in the input field. After entering your data into the input field, there is a counter which shows you the remaining number of the tags to enter into the input field. In the input field, there is a cross symbol, to remove the input tag, and also there is a Remove All button, below the input field which removes all your input tags and makes the input box empty, now the counter shows you that there are 15 tags are remaining.

The source code of this Add Tags Input Box is given below, if you want the source code of this program, you can copy it. You can use this Add Tags Input Box with your creativity and can take this project to the next level.

Add Tags Input Box [Source Code]

To make this website (Add Tags Input Box), you need to create three files: an HTML file, a CSS file, and a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Add Tags Input Box || Learningrobo</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/thinline.css"> </head> <body> <div class="container"> <div class="wrapper"> <div class="title"> <h2>Tags</h2> </div> <div class="content"> <p>Press enter key or add a comma at the end of each tag</p> <ul><input type="text" spellcheck="false"></ul> </div> <div class="details"> <p><span>15</span> tags are remaining</p> <button>Remove All</button> </div> </div> <div class="credit">Made with <span style="color:#12192c">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> <script src="script.js"></script> </body> </html>
CSS provides style to an HTML page. To make the page attractive, create a CSS file with the name style.css, and remember that you have to make a file with a .css extension.


*{
  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: #00C9A7;
}
::selection{
  color: #fff;
  background: #5372F0;
}
.wrapper{
  width: 496px;
  background: #12192c;
  color: #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 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: #967132;
  margin-left: 8px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
}
.content ul li i:hover{
  background-color: #12192c;
}
.content ul input{
  flex: 1;
  padding: 5px;
  border: none;
  outline: none;
  font-size: 16px;
  background: #12192c;
  color: #fff;
}
.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: #11998e;
  transition: background 0.3s ease;
}
.details button:hover{
  background: #38ef7d;
  color: #000;
}
.credit{
    text-align: center;
    color: #000;
    margin-top: 30px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
    text-decoration: none;
    color: #12192c;
    font-weight: bold;
} 
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension.


const ul = document.querySelector("ul"),
input = document.querySelector("input"),
tagNumb = document.querySelector(".details span");
let maxTags = 15,
tags = ["HTML", "CSS"];
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 = `
  • ${tag}
  • `; 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(); });
    We hope you will like this Add Tags Input Box using HTML, CSS & JavaScript.

    Thank you for reading our blog. If you face any problem creating this Add Tags Input Box using HTML, CSS & JavaScript, then contact us or comment us. We'll try to provide a solution to your problem as soon as possible.

    Thank you
    Learning robo team

    Post a Comment

    Thank you
    Learning robo team

    Post a Comment (0)

    Previous Post Next Post
    Learning Robo says...
    code copied
    Welcome
    OnlineEditor
    HTMLTools