HTML 5

Thursday, January 20th, 2011 by

I recently came across a website that has very good information for the programmer that is ready to transition to HTML 5. It is Dive Into HTML5.

This website is an online manuscript that introduces many of the new features available for programming in HTML 5.

My favorite HTML 5 feature is the placeholder attribute for the <input> element like this:
(Click in the text box)

The code looks like this: <input placeholder="Enter something">

It used to take a little bit of Javascript coding to get this functionality and now it is included in HTML 5.

I then went back and modified some of my HTML code to take advantage of this new feature…

Name

ZIP Code

This is the HTML 5 coding for it…

<input name="search_term" id="search_term" placeholder="Lookup Name">
<input type="radio" name="search_type" value="name" onclick="javascript:getElementById('search_term').placeholder='Lookup Name';" checked>Name
<input type="radio" name="search_type" value="zip_code" onclick="javascript:getElementById('search_term').placeholder='Lookup ZIP Code';">ZIP Code

There are many more things that you can do with a <input> element in HTML 5 and Dive Into HTML5 is a good introduction.