Sunday, December 12, 2010

HTML 5 Sample page with sample code for newly introduced INPUT elements

Here is a sample code for an HTML 5 page with the new input elements, which has the minimum set of properties defined so as to get a feel of how the new HTML standards are coming up. This will also give us an idea on how these changes are going to affect the user experience once they gets implemented in web pages.

Let us start by specifying the HTML 5 doc-type as shown below.
<!DOCTYPE html>
At the time of this writing, below are the type of input elements that are available. Most of these new element types are being supported in Google Chrome.

Keyword State Usage
search Search <input type="search">
number Number <input type="number">
range Range <input type="range">
color Color <input type="color">
tel Telephone <input type="tel">
url URL <input type="url">
email E-mail <input type="email">
date Date <input type="date">
month Month <input type="month">
week Week <input type="week">
time Time <input type="time">
datetime Date and Time <input type="datetime">
datetime-local Local Date and Time <input type="datetime-local">

Here is the sample HTML code showing the basic features of the newly introduced input controls. For sake of simplicity, the properties are kept to a minimum. Even the layout beautification is ignored.

Simple Sample Code:
<!DOCTYPE html>
<head><meta charset="utf-8">
<title>HTML5 Sample Page</title>
<style type="text/css">
<form id="form1" method="post">
<input type="search" placeholder="Search text here"><br />
<input type="number" value="50" min="40" max="60" step="5" autofocus="true"><br />
<input type="range" value="50" min="40" max="60" step="5"><br />
<input type="color" value="#000000"><br />
<input type="tel" placeholder="999" pattern="[0-9][A-Z]{3}" title="A part number is a digit followed by three uppercase letters."><br />
<input type="url" value=""><br />
<input type="email" multiple value=""><br />
<input type="date" max="2050-12-31" min="2000-01-01" value="2010-01-01"><br />
Date Time (Time zone information included):
<input type="datetime" value="2000-12-31T00:00+05:30"><br />
Local Date Time (No Time Zone information):
<input type="datetime-local" value="2000-12-1T00:00"><br />
<input type="month" max="2000-10" min="2000-02" value="2000-04" step="2"><br />
<input type="week" max="2000-W50" min="2000-W05" value="2000-W06" step="2"><br />
<input type="time" max="23:00:00" min="01:00:00" value="04:30:00" step="5"><br />
File Upload:
<input type="file" accept="image/*" name="image" multiple onchange="updateFilename(this.value)"><br />
<input type="submit" value="Submit"/>

The above sample code also includes the usage of new properties like multiple, pattern, placeholder, autofocus, min, max, step etc.

Here is how it looks in Google Chrome.

Yes, it looks ugly (though it serves the purpose)! Feel free to copy the code and beautify/change it as needed. Let me know whether there is any changes, since the specification is fairly new.


No comments:

Post a Comment