Many newer social media communities and web applications are pushing the boundaries of interface design. Form inputs have changed a lot over just the past 4-5 years. One such feature is the tag select input field, where users can enter tags which appear as block items within the field itself.
For this tutorial I want to demonstrate how we can build this effect to be used in any website. To save time I’ll be using the jQuery Tags Input Plugin which is free and open source to use on any project. I prefer this plugin over some others because of the many parameters and options for customizing the experience. Take a peek at my live demo to see what we will be creating.
LIVE DEMO – DOWNLOAD SOURCE CODE
Getting Started
First we need to download a copy of the script and include the JS/CSS files into a main HTML file. You can download the jQuery Tags Input from its official Github repo. This zip file should contain a minified JS file along with some CSS styles. We also need to reference a copy of the jQuery library to get this working.
<!doctype html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html"> <title>Input Tags Field - Live Demo</title> <meta name="author" content="Jake Rocheleau"> <link rel="shortcut icon" href="http://turbo.designwoop.com/wp-content/themes/DesignWoop/img/favicon.png"> <link rel="icon" href="http://turbo.designwoop.com/wp-content/themes/DesignWoop/img/favicon.png"> <link rel="stylesheet" type="text/css" media="all" href="css/style.css"> <link rel="stylesheet" type="text/css" media="all" href="css/jquery.tagsinput.css"> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/jquery.tagsinput.min.js"></script> </head>
Now the plugin itself will generate a new dynamic field within the DOM after targeting the original input. This is the page element which all the plugin CSS will be targeting, if you wish to overwrite colors or sizes or whatever. The most important point is to create a new form element which contains a generic text-based input field.
<div id="content">
<h1>jQuery-Powered Input Tags</h1>
<p>Add some new tags and press enter to confirm. Backspace will delete old tags in the list. All of the input data is comma-separated and passed into the form action on submit.</p>
<p>When adding & removing a tag the results are output in the JavaScript console.</p>
<br>
<form id="nothing" name="nothing" method="post" action="#">
<input type="text" name="tags" id="tags" value="wordpress,fork cms,locomotive">
</form>
From here we may call the .tagsInput() method and generate the effect without any custom options. It is possible to select inputs by name or by class, however using an ID value is often the best solution. It will provide the most direct results and you avoid accidentally targeting another field by mistake.
Basic Styles
My core stylesheet is fairly basic with many custom resets and default typographic properties. I am importing an external font stylesheet from Google to be used for the h1 tags. Also I downloaded a free background calledrice paper from Subtle Backgrounds to add some texture into the design.
@import url('http://fonts.googleapis.com/css?family=Kavoon');
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { overflow-y: scroll; }
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 62.5%;
line-height: 1;
color: #444;
background: #edebe7 url('../img/bg.png'); /* http://subtlepatterns.com/rice-paper/ */
}
br { display: block; line-height: 1.6em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
input, textarea {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
h1 {
display: block;
text-align: center;
font-family: 'Kavoon', Arial, sans-serif;
color: #626262;
font-size: 3.6em;
line-height: 1.4em;
margin-bottom: 12px;
}
The plugin stylesheet codes are worth glancing at if you hope to re-design bits of the interface. All the properties are written inline and close together, but you can easily skim the file and make edits as needed.
div.tagsinput { border:1px solid #CCC; background: #FFF; padding:5px; width:300px; height:100px; overflow-y: auto;}
div.tagsinput span.tag { border: 1px solid #a5d24a; -moz-border-radius:2px; -webkit-border-radius:2px; display: block; float: left; padding: 5px; text-decoration:none; background: #cde69c; color: #638421; margin-right: 5px; margin-bottom:5px;font-family: helvetica; font-size:13px;}
div.tagsinput span.tag a { font-weight: bold; color: #82ad2b; text-decoration:none; font-size: 11px; }
div.tagsinput input { width:80px; margin:0px; font-family: helvetica; font-size: 13px; border:1px solid transparent; padding:5px; background: transparent; color: #000; outline:0px; margin-right:5px; margin-bottom:5px; }
div.tagsinput div { display:block; float: left; }
.tags_clear { clear: both; width: 100%; height: 0px; }
.not_valid {background: #FBD8DB !important; color: #90111A !important;}
Also if you check in the DOM you will notice a new div element is created underneath the input field. This is given an ID name of originalfield_tagsinput which you could then target using CSS. Some developers may choose to edit the plugin CSS files directly. Either choice is fine as long as you keep everything organized and remember where you made certain changes.
Developing over jQuery
The last piece of code we should look into calls the plugin method to active our tag input effect. Now we could just keep everything simple and call $(‘#tags’).tagsInput() without any internal parameters. This keeps all the defaults in place and would be easy to manage, although more generic-looking.
$(function(){
$('#tags').tagsInput({
'height':'120px',
'width':'550px',
'interactive':true,
'defaultText':'new tag',
'onAddTag':function(tag){
console.log("Added a tag: " + tag)
},
'onRemoveTag':function(tag){
console.log("Removed a tag: " + tag);
},
'removeWithBackspace':true,
'minChars':2,
'maxChars':30,
'placeholderColor':'#777'
});
});
I have included a number of extra parameters just to demonstrate what is possible. First the width/height params can set optional boundaries to expand the input box. By default the input field is interactive allowing new tags – but you can disable this to be readonly. I also updated the default tag input text so it is shorter.
minChars, maxChars, removeWithBackspace, and placeholderColor should all be pretty straightforward. But the onAddTag and onRemoveTag params may be somewhat confusing. These are callback parameters which take some action or function value once a tag is added or removed from the input field. In my example we just output a log message stating which tag was added or removed. But you may customize this to do anything you need in relation to the interface.
My example still leaves out a lot of extra features which are possible. This plugin even allows for autosuggest functionality via Ajax requests. You can read up on the plugin documentation page to find more info about the other parameter options.
Final Thoughts
Web developers can use these beautiful interface features to take advantage of newer browser capabilities. I have always loved finding tag lists in this fashion because they are so easy to work with. And ultimately the user experience should be more important than other design concerns. Download a sample copy of my tutorial codes and see if you can build any other similar interfaces on future projects.