10 Resources for Getting Started with HTML5 Forms


This article explores some of the new HTML5 form features and how it has significantly improved text inputs, search boxes, and other form fields by providing better and cleaner controls for validating data allowing you to build complicated forms with far less code.

This article features some of the most useful HTML5 and CSS3 form references, resources, and tutorials that will improve your understanding and knowledge of HTML5 forms and make your development life much easier.

HTML5 & CSS3 Form References & Resources

New Form Features in HTML5

Here is a Dev. Opera article that gives a brief overview of some of the new form controls and functionalities that have been introduced in HTML5.

It covers new form controls, attributes, output mechanisms, validation, and cross-browser support. It also covers styling an HTML5 form with some of the new CSS3 properties.

The Current State of HTML5 Forms

This Wufoo Forms resource is a quick reference guide for web developers that details today’s browser support for HTML5 form technologies.

It covers types, attributes, and elements and offers the option to learn more about each in a clear and easy-to-understand way.

Forward Thinking Form Validation

Here is an article on A List Apart about using HTML5 and CSS3 to create a CSS-based form validator with good browser support.

It covers HTML5’s forms, new input types, and attributes that make validation constraints possible. It covers CSS3’s basic UI module that provides some pseudo-classes to help style validation states – and change a form field’s appearance based on a user’s actions.

HTML5 & CSS3 Form Tutorials & Walkthroughs

How to Build Cross-Browser HTML5 Forms

A NetTuts+ tutorial on how to build a cross-browser HTML5 form. This medium-to-difficult-level tutorial shows you how to create a slick and highly-usable form with a slider, numeric spinner, date and color pickers, text fields, and a submit button.

The following tools are used: Webforms2, Modernizr, and makes use of jQuery for their fantastic functionality.

Build a Neat HTML5 Powered Contact Form

A NetTuts+ tutorial on how to build a sleek HTML5-powered contact form.

This tutorial starts with the HTML5 Boilerplate, and then it shows you how to create a clean and stylish contact form with the standard fields: name, email, telephone, inquiry drop-down, message, and submit. Besides HTML5, the following tools are also used: jQuery, Modernizer, AJAX, and PHP.

Have a Field Day with HTML5 Forms

A 24 Ways tutorial that shows you how to style a beautiful HTML5 form using some advanced CSS and the latest CSS3 techniques.

It covers meaningful markup, setting up a good foundation, making the form look nice, styling the lists, and building the form controls. The sample form is a shopping cart, where users would fill in their details, delivery address, and credit card details.

Create a Stylish Contact Form with HTML5 and CSS3

A Line25 tutorial that shows you how to create a stylish contact form completely out of HTML5 and CSS3. The tutorial goes over, step by step, how to use a couple of the handy new features in HTML5 to add cool functionality to the form.

And it shows how to use the excellent CSS3 properties to style the form as if it was designed in Photoshop without needing to use any images.

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

This tutorial will show you how to create a stylish and clean contact form using HTML5, CSS3, and PHP.

Specifically, it focuses on the new HTML5 features already supported by all major browsers and employs graceful degradation for those that don’t.

The step-by-step tutorial goes over the form design, the HTML5 markup, the CSS, and creating the functionality with PHP.

HTML5 and CSS3 Envelope Contact Form

This tutorial will show you how to create a cool-looking envelope-style contact form in HTML5 and CSS3 – no images are used.

The tutorial goes over the HTML structure of the form, the HTML5 features (placeholder attribute), and the CSS3 properties used to create its envelope appearance. Sample code is provided in each step.

How to Create a Cool and Usable CSS3 Search Box

Create a cool and usable CSS3 search box using the HTML5 placeholder attribute with this tutorial.

A fallback is created for browsers that don’t support that HTML5 attribute using Modernizr’s feature detection. Sample code is provided in each step.

Progressively Enhancing HTML5 Forms

A CSS-Tricks tutorial on how to progressively enhance your HTML5 forms. This tutorial teaches you how to create fallbacks for HTML5 features that certain browsers might not support.

Instead of not displaying your form as intended, a Javascript alternative will show in its place.

Related Topics

This page may contain affiliate links. At no extra cost to you, we may earn a commission from any purchase via the links on our site. You can read our Disclosure Policy at any time.