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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
HTML 
