I had my first hands on experience with HTML5 and I am quite impressed with it. HTML5 will definitely change the way we build web sites and the way we access them. Most popular browsers and mobile devices have already started supporting some HTML5 features.
To start with, I will cover few basic but interesting features of HTML5.
Please note, I have used Google Chrome browser to test these features.
HTML5 doctype
To use HTML5, you need to place <!DOCTYPE html> code snippet on the first line of your HTML file.
For example:
<!DOCTYPE html>
<html>
<body>
<form method="get">
Name : <input type="text" />
</form>
</body>
</html>
HTML5 Input Types
Many new input types are introduced in HTML5. Some of the most interesting input types are as below.
Number - The number input types is a field which should contain numeric value. The number input type supports a following validation attributes.
min – minimum value allowed
max – maximum value allowed
step - Allowed number series between min and max. it means if min=0, max=10 and step=2 then allowed field values will be 0,2,4,6….10.
Example:
Even Numbers: <input type=”number” name=”Even” min=”0” max=”10” step=”2”/>
In above example value less than 0 or greater than 10 or odd values like 3,5,7 are considered as invalid values.
Range – The range input type is very similar to number input type. However, it is displayed as slider bar. The range input type supports a following validation attributes.
min – minimum value allowed
max – maximum value allowed
step - This defines a jump for slider bar. It means if step=5 then slider slides a 5 points at a time.
Example:
Zoom : 0 <input type="range" name="zoom" min="0" max="100" step="5"/> 100
In browser, this is represented as below.
Email – The email input type is a field which should contain email address as value. On form submit, value of email field is automatically validated.
Example:
Personal Email: <input type="email" name="personalEmail"/>
<input type="submit"/>
If user enters an incomplete/invalid email address then following warning message is displayed.
URL – The url input type is a field which should contain URL address as a value. On form submit, value of url field is automatically validated.
Example:
URL: <input type="url" name="myUrl"/>
<input type="submit"/>
If user enters an incomplete/invalid URL address then following warning message is displayed.
Date – The date input type field should contain date as a value. On form submit this field is validated automatically.
Example:
Date: <input type="date" name="date"/>
In browser, this is represented as below.
Month – The month input type filed is used for selecting year and month. On form submit this field is validated automatically.
Example:
Month: <input type="month" name="month"/>
In browser, this is represented as below.
Week – The week input type filed is used for selecting year and week. On form submit this field is validated automatically.
Example:
Week: <input type="week" name="week"/>
In browser, this is represented as below.
Time - The time input type filed is used for selecting hours and minutes. On form submit this field is validated automatically.
Example:
Time: <input type="time" name="time"/>
In browser, this is represented as below.
Datetime - The datetime input type filed is used for selecting year, month, day, hours and minutes (UTC time). On form submit this field is validated automatically.
Example:
Date Time: <input type="datetime" name="d_time"/>
In browser, this is represented as below.
Datetime-local - The datetime-local input type filed is used for selecting year, month, day, hours and minutes (local time). On form submit this field is validated automatically.
Example:
Date Time Local: <input type="datetime-local" name="d_time_local"/>
In browser, this is represented as below.
……………………………………………………………………………………………..
So, today I have covered few important HTML5 input types. This is only a tip of iceberg. I will cover few more HTML5 features in my next post. Meanwhile I would recommend you to read Head First HTML5 Programming: Building Web Apps with JavaScript
.
.Please feel free to post your queries.
Great article. Useful information. nice explanation. Thanks for Posting.
ReplyDeletehttp://www.cavinitsolutions.com/