This is a jQuery plugin to help add tags like input in your forms.

In the header section add the following: 

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
  <script type="text/javascript" src="http://jquery-tagbox.googlecode.com/hg/js/jquery.tagbox.js"></script>
  <script type="text/javascript">
    jQuery(function() {
      jQuery("#jquery-tagbox-text").tagBox();
      jQuery("#jquery-tagbox-select").tagBox({ 
        enableDropdown: true, 
        dropdownSource: function() {
          return jQuery("#jquery-tagbox-select-options");
        }
      });
    });
  </script>

Add your form elements like this: 

<form action=".">
<div class="row">
      <label for="jquery-tagbox-text">Text TagBox (Comma Separated)</label>
      <input id="jquery-tagbox-text" type="text" />
</div><!--div.row-->
<div class="row">
      <label for="jquery-tagbox-select">Dropdown TagBox</label>
      <select id="jquery-tagbox-select-options">
        <option value="jQuery">jQuery</option>
        <option value="MooTools">MooTools</option>
        <option value="ProtoType">ProtoType</option>
        <option value="Scriptaculous">Scriptaculous</option>
        <option value="Dojo">Dojo</option>
      </select><!--select#-->
      <input id="jquery-tagbox-select" type="text" />
</div><!--div.row-->
</form>

Advanced Options:

• “separator” – This can be used to define the separator to be used to delimit the tags (Default: ‘,’)
• “className” – Used to set the tag-box class name (Default: tagBox)
• “tagInputClassName” – Used to set the class name of the tag input box (Default: ”)
• “tagButtonClassName” – Used to set the class name of the tag button (Default: ”)
• “tagButtonTitle” - Defines the title of the “Add Tag” button (Default: ‘Add Tag’)
• “confirmRemoval” - Defines whether removal of tags requires confirmation dialog (Default: ‘false’)
• “confirmRemovalText” – The text in the confirmationRemoval dialog (Default: ‘Do you really want to remove the tag?’)
• “completeOnSeparator” – Defines whether tags are added when separator is input (Default: ‘true’)
• “completeOnBlur” – Defines whether to add the tags when we blur from the tag input (Default: ‘false’)
• “readonly” – Defines whether tag-box is readonly (Default: ‘false’)

New Options added in version 1.0.1

• “enableDropdown” – Used to enable drop-down selection in the tag inpu (Default: ‘false’)
• “dropdownSource” - Returns the source for the tag box drop-down selector could be a jQuery object or JSON of the form {“key”:”value”} (Default: function(){})
• “removeTagText” - Defines the text inside the remove tag link (Default: ‘X’)
• “maxTags” - Defines the maximum number of tags to be added (Default: ‘-1′ i.e. unlimited)
• “maxTagsErr” - Callback to display error message when maxTags are reached (Default: ‘function(max_tags) { alert(“A maximum of “+max_tags+” tags can be added!”); }’)
• “beforeTagAdd” - Callback executed before a tag is added (Default: ‘function(tag_to_add) {}’)
• “afterTagAdd” - Callback executed after a tag is added (Default: ‘function(added_tag) {}’)

If you liked the plugin do not forget to share it on facebook, rate it and retweet it.

The article source:http://www.geektantra.com/2011/05/jquery-tagbox-plugin/