HTML5_Logo_5121-300x300


What is HTML 5?

HTML or Hypertext Markup Language is a formatting language that programmers and developers use to create documents on the Web. The latest edition HTML5 has enhanced features for programmers such as <video>, <audio> and <canvas> elements. You view a Web page written in HTML in a Web browser such as Internet Explorer, Mozilla Firefox or Google Chrome. The HTML5 language has specific rules that allow placement and format of text, graphics, video and audio on a Web page. Programmers use these programming tags or elements to produce web pages in unique and creative ways. Tags such as <section>, <article>, <header> enable the creator to make a more efficient and intelligent web page. Users will not have to use a Flash plug-in for video and audio content. Visual Studio users typically write code in HTML5 when creating web site content.

HTML5 defines a variety of new input types:

  • Spinners
  • Range
  • Date
  • color choosers
  • List
  • Email
  • URL
  • Telephone Input
  • Search  and etc…

Spinners

This input type lets you collect a number (either integer or floating point). All known browsers that support this use a spinner. Your browser (Firefox 6 on Windows) does not support this input element.

<input type=”number” min=”0″ max=”20″ step=”2″ value=”10″ name=”some-name”/>

Range

This input type lets you collect a number (either integer or floating point). All known browsers that support this use a slider. The exact value is not displayed to the user unless you use JavaScript. So, use the number (spinner) input type if you want to let the user choose an exact value. Browsers are supposed to use a horizontal slider unless you attach CSS that specifies a smaller width than height, in which case they are supposed to use a vertical slider. Your browser (Firefox 6 on Windows) does not support this input element.

<input type=”range” name=”some-name”/>

Date

This input type lets you collect a date. Opera uses a textfield with a calendar that pops up when you clieck in the textfield, and it is expected that this is what most future browsers will do. However, the current version of Chrome (8.0.552.224) uses an interface that looks like a number spinner but increments the yyyy-mm-dd string one day at a time. As of January 2011, neither Firefox, Internet Explorer, nor Safari has any support at all for date input. There are also closely related elements to let you select a month (input type=”month”), week (input type=”week”), time (input type=”time”), date and time in global format (input type=”datetime”), and date and time in local format/timezone (input type=”datetime-local”). Note that the modernizr.com library incorrectly reports that the latest version of Chrome (8.0.552.224) does not support date input, when in fact it does (albeit with a much poorer interface than Opera).

<input type=”date” name=”some-name”/>

Color

This input type lets you collect a color of the form #rrggbb. If a browser supports this input type, the intention is that clicking in the textfield will result in a color chooser popping up. Note that the modernizr.com library incorrectly reports that the latest version of Opera (11.00 build 1156) does not support color input, when in fact it does.

<input type=”color” name=”some-name”/>

List

Adding the “list” attribute lets you add autocomplete behavior to most of the text-oriented input types (reqular textfields, email, URL, search, etc.) covered in this tutorial. The value of “list” should be the id of a “datalist” element that contains “option” elements giving the choices.

Note that the new (and poorly named) HTML5 “autocomplete” attribute is not used for these lists of choices, but instead is a flag that tells the browser whether or not it should used stored form values from previous sessions.

Sadly, the HTML5 autocompletion has no options for customizing the look, for using HTML in the autocomplete list, or for defining how the match against the choices is performed. So, if you are using JavaScript anyhow, the autocompleters from Scriptaculous, jQuery UI, Ext/JS, Dojo, etc., are far more usable. Your browser (Firefox 6 on Windows) does support this input element.

<input type=”text (or other)
list=”some-id” name=”some-name”/>
<datalist id=”email-choices”>
<option label=”Display Val 1″ value=”Insert Val 1″>
<option label=”Display Val 2″ value=”Insert Val 2″>
<option label=”Display Val 3″ value=”Insert Val 3″>

</datalist>

Email

This input type lets you collect an email address. If the “list” attribute is not specified, then the intention is that the browser supplies some help in entering a legal email address (e.g., the iPhone browser uses an email-optimized keyboard) and/or validation on submission. As of January 2011, the latest versions of Chrome and Safari claim to support email input, but have no difference in look or behavior. As of January 2011, the latest version of Opera has no difference in look on input, but performs URL validation on submission.

If the “list” attribute is specified, then the intention is that the browser lets the user choose among a set of email addresses defined separately with the “datalist” element. Your browser (Firefox 6 on Windows) does support this input element.

<input type=”email” name=”some-name”/>
<input type=”email” list=”email-choices” name=”some-name”/>
<datalist id=”email-choices”>
<option label=”Marty Hall” value=”hall@coreservlets.com”>
<option label=”Somebody Else” value=”someone@example.com”>
<option label=”Third Person” value=”other@example.com”>

</datalist>

URL

This input type lets you collect an absolute URL. If the “list” attribute is not specified, then the intention is that the browser supplies some help in entering a legal URL (e.g., the iPhone browser uses a URL-optimized keyboard) and/or validation on submission. As of January 2011, the latest versions of Chrome and Safari claim to support URL input, but have no difference in look or behavior. As of January 2011, the latest version of Opera has no difference in look on input, but, performs minor editing on change and validates illegal characters on submission. On change, Opera adds “http://&#8221; to the front of URLs that lack it. (The definition of onchange is when you enter something and then click in a different textfield or otherwise have the original textfield lose focus.) On submission, Opera gives an error message if the URL contains illegal characters, but does not do full URL validation (e.g., “http://blah&#8221; [no host] and “htp:” [bogus protocol, no host] are both allowed).

If the “list” attribute is specified, then the intention is that the browser lets the user choose among a set of URLs defined separately with the “datalist” element. Your browser (Firefox 6 on Windows) does support this input element.

<input type=”url” name=”some-name”/>
<input type=”url” list=”url-choices” name=”some-name”/>
<datalist id=”url-choices”>
<option label=”HTML5 Spec” value=”http://dev.w3.org/html5/spec/”&gt;
<option label=”Some other URL” value=”http://example.com/blah.html”&gt;
<option label=”Yet Another URL” value=”http://foo.bar.com/baz.html”&gt;

</datalist>

Telephone Input

This input type is intended to help you collect a telephone number. However, since the format of telephone numbers is not specified, it is not clear how a normal browser would help you with this. However, a cell phone might use an on-screen keyboard that is optimized for phone number input. As of January 2011, Chrome, Safari, and Opera claim to support telephone input, but show no difference when entering values and perform no validation when submitting values. Your browser (Firefox 6 on Windows) does support this input element.

<input type=”tel” name=”some-name”/>
Aligned ht,l format:

About the Author ksawme

CTO is my profession & Entrepreneurship is my passion... Fortunately, thanks to my CEO & childhood friend Anand Nataraj, I am onto my second stint of entrepreneurship & added to the beauty, I am paid for it!! So per Anand's word, I am an Interpreneur!! And we @ Cogzidel, are here to make a MARK!! in the IT Arena! On personal front, I am a Happy go lucky guy with a lovely, caring wife & cute little daughter. & I have strong interest in photography, blogging & meeting new people personally & virtually :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s