Home arrow HTML arrow Best HTML5 Form Tutorials

Best HTML5 Form Tutorials

Itís rare to have a website that does not require the use of forms in one way or another. Whether itís for logins, signups, searches, or contacting the site's owner, forms are a necessary evil. If youíve been meaning to learn more about HTML5 forms, here is a list of some of the best tutorials out there to help you get started.

Author Info:
By: wubayou
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
July 27, 2011

print this article

Itís rare to have a website that does not require the use of forms in one way or another. Whether itís for logins, signups, searches, or contacting the site's owner, forms are a necessary evil. If youíve been meaning to learn more about HTML5 forms, here is a list of some of the best tutorials out there to help you get started.

Designing Modern Web Forms with HTML5 and CSS3

This tutorial teaches you how to create a modern web form that could fit in easily with any type of website.  Before you get into the tutorial, the author states in the comments section that the tutorial covers just the markup, design, and infield labels.  In other words, you will need server-side code via PHP or another language to actually put the form into action.

With that out of the way, the strength of the tutorial is in the way that it teaches various little nuances that you can add to your forms.  The code is designed for advanced browsers first, but it will degrade gracefully in others as well.  CSS3 is used to style the form, and it includes such properties as gradients, rounded corners, text-shadow, and box-shadow.  Thereís even a section on how to add small icons to each field for easier reference.

Link: http://legendthemes.com/2010/04/10/designing-modern-web-forms-with-html-5-and-css3/

Create a Clean and Stylish Login Form with HTML5 and CSS3
Another form thatís a must in terms of website functionality is a login form.  If you require your visitors to register to view content on your site, you want your contact form to work properly and look good at the same time.  This tutorial will show you ho to create such a form using HTML5 and CSS3.  The HTML5 autofocus and required attributes are used for added functionality, and the CSS3 properties of rounded corners and inner shadow are used to give the login form a modern look.

Link: http://designwoop.com/2011/04/create-a-clean-and-stylish-login-form-with-html5-and-css3/

Build a Neat HTML5 Powered Contact Form

This tutorial is listed as being on the beginner to intermediate level of difficulty, and itís estimated that it should take about an hour to complete.  Itís very lengthy and detailed, so be prepared to learn a lot.  The tutorial shows all the necessary steps to create a HTML5 AJAX powered contact form.  The form uses various new HTML5 input elements and attributes, such as custom data, placeholder, and autofocus.  CSS styling is added to make the form easy on the eyes.  To help with compatibility issues, jQuery and Modernizr participate in the action as well.  To validate the input, PHP is used on the server side.

Link: http://net.tutsplus.com/tutorials/html-css-techniques/build-a-neat-html5-powered-contact-form/

Designing Search Boxes with HTML5 and CSS3

Thereís no shortage of tutorials on creating contact forms, but what about search forms?  A solid search function is essential to any website, and this tutorial will show you the steps necessary to creating a search form to help your visitors find what they are looking for.

The tutorial is worth your time because it gives you three different examples on how to create search boxes.  Each example uses HTML5 and CSS3, plus a little bit of JavaScript.  The first example is on a beginnerís level, and the other two ramp up the difficulty.  The tutorial is very easy to follow and will teach you how to work with rounded corners, gradients, shadows, the placeholder attribute, and more.  To avoid any compatibility problems, the techniques employed degrade gracefully in older browsers.

Link: http://azadcreative.com/2010/11/designing-search-boxes-html5-css3/

How to Create a Contact Form Using HTML5, CSS3, and PHP

If you are looking for an in-depth tutorial on how to create a HTML5 form, you canít go wrong here.  So that you wonít waste your time, the tutorial focuses on new HTML5 features that are supported by major browsers.  Even in the case that they are not supported, they will at least degrade gracefully so that your visitors wonít be presented with an unsightly mess.

The form is rather basic, offering fields for name, email, and message.  It does have some nice CSS3 effects like rounded corners, an input focus state, and a textarea background image blended in, however, to give it a modern look.  To add some protection against spammers, thereís an extra field that asks visitors to answer a simple question prior to submitting their data.

Link: http://www.tangledindesign.com/blog/how-to-create-a-contact-form-using-html5-css3-and-php/

Fancy Forms

Hereís a well-rounded tutorial that shows you how to create HTML5 forms with a bit of flair.  At its core, the form you create in this tutorial is pretty simple, and the code is not overly complex, either.  The form not only has the functionality that could fit well into any website, but it also has some added effects to spruce up its appearance.  After all, nobody said a contact form had to be dull.

The form employs input types such as email, number, range, and url, as well as the :valid, :invalid, and :required pseudo classes.  To prevent incomplete submissions, the form is designed to not allow you to submit until all the fields are entered.  Some CSS3 touches are added as well, such as transitions, transformations, and the :not pseudo class. 

Link: http://www.bradshawenterprises.com/blog/2010/fancy-forms-html5-css3-js/

Designing a Contact Form in CSS3 and HTML5

Hereís a quick and easy tutorial that will show you how to design a contact form using HTML5 and CSS3 in no time at all.  The tutorial is valuable because it touches on various techniques but does so in a concise manner.  In other words, if you donít have a lot of time on your hands but want to get your feet wet with making a HTML5 form, this tutorial is for you.  Several CSS3 properties are used, including rounded corners, box-shadow, and text-shadow.  The autofocus attribute placeHolder attributes are also discussed, as is a way to prevent autocompletion while entering data into the formís fields.

Link: http://www.sendesignz.com/index.php/css/104-designing-contact-form-in-css3-and-html5

HTML5ís New ďformĒ Attribute

While the majority of the tutorials in this list discuss how to create specific types of forms, this one strays from the crowd a bit.  The tutorial focuses on HTML5ís form attribute.  A common obstacle to many developers when creating forms is the difficulty that comes with separating form controls from their parent <form> control elements.  Thanks to the new HTML5 form attribute, you now have the ability to associate any orphaned form control with any <form> element on the page.  No longer will you have to rely on JavaScript tricks and the like to get data submitted properly.

Since the tutorial really focuses on just one aspect of the form creation process, it is rather short.  The material, however, is worth its weight in gold and you can add what you learn to your HTML5 knowledge bank.

Link: http://www.impressivewebs.com/html5-form-attribute/

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

All HTML Tutorials
More By wubayou

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials