In this article you'll learn how to create tags input box using HTML CSS & JavaScript.
Tags input box use to add tags or multiple input entries.
This tags input box has functionality:
- To add and remove tags (up to five tags).
- Count the number of tags present in tag box.
- Indicator. To show when tag box reached it limit of tags input.
Video Tutorial of Tags Input Box.
Tags Input Box.
How this tags input box works?. When user submit the input field data or value then that value show in the inside tag box area with different styles. If tags input box have less than or equal to 5 tag then only tags will be inserted inside tag box otherwise its shows the indicator of limit reached by blinking tags counter. See demo in above YouTube video.
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files in that folder with name index.html and index.css.
I've integrated JavaScript within the HTML files.
Let's create tags input box using HTML, CSS and JavaScript step by step.
Step 1: Create basic structure of html.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tag Box</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
<script>
</script>
</html>
CSS
*{
padding: 0;
margin: 0;
font-family: sans-serif;
}
body{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(45deg, #3c2cb2, #f6d4ff)
}
Output:
Step 2: Create basic box for input tags box.
HTML
<div class="box">
</div>
CSS
.box{
width: 600px;
background-color: #1e1e1e;
padding: 10px;
border-radius: 15px;
}
Output:
After adding box. Add title and counter inside it.
Step 3: Add title and counter for input tags box.
Add title and counter for tags box. Counter to show number of tags in tag box and tags limit.
Also read: Create a fade out animated count down timer using JavaScript.
HTML
<h3>Tags</h3>
<div class="counter">
<div class="count">0</div>
<div class="max_tags">/5</div>
</div>
CSS
.box h3{
color: #fff;
font-size: 30px;
margin: 10px;
}
.box .counter{
display: flex;
margin: 10px;
}
.box .counter .count ,
.box .counter .max_tags{
font-size: 20px;
font-weight: bold;
color: #9e9e9e;
}
Output:
After adding title and counter. Now create box to add tags.
Step 4: Create a tag box to insert tags.
Create a tag box to insert tags. Means when a user submits the form (which is not created yet we'll add later), then the input field value will be inserted inside this box with stylings looks like a tag.
Also read: Create a simple pop up box using HTML, CSS and JavaScript.
HTML
<div class="tag_box">
</div>
CSS
.box .tag_box{
min-height: 100px;
max-height: 200px;
background-color: #2e2e2e;
border-radius: 10px;
padding: 10px;
overflow-y: scroll;
}
.box .tag_box::-webkit-scrollbar{
width: 10px;
}
.box .tag_box::-webkit-scrollbar-thumb{
background-color: #5e5e5e;
border-radius: 100px;
}
Output:
Step 5: Add input field.
This input field value is going to show in the form of a tag inside the tag box (class="tag_box").
We'll run a function on form submission that does the functionality of inserting tags (input field value) to tag box (class="tag_box").
Also read: Disable input field dynamically using HTML, CSS and JavaScript.
Also read: Input field animation using HTML and CSS.
HTML
<form action="#" id="form">
<input type="text" class="input_field" placeholder="Add Tags" required>
</form>
CSS
.box form{
text-align: center;
}
.box form .input_field{
width: 95%;
font-size: 25px;
background-color: #2e2e2e;
padding: 8px 10px;
margin: 20px 0px;
color: #fff;
border-radius: 5px;
border: none;
outline: none;
}
Output:
Now let's add JavaScript to make this tag box functional.
Step 6: Create functionality to add tags in the tag box.
We are going to add input field value to the tag box, along with other html tags for styling, so that it looks like a tag.
Below are the CSS for those html tags in which we add the input field value. And add that html elements inside the tag box using JavaScript for displaying input field value as a tag.
Also read: Automatic pop up box using html, css and javascript.
CSS
.tag_box .tag{
font-size: 20px;
color: #fff;
background-color: #1e1e1e;
display: inline-flex;
align-items: center;
padding: 5px 10px;
border-radius: 50px;
margin: 5px;
}
.tag_box .tag span{
font-size: 25px;
rotate: 45deg;
cursor: pointer;
}
.tag_box .tag p{
margin-left: 5px;
}
We are going to insert or create tags by submitting a form. You can submit a form by pressing enter.
So tags inserting functionality is like this:
- When a user submits the form.
- We'll run the function in that function and we'll use the preventDefault() function. It's because I don’t want to load the page when the form is submitted.
- After that we'll add the condition to check the number of tags present in the tag box.
- If it is less than 5, we'll add the tag means we'll add form input field value inside the tag box along with wrapped html elements to form a tag design.
- And if the number of tags is more than 5 then we'll blink the counter (class="counter") to indicate to the user that the tag limit has been reached.
To add a blink like effect to counter (class="counter") we are going to add an active class to count and max_tags class (these classes are inside the counter class).
So let's create a separate active class with animation using CSS keyframes.
CSS
.active{
animation-name: animation;
animation-duration: 1s;
animation-iteration-count: 1;
}
@keyframes animation {
0%{
color: red;
}
25%{
color: #9e9e9e;
}
50%{
color: red;
}
75%{
color: #9e9e9e;
}
100%{
color: red;
}
}
Now let's add JavaScript to insert or create tag.
JavaScript
let count = document.querySelector(".count");
let max_tags = document.querySelector(".max_tags");
let tag_box = document.querySelector(".tag_box");
let input_field = document.querySelector(".input_field");
let form = document.getElementById("form");
form.onsubmit = function (e) {
e.preventDefault();
if(count.innerHTML < 5){
tag_box.innerHTML += `<div class="tag">
<span class="span">+</span>
<p>`+ input_field.value +`</p>
</div>`;
input_field.value = "";
}else{
count.classList.add("active");
max_tags.classList.add("active");
setTimeout(() => {
count.classList.remove("active");
max_tags.classList.remove("active");
}, 2000);
}
}
Tag insertion is ready.
Now let's add functionality to remove tags. So that user can remove tags. We are going to add the code of remove tag just below if-else condition inside a function that runs on form submission above.
Step 7: Add functionality to remove tags from tag box.
We goint to select all the elements with class="tag" (which a tag), which is added from above JavaScript.
By foreach method of JavaScript, we are going to target each tag with class="tag" and also span tag of that class (which is for close sign to remove tags, you can use image also).
After targeting each span tag, we are going to add a click event on it. Which removes the whole tag that contains that span tag, which is clicked.
JavaScript
let tag = document.querySelectorAll(".tag");
tag.forEach(tag => {
let remove_tag_button = tag.querySelector(".tag .span");
remove_tag_button.onclick = function(){
tag.remove();
}
});
Functionality to remove tags is created. Now let's create function to count tags present in tag box.
Step 8: Create counter for tag box to count tags.
Again, we select all tag variable (class="tag") to count it.
By tag.length we get the number of tag. Then we store that number inside count class (class="count") inside counter class.
JavaScript
function tag_counter(){
let tag = document.querySelectorAll(".tag");
count.innerHTML = tag.length;
}
Now we need to call this function to run or to count the tags. So, we going to call this function after tag is inserted and tag is removed.
So that's it tags input box with tags input limit is ready using HTML, CSS and JavaScript,
You can see demo in above youtube video.
You may like:
- How to create a character counter using HTML, CSS and JavaScript.
- How to add a character limit inside a text area using HTML, CSS and JavaScript.
- How to create a pop up model using HTML, CSS and JavaScript.
- How to create increment and decrement counter using HTML, CSS and JavaScript.
Final code:
So that’s its simple tag input box is ready using html css and JavaScript. If you have any query or suggestion you can write in comment section.
Thanks for ready this far.
Share your thoughts.