DotNetStories
Using HTML 5 form input elements in ASP.Net applications
I am going to start a new series of posts that focus on HTML 5. HTML 5 is something I wanted to learn and finally I have covered enough ground to feel confident.HTML 5 gives us things like Semantic tags, the possibility to add video and audio in our pages without any plugins.With Canvas we can have very rich animations to our web pages.
I see that now with all these emerging technologies there are many things you can do on the client. JQuery is amazing and you can do so many things. Please have a look at my posts on JQuery. CSS3 is another big player that all developers should look into.
Some people might argue that front-end developers cannot use HTML 5 and CSS3 right now, because there are many browser versions from various vendors that do not support them or support them partially. IE6- IE8 do not support CSS3 (or there is a little support) but IE 9 supports many of them.In general (with some exceptions) IE9, Opera 10+, Firefox 3.5+, pretty much any reasonably recent version of Chrome, and Safari 3+ support CSS3.
CSS3 comes with Color enhancements,Transforms,Shadowing,Rounded corners and much more.
Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.
Maybe now it is not the best time to implement a solution with HTML5 and CSS3 but we should definitely learn and master those new technologies.In this post I will talk about HTML 5 and more particular HTML 5 new form input element tags and attributes. You will be amazed at what you can do with HTML 5 form input tags and how easy it is to add watermarks, validation and also how to receive focus on an element.
Let's begin with our example. This is going to be a very simple form and I will show you how to upgrade it to HTML 5.Note that for all these examples I will be using Chrome version 15, since it supports most of the HTML 5 new features.
1) Launch Visual Studio and create an empty website.
2) Add a simple html item to your site. This is the mark up for the html form
<body> <header> <h1>Fill in the form to win special prizes!!!</h1> </header> <section id="contactform"> <hgroup> <h2>Make sure everything is correct.</h2> </hgroup> <form id="mainform"> <label for="name">Name</label> <input tabindex="1" class="data" id="name" name="name" type="text" title="enter your name" /> <label for="age">Age</label> <input tabindex="2" class="data" id="age" name="age" title="enter your age" type="text" /> <label for="email">Email</label> <input tabindex="3" class="data" id="email" name="email" type="text" title="enter an email" /> <label for="date">Date</label> <input tabindex="4" class="data" id="date" name="date" type="text" title="enter a date" /> <label for="site">Site</label> <input tabindex="5" class="data" id="site" name="site" type="text" title="enter the url of your site" /> <label for="phone">Phone</label> <input tabindex="6" class="data" id="phone" name="phone" type="text" title="enter a phone number" /> <input tabindex="7" class="linkButton" id="submit" name="submit" type="submit" value="Send Data" /> </form> </section> <footer> <h3>Thanks for your time!!!!! </h3> </footer> </body>
3) Let's style the form. In the head section of the form we add
<link rel="stylesheet" href="styles/site.css" media="screen" />
The site.css inside the Styles folder code follows
html { margin: 0; padding: 0; } footer, header, hgroup, section { display: block; } body { line-height: 1; background-color:#eaeaea; font-family:Tahoma; } h1 { font-family:@Batang; font-size:2.3em; color:DeepSkyBlue; } hgroup { padding-bottom: 20px; padding-left: 145px; } hgroup h2 { font-size: 24px; color: #9B6145; } label { float: left; color: #ff5400; display: inline-block; width: 100px; height: auto; margin-bottom: 25px; margin-top: 15px; } input { float: left; width: 300px; padding: 25px; color: #4b4b4b; font-size: 16px; margin-bottom: 15px; margin-top: -10px; margin-right: 15px; } input[type="submit"] { border: none; float: left; clear: left; cursor: pointer; color: #fff; font-size: 19px; padding: 8px 32px 8px 32px; margin-left: 100px; width: auto; } input[type="submit"]:active { position: relative; top: 1px; } footer { float:left; clear:left; } footer h3 { font-size:1.3em; } #contactform label { clear:left; } .linkButton { color:#000; background-color: #CC0000; } .linkButton:hover { background-color: #808080; }
4) View your form in the browser. This is a typical form. We will have a name field,an email field, an age field,a date field, a site field, a phone field and a submit button.
Later on I will add a "range" field called Priority.
5) Now let's upgrade the form to HTML 5.Let's say that we want to require for every input field to have some data. We could do that with custom javascript code, or using the built in web server validation controls
I have provided some examples on how to use validation with all the ways mentioned above.You can find them here, here and here.
In HTML 5 the only thing I must do is to add the required attribute.
Have a look at the code below for the name field
<input tabindex="1" class="data" id="name" name="name" type="text" required />
Make sure you do that for all the input fields you require to have a value.
So without any Javascript I have validation out of the box.How cool is that. View your page with Firefox or Chrome and see the result for yourself.
Now we can add some watermark effect very easily to our page. I have provided in this blog another example on how to do that with JQuery. Have a look here if you want.
We can do that in HTML 5 without any Javascript code simply by adding the placeholder attribute to the input field.
<input tabindex="1" class="data" id="name" name="name" type="text" required placeholder="fill in your name" />
Make sure you do that for the rest of the input fields you think it is appropriate.
In the Age field we need to make sure that only positive numbers from 18-88 are allowed.
We can do that by changing the input type to number and setting the min and max values appropriately. (This will not work in Firefox)
<input tabindex="2" class="data" id="age" name="age"
title="enter your age" type="number" required min="18" max="88" value="18"/>
Another validation we want to perform is to have a valid email.We can do that by changing the input type to email.
The code looks like that
<input tabindex="3" class="data" id="email" name="email" type="email" required placeholder="info@domain.com" />
View it in the browser and see for yourself. Have a look at the Page Source. We have pure HTML that our users and search engines will love.
Another validation we want to perform is to have a valid date.We can do that by changing the input type to date.This will provide us with a datetime picker control.
This will not work in Firefox and Chrome. But works great on Opera.
The code looks like that
<input tabindex="4" class="data" id="date" name="date" type="date" required title="enter a date" />
View it in the browser and see for yourself. Have a look at the Page Source. We have pure HTML that our users and search engines will love.
Now we need to add some sort of validation for the Site field.I just change the type from text to url.
input tabindex="5" class="data" id="site" name="site" type="url" required placeholder="http://www.site.com"
title="enter the url of your site" />
Then we need to have some sort of validation for the telephone field , so the define a new type=tel attribute and a new pattern attribute
<input tabindex="6" class="data" id="phone" name="phone" type="tel" pattern="\(\d\d\d\) \d\d\d\-\d\d\d\d" required
placeholder="(###) ###-####" />
I have added another field with a new field Priority that is of type "range" , that give us a slider effect.
<label for="priority">Priority</label> <input tabindex="7" class="data" id="priority" name="priority"
title="from 0 to 5" type="range" min="0" max="5" value="2" />
If we need to set the focus on the first field, we just add the autofocus attribute.
<input tabindex="1" class="data" id="name" name="name" type="text" required placeholder="fill in your name" autofocus
title="enter your name" />
If we do not the browser to suggest values to enter in the field, then we can turn it off by using the autocomplete attribute to off.
I am showing that only for the first field.
<input tabindex="1" class="data" id="name" name="name" type="text" required placeholder="fill in your name" autofocus
title="enter your name" autocomplete="off" />
You could do that for all the fields you do not want the auto-complete feature on.
Well, I am going to post now the complete markup.
<body> <header> <h1>Fill in the form to win special prizes!!!</h1> </header> <section id="contactform"> <hgroup> <h2>Make sure everything is correct.</h2> </hgroup> <form id="mainform"> <label for="name">Name</label> <input tabindex="1" class="data" id="name" name="name" type="text" required placeholder="fill in your name" autofocus
title="enter your name" autocomplete="off" /> <label for="age">Age</label> <input tabindex="2" class="data" id="age" name="age" title="enter your age" type="number" required min="18" max="88" value="18"/> <label for="email">Email</label> <input tabindex="3" class="data" id="email" name="email" type="email" required placeholder="info@domain.com" title="enter an email"
autocomplete="off" /> <label for="date">Date</label> <input tabindex="4" class="data" id="date" name="date" type="date" required title="enter a date" /> <label for="site">Site</label> <input tabindex="5" class="data" id="site" name="site" type="url" required placeholder="http://www.site.com"
title="enter the url of your site" autocomplete="off" /> <label for="phone">Phone</label> <input tabindex="6" class="data" id="phone" name="phone" type="tel" pattern="\(\d\d\d\) \d\d\d\-\d\d\d\d" required
placeholder="(###) ###-####" title="enter a phone number" autocomplete="off" /> <label for="service">Priority</label> <input tabindex="7" class="data" id="priority" name="priority" title="from 0 to 5" type="range" min="0" max="5" value="2" /> <input tabindex="8" class="linkButton" id="submit" name="submit" type="submit" value="Send Data" /> </form> </section> <footer> <h3>Thanks for your time!!!!! </h3> </footer> </body>
Run the form in the browser.See all the amazing validation and watermark effects and functionality.No JavaScript is required to do all that.
All the features will work in Opera latest version and partially in Chrome and Firefox.I will add more posts on HTML 5 and later on CSS3 transitions.
Hope it helps!!!