The New and Improved Way to Create Forms with HTML5
Over 50,000 professional and freelance designers and developers. Post your design project once and review up to eight proposals. Save time, save money. Over 5000 projects delivered since 2006.
|
| ||||||||
| E-commerce Database Blog Social Paypal Registration Twitter | |||||||||
| Compare: | |||||||||
After 12 long years, the core language of the world wide web (HTML or Hyper Text Markup Language) is finally undergoing a major revision with the release of HTML5. Although the much anticipated version is still in beta, with no official launch date having been announced; HTML5 has web designers and programmers buzzing about its latest features.
According to the W3C, new HTML5 features are aimed at improving support for multimedia like video embedding, providing for a better user experience and an easier time for programmers. Although HTML4 has been a huge success, (some even argue the most successful markup format to ever have been released) everyone in the Internet world has been patiently waiting while browsers update with the latest major revision to the core language. As time wanes on, people are wondering, why the wait? The thing is, HTML5 is already well-supported in browsers like Safari, Chrome, FireFox, Opera, and mobile browsers. Even Internet Explorer 9 is set to support the new HTML5. The benefit of HTML5 is that it is backwards compatible – so, if your interested in updating your sites right now, you can. There are just a few browsers that are not fully compatible with HTML5 yet.
Upgrading to HTML5 is fairly easy because it works with HTML4. In fact there’s no reason to throw out HTML4 at all, because HTML 5 is simply a bunch of new cool features that were added to the HTML4 core language. Upgrading (if you want to call it that) to HTML5 is very simple. All you have to do is change your doctype to <!DOCTYPE html>. This new update helps keep things simple; while in HTML4 there were a range of different doc types that you could use, making it a little more tricky. You can go through right now and update all of your websites, they won’t break. All HTML4 tags are 100% supported by HTML5.
HTML5 defined over a dozen new input types and new features that you can use in your forms. The new additions to HTML5 are going to make developers lives much easier.
Place Holder Text
I think this is my favorite improvement in HTML5. All developers are used to using JavaScript and jQuery to do a placeholder text in an input field, but in HTML5 it makes it extremely easy for developers to display a placeholder. What’s a place holder? A place holder is when text appears in the input field and when you click on the input field it disappears. You can put hints of what the user is supposed to put in the field. As an example, if you have a phone number input box you can put (XXX) XXX-XXXX as the place holder and when they click, it will disappear. I’m sure you’ve seen this around.
|
IE |
FF |
Safari |
Chrome |
Opera |
iphone |
Android |
|
- |
3.7+ |
4+ |
4+ |
11+ |
4+ |
- |
AutoFocus Fields
The current way in HTML4 to do autofocus is using javascript to focus the first input field on a web form. As soon as a web page loads, the page will move the focus to the particular input field, just as the javascript does. What’s the difference? Since this is now in the HTML markup, users who have disabilities can easily disable this attribute within their browsers. Not all browsers support the autofocus feature, but the browsers that don’t will just simply ignore the attribute. If you want it to work in all browsers just add the new HTML5 autofocus attribute, then detect if the browser supports autofocus. If it does, don’t include the autofocus script, if it doesn’t then include the autofocus script.
|
IE |
FF |
Safari |
Chrome |
Opera |
iphone |
Android |
|
- |
4+ |
4+ |
3+ |
10+ |
- |
- |
HTML5 Defines 13 New Input Types.
Email Addresses
The first input field I will talk about is email addresses. Browsers that don’t support the new types will simply treat it as a text field. 99% of people won’t even notice the difference until they submit (this is when the form will validate). iPhone users will notice when they click in the email input box that an @ sign and a . will appear in a shorter easier keyboard. If you have an iPhone, you know what I’m talking about.
Web Addresses
The next input field we will look at is web addresses. If someone asks for a URL, they are expecting something such as http://www.blackrhinosolutions.com. So now input type URL again allows users that have an iPhone to have an altered virtual keyboard that will allow them to easily add periods, slashes, and .com to their string in their input box. Once again, most people will not even notice the difference until they click submit (when the form validates).
Number
Next topic is numbers. The most annoying of all the values to get is numbers. You have to do a lot of juery to make sure you validate this field. HTML5 adds type number. This includes a few extra attributes (all optional):
- Min: Specifies the minimum acceptable value for this particular input number field
- Max: You guessed it right, the maximum acceptable value for the number field
- Step: Starting at the min number it will than count by the number added in this attribute. The default is 1.
This will allow for only numbers (most again will not notice the difference until they try to click submit and they get an error because they typed in something other than what is allowed) and will only allow the numbers 0, 2, and 4.
Numbers as a Slider
I thought this was really cool. HTML 5 allows you to use a new type called range, which will turn the input field into a slider. This is cool for when you want to have slider controls in your web form. The mark up is the same as the number type, but just substitute type=”number” for type =”range”.
Date Pickers
By far the best addition is the date picker type called date and datetime (there are other additional date/time types such as time, week, month datetime-local as well). The javascript frameworks have worked this into their libraries such as jQuery UI, YIU, but it’s still annoying to just add a date picker. HTML5 defines a new native date picker control without having to include a script on the page. As of right now Opera is one of the only ones that fully supports this feature, but as the others you can do a fall back script if it’s not supported. Eventually all browsers will be up to date.
Search
HTML5 has added search as a type for input boxes. This is minor, but a cool change for some users. It simply puts rounded edges on the input box automatically and when you start to type it places a small X to the right. Not all browsers again support this.
Color
HTML5 also defined type color, which lets you pick a color and returns the hexademical value. Opera 11 is the only browser that supports this type. I don’t think most people use this type anyway, so I don’t think it’ll be a big deal.
Form Validation
Above we spoke about cool new input types like email, date, number, etc. One of the most exciting features of HTML5 is the addition of form validation. Most developers have either client side or server side script to validate a form (I do both!). As the HTML5 form validator may not be able to replace your server side validation, it sure can eventually replace your client side validation. The issue with javascript validation is that users can easily just disable javascript and get around it. Now with HTML5, you won’t have to worry about that. Below is an example from Chrome 12. All browsers and OS’s may render the error messages differently, but this is an example of what it may look like.
All errors are from HTML5, and no javascript was added.
|
IE |
FF |
Safari |
Chrome |
Opera |
Iphone |
Andriod |
|
- |
4+ |
5+ |
10+ |
9+ |
- |
- |
Required Fields
HTML5 form validation isn’t just limited to validating the types of fields. It also allows for a new additional markup called, required. This allows developers to verify that all the fields were filled in without having to use javascript.
Any developer knows that these updates are essential for development turnaround time and for enhanced user experience. Once all the browsers accept HTML5 the new updates to the mark up will make the new generation of websites exceed anyone’s expectations.
Well there you have it. A quick starting guide to the new updates you can find in HTML5. If you can take anything away from this article, remember that HTML5 is not something to be scared of. It’s something that will help developers and all your HTML 4 websites can be upgraded whenever you are ready!
Tue, 19 Jul 2011 04:12:46 GMT
Tags: forms, html5, Tips, web design,
Over 50,000 professional and freelance designers and developers. Post your design project once and review up to eight proposals. Save time, save money. Over 5000 projects delivered since 2006.
|
| ||||||||
| E-commerce Database Blog Social Paypal Registration Twitter | |||||||||
| Compare: | |||||||||
Related Tags: forms
20 Excellent Examples of Forms in Web Design
As we can find on Wikipedia, “Form refers to the shape, visual appearance, or configuration of an object.” And here I believe that this is also the perfect explanation… forms in web design are a way to gather information, but they must a
Related Tags: html5
30 Examples of Websites Using HTML5
HTML5 is certainly here to stay, from a numerous list of articles, events and buzz about this latest revision of the HTML standard. Some websites using HTML5 proudly show the official logo and state the sentence “support the future now”. So to
Related Tags: Tips
How to Design a Proper Banner – One That Actually Works
Let’s address the big pink elephant in the room first. Banners are not dead. They’re not on life support either. They’re doing fine and they’re going to be around for a while. They’re doing fine mostly because of their new ho
Legal Guidelines for Freelance Web Designers
Handling the legal side of freelancing could possibly be one of the more annoying tasks required for the job. Having worked as a full-time freelancer I can attest the amount of legal paperwork and information can become overwhelming, especially for newbie
HTML5 & CSS3: Take Your Design to Another Level
While both languages for HTML5 and CSS3 aren’t fully complete yet, taking the time time to familiarize yourself with some of the pointers in this post can really help you achieve that clean look and feel for your site. Let’s take a deeper look
Need Interactive Website Design? Check out our member profiles:
Stylish, tasteful, contemporary graphic designs for corporate, small business, and non-profit. Creating print and electronic media to communicate your value proposition. Brochures, advertising, logos,
Jersey City , New Jersey US
Seattle Innovative Design provides innovative professional design communication services. We specialize in interactive and print design projects for your business. Services include website development
seattle , Washington US
vinyl lettering, vehicle graphics for trucks, cars, big rigs, motorcycles. Sandblasted signs and custom graphics, graphic design. Web-site design: affordable, local. Flat Rock, NC.
Flat Rock , North Carolina US
Visual Reflections create custom sites to fit our clients needs and purposes. Your business becomes our business, we want your site to stand out and be noticed. We take our work seriously and want you
New Bern , North Carolina US
We specialize in website design, web graphics and search engine optimization for small to medium businesses. We create clean, clear sites using solid design principles, straight-forward navigation, cl
Katy , Texas US
GRAPHIC/WEB DESIGNER:Creative firm specializing in Web & Graphic Design and multimedia. Operating since 1996. We offer the design & layout capability of larger firms while maintaining personal client
Tampa , Florida US
Cheap, Custom, High quality web design services at a very low price and easy payments option. 100% satisfaction guarantee.
tacoma , Washington USOver 50,000 professional and freelance designers and developers. Post your design project once and review up to eight proposals. Save time, save money. Over 5000 projects delivered since 2006.
|
| ||||||||
| E-commerce Database Blog Social Paypal Registration Twitter | |||||||||
| Compare: | |||||||||
Get 8 Free Bids:
Service
Location:
Budget:
Deadline:
Compare:
Get 8 Free Bids:
Service
Location:
Budget:
Deadline:
Compare:
Sunlight may be free but this Solar Powered Cellphone sure ain’t cheap
Asmita Prasad: A cellphone conceptualized to run on solar power is really nothing new and we’ve seen
What is a 24/7 Creative? (part 1)
Creativity is actually more a part of the life you live than it is a part of the work you do. We are
Forget furniture items, now buy a prefab home from IKEA!
Jaspreet Kaur Walia: Have you ever felt like picking just all the cool yet affordable furniture and
An Environmentally Smart Home Made from Recycled Plastic Bottles
Sunny Goel: The ordinary Have you ever imagined what actually happen with a plastic bottle after it
NMDA's Kite City to change the urban landscape of Weifang
Write2me: Weifang, centrally located in Shandong in China, is a special city popularly known as th
Article Tags
Interactive Website Design Articles
Lifestyle
Inspiration
Designers
Concepts
gadgets
Freelancing
Freelancers Union
All Posts
Writers
web design
architecture
Featured
design
Marketing
Transportation
Tips
Premium
Illustrators
Freebies
Friends:
Ecommerce Web Design