Buy me a coffee
Create Tag Input Box using HTML, CSS, and Javascript
AdBlock Detected!
Our website is made possible by displaying ads to our visitors. Please supporting us by whitelisting our website. Learn More
MrJazsohanisharma

Create Tag Input Box using HTML, CSS, and Javascript

byAshutosh Tiwari •
2
Hello friends, today in this blog you'll learn how to create a tag input box using HTML, CSS, and Javascript. In our previous blog, we saw how to create an input with a character limit using HTML, CSS, and Javascript. Now it's time to create a tag input box. Earlier, I shared many projects related to javascript, you can check if you want, and don't forget to check HTML, CSS, and Javascript projects.

A tags input is a user interface (UI) component that allows the user to add or insert multiple entries as tags into an input field. There is an input box as you can see in the image above, when you click on the input the border color changes. To add tags in the input, you just need to type something and hit ENTER button or SPACE button and the text will be converted into a tag.

You may like these:

If you want to remove the tag, so you can simply click on the close icon or you can simply press the BACKSPACE button the last tag will be removed. But if you want to remove all the tags so you can remove them by clicking the clear all button.


If you are unable to understand or felling difficulty understanding so you can check the source code and preview it as well.

Create Tag Input Box using HTML, CSS, and Javascript [Scource Code]

Initially, the preview will not run you'll have to click on the RUN PEN button then the program will run, and then you'll be able to check the preview.

You can make changes in this after creating this program like you can change the colors and background colors. You don't need to use only this design. You can create a better version of this by modifying it.


I hope you like it. If you want to create this. You'll have to create three files HTML, CSS with the extension for example:- For HTML - .HTML and for CSS - .css and for Javascript- .js just paste the given code in the files and don't forget to link the CSS and Javascript files to the HTML file.

Hurray! now you've created a tag input box. You can download files by clicking on the download button after downloading the file if you are facing any kind of problem feel free to ask me in the comment section and you can also contact me via e-mail. Thanks for giving your precious time for reading this blog. Here is the download button:-

Zip File's Password = InCoderWeb

Tags:

2 Comments

  1. Biswajit SheeDecember 10, 2024 at 6:04 PM

    Hi Ashutosh,

    I think you should add the following the below two lines in your addTag() function in order to manage duplicate tags and empty tags when the input is any string ended with comma(,) and an enter key pressed to fed that input to your Tag input box,

    if (!tag) return;
    if (tags.includes(tag)) return;

    modified addTag() will be like this

    const addTag = (e) => {
    if (e.key == 'Enter' || e.keyCode == 32) {
    let tag = e.target.value.replace(/\s+/g, ' ');
    if (tag.length > 1 && !tags.includes(tag)) {
    tag.split(',').forEach((tag) => {
    if (!tag) return;
    if (tags.includes(tag)) return;
    tags.push(tag);
    createNewTag();
    })
    }
    e.target.value = '';
    }

    if (e.target.value.length > 0) return
    if (e.key == 'Backspace') {
    tags = [...tags.slice(0, tags.length - 1)];
    ul.querySelectorAll("li").forEach(li => li.remove());
    createNewTag();
    }
    }

    ReplyDelete
    Replies
    1. Ashutosh TiwariDecember 18, 2024 at 10:23 AM

      Thank you for taking the time to review the code and suggest improvements

      Delete
Previous Post Next Post