How to create HTML5 DataList

HTML5 Datalist is a new html tag shipped with HTML5 specification. HTML5 Datalist can be used to create a simple poor man’s Autocomplete feature for a webpage.

In this tutorial we will go through the basics of HTML5 Datalist tag and check some quick examples of autocomplete.

Introduction to HTML5 Datalist tag

As part of HTML5 specification a new tag <datalist> has been introduced. Using this tag, we can define a list of data which then can be used as list for an input box. We can create a simple Autocomplete feature using this tag.

html5 datalist example
html5 datalist example

Consider a textbox to take country name input from user.

Syntax:

<input type="text" list="countries" name="mycountry" />

See how we used attribute list and pass a list of countries called ‘countries’. We can define this list of countries using datalist tag.

<datalist id="countries">
	<option value="India">India</option>
	<option value="United States">United States</option>
	<option value="United Kingdom">United Kingdom</option>
	<option value="Germany">Germany</option>
	<option value="France">France</option>
</datalist>

So we created a list of countries using <datalist> tag. The id of datalist tag must match with the list attribute of the input box.

Demo

Below is the demo. Enter some text in the Country textbox and see how an autocomplete list appears below it.

Browser Compatibility

Not every browser out there supports html5 datalist for now. So far IE 10 and above, Firefox, Chrome and Opera 19 above supports html5 datalist tag. Safari doesn’t support datalist yet 🙁

Chrome Firefox (Gecko) Internet Explorer Opera Safari
31 26.0 10.0 19.0
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>

<script>

// Safari reports success of list attribute, so doing ghetto detection instead
yepnope({
  test : (!Modernizr.input.list || (parseInt($.browser.version) > 400)),
  yep : [
      'https://raw2.github.com/CSS-Tricks/Relevant-Dropdowns/master/js/jquery.relevant-dropdown.js',
      'https://raw2.github.com/CSS-Tricks/Relevant-Dropdowns/master/js/load-fallbacks.js'
  ]
});
</script>
</head>
<body>
<input type="text" list="countries" name="mycountry" />

<datalist id="countries">
	<option value="India">India</option>
	<option value="United States">United States</option>
	<option value="United Kingdom">United Kingdom</option>
	<option value="Germany">Germany</option>
	<option value="France">France</option>
</datalist>
</body>
</html>

Download Source Code

html5-datalist.zip (5.4KB)

How to create Bootstrap Navbar Menu without JavaScript

Bootstrap Navbar Menu without JavaScript
Bootstrap Navbar Menu without JavaScript

Bootstrap Navbar Menu without JavaScript – Bootstrap is getting lot of traction since past few years. While many argue it makes web look plain and similar, it has been boon to non-ui developers. The learning curve is also easy and thus you can make good looking web pages in no time.

Update: For Bootstrap 4 example scroll to the bottom of post.

One of most used component of Bootstrap with Navbar. The navbar menu is responsive and adapts to any screen size. For small devices (mobile) the navbar get collapsed and a burger icon appears which can be used to open/close menu in navbar.

To collapse/uncollapse the menu you have to include bootstrap javascript and jquery javascript in your webpage. Sometime this is a little uncomfortable. Say you have a static webpage without any javascript. If you want to show/hide the navbar menu then you have to include all these javascript files unnecessarily. There must be a way of getting away with javascript and still able to use bootstrap navbar? Well there is. You can make bootstrap navbar hide/show for mobile devices without using javascript. Checkout the following code.

The HTML

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <input type="checkbox" id="navbar-toggle-cbox">
    <div class="navbar-header">
      <label for="navbar-toggle-cbox" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </label>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </div>
  </div>
</nav>

The CSS

#navbar-toggle-cbox {
  display:none
}
#navbar-toggle-cbox:checked ~ .collapse {
    display: block;
}

So how does this works? First check the html. We added a checkbox and hide it using CSS. Next we changed the button into label and connect the label to checkbox using for="". So whenever you click the burger menu which act as label for checkbox toggles it state. And as per the state of checkbox we show or hide the content.