HTML5: Input with multiple entries

This entry is part 30 of 34 in the series HTML5

The <input multiple> attribute allows users to enter more than one value in a particular field.

It can be used on any input type such as allowing users to enter multiple email addresses.

Thi is illustrated by the example below.

<!DOCTYPE html>
<html lang='en'>
    <meta charset='utf-8'>
    <title> Multiple Entries</title>
    <label for='email_id'>All Email Addresses, separated by coma:</label>
    <input multiple required type='email' id='email_id' name='email'/>
    <input type='submit' value='Go'/>


Note that the email addresses would have to be separated by a coma.  This attribute is supported by all major browsers.

jQuery UI & Autocomplete: Multiple entries with values

This entry is part 6 of 7 in the series jQuery UI Autocomplete

jQuery UI Autocomplete – Multiple values

Usage: Type something, eg. “j” to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.

This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.

<!doctype html>
<html lang='en'>
    <meta charset='utf-8'>
    <title>jQuery UI Autocomplete - Multiple values</title>
    <link rel='stylesheet' href='//'>
    <script src='//'></script>
    <script src='//'></script>
    <link rel='stylesheet' href=''>
        $(function () {
            var availableTags = [

            function split(val) {
                return val.split(/,\s*/);

            function extractLast(term) {
                return split(term).pop();

                // dont navigate away from the field on tab when selecting an item
                    .bind('keydown', function (event) {
                        if (event.keyCode === $.ui.keyCode.TAB &&
                                $(this).data('ui-autocomplete') {
                        minLength: 0,
                        source: function (request, response) {
                            // delegate back to autocomplete, but extract the last term
                                    availableTags, extractLast(request.term)));
                        focus: function () {
                            // prevent value inserted on focus
                            return false;
                        select: function (event, ui) {
                            var terms = split(this.value);
                            // remove the current input
                            // add the selected item
                            // add placeholder to get the comma-and-space at the end
                            this.value = terms.join(', ');
                            return false;

<div class='ui-widget'>
    <label for='tags'>Tag programming languages: </label>
    <input id='tags' size='50'>

Try The Code