I am practicing a very interesting technology these days for one of the subjects in my College. Yes, it is HTML5 and I am in an experimenting stage in it these days. One of my own way of self learning is to identify little little syntax and GUI controls in programming languages (here, it is a scripting language) using a simple text editor like notepad. Once I am comfortable enough with the language, I'll be using some IDE to do some complex tasks like building a website etc.
Why I decided to write this post is to show you all how interesting HTML5 is though it is not fully supported with all the major web browsers yet. If you have Google Chrome to the latest updated version (I have Version 26.0.1410.64 m Currently), I think you can manage all the below outputs as I have already experienced.
As a good start, I thought to create an all in one registration form. What I'm trying here to demonstrate is how each input control of HTML5 can be used with ease. Note that you may find some irrelevant entry fields but as I said, It's just tried out by myself for a demonstration purpose.
If you want to check the code, download the html file and the css file below.
It contains an html file and the CSS file required to it. Just right click the html file and run it in Chrome Web browser to see the below output.The output looks as below in Chrome
If you observe the code, you will find that none of the Input fields does not hold any validation control attached to it. That is because HTML5 automatically identifies the the type of the input from the type attribute of the input tag that we use to determine the data entered to those fields and validates to avoid user errors. We don't need to use complex regular expressions to validate these input fields.
I have clearly formatted the code so that anyone can go through it easily and understand what I have used. there's only one place where I have used a piece of java script to identify the user selected rate in the range control using a text box. Note that other than that, I did not do any back end client side or server side coding logic in this simple example. All I wanted to understand is, how to use the new controls in HTML5.
You can also, work with HTML5 and CSS3 in Microsoft Visual Studio 2010 IDE. If you don't have CSS3 in your IDE, you can download and install it from here. Then you can notice CSS3 in your IDE when creating CSS files. One such place where I required CSS3 is, using rounded- rectangles for the boarders of the input controls that I have used. You can style your forms very nicely using CSS files. I just have used only a very few styles in my StyleSheet file and attached it to the html file.
I think I could cover almost all the major Input controls in HTML5 in this simple exercise. Hoping to post some more interesting stuff under this area soon :)
have a better view of the Completed Registration Form by clicking the below shown link. You can straight away view it in your browser
No comments:
Post a Comment