Gmail-style Email Address Input Plugin - jQuery GmailTagsInput

File Size: 3.38 KB
Views Total: 8217
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Gmail-style Email Address Input Plugin - jQuery GmailTagsInput

GmailTagsInput is a really small jQuery plugin for creating a Gmail-style tags input that enables the user to type multiple valid email addresses in an input field.


  • Addes multiple email address by pressing 'enter' key.
  • Removes email addresses by clicking 'x' button.
  • Removes existing email addresses by pressing 'back' key.
  • Validates email addresses your user typed.

How to use it:

1. Place the jQuery GmailTagsInput plugin's stylesheet in the head section of the document.

<link rel="stylesheet" href="taginput.css">

2. The required HTML structure for the gmail tags input.

<div class="emailtag">
  <div id="tags">
    <input type="text" value="">

3. Place jQuery JavaScript and the jQuery GmailTagsInput plugin's stylesheet at the bottom of the document. Done.

<script src="" 
<script src="taginput.js"></script>

4. Override the default CSS to create your own styles.

#tags {
  border:1px solid #ccc;

#tags > span {
  color:rgba(0, 0, 0, 0.71);
  background:rgba(128, 128, 128, 0.43);

This awesome jQuery plugin is developed by poshan11. For more Advanced Usages, please check the demo page or visit the official website.