HTML5 and CSS3 Form References, Resources and Tutorials

This article explores some of the new HTML5 form features and how it has greatly 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 and even less bemusement.

Accompany all of this with some fantastic CSS3 properties and you are able to create stylish and highly-usable forms that go way beyond anything plain ol’ HTML and CSS2 could ever muster.

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

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 goes over new form controls, new attributes, new output mechanisms, validation, and cross-browser support. It also covers styling an HTML5 form with some of the new CSS3 properties.
New Form Features in HTML5 →

HTML5 Forms Will Change Your Life

This is a fantastic overview of all of the fantastic HTML5 form features, covering the overall advantages and disadvantages of these new specifications. It carefully covers every new property with demos and examples.
HTML5 Forms Will Change Your Life →

Diving Into HTML5: A Form of Madness

A Form of Madness is a chapter on HTML5 forms from Mark Pilgrim’s ultra-stylish web book Diving Into HTML5. It covers placeholder text, autofocus fields, email addresses, web addresses, numbers as spinboxes, numbers as sliders, date pickers, search boxes, color pickers, form validation, required fields. The end of the chapter also offers further reading, like any good book should.
Diving Into HTML5: A Form of Madness →

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.
The Current State of HTML5 Forms →

Forward Thinking Form Validation

Here is an article on A List Apart about using HTML5 and CSS3 to create a CSS-based form validator that has fairly broad browser support. It covers HTML5’s forms and its new input types and attributes that make validation constraints possible, and 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.
Forward Thinking Form Validation →

Fun with HTML5 Forms


A tutorial on Think Vitamin that shows how to use HTML5 to create a fun, stylish, and highly-usable email sign-up form. It holds your hand and walks you step-by-step in creating placeholder text, required form fields, email + web + phone fields, a date picker, a datalist, and numbers. It also goes over styling the form to look great. Like with many HTML5 forms, most of these HTML5 form enhancements will gracefully degrade to standard input boxes if viewed in a older browser that doesn’t support all HTML5 features. However, it does show you how to work around and properly display the enhancements that don’t play well with certain browsers – thus, avoiding a usability fail.
View the Tutorial →Demo →

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 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 its fantastic functionality.
View the Tutorial →Demo →

Build a Neat HTML5 Powered Contact Form


A NetsTuts+ tutorial on how to build a sleek HTML5-powered contact form. This medium-difficulty-level 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, enquiry drop-down, message, and submit. Besides HTML5, the following tools are also used: jQuery, Modernizer, AJAX, and PHP.
View the Tutorial →

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 goes over 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 one, where a user would fill their details, delivery address, and credit card details.
View the Tutorial →Demo →

Fancy Forms: HTML5 + CSS3 – JS


A simple HTML5 form demo by Richard Bradshaw that shows how to use a few new features: new input types (email, URL, number, and range), new pseudo classes (:valid, :invalid:, :required), and a restriction that doesn’t allow a user submit the form until all fields are counted as valid by the browser. The HTML5 form also adds CSS3 transitions, transformations, and the :not pseudo class to make it look pretty and clean.
View the Tutorial →Demo →

Create a Stylish Contact Form with HTML5 and CSS3


A Line25 tutorial that shows you how to create your own simple 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 cool CSS3 properties to style the form as if it was designed in Photoshop but without needing to use any images.
View the Tutorial →Demo →

Designing Search Boxes with HTML5 and CSS3


A tutorial by Saddam Azad on how to design a stylish search box with HTML5 and CSS3. Three different examples are used, and the source code is given for each. Each of the three search box styles are different, so you can pick which one you like most or that fits your website best. The tutorial shows which techniques are used for each example and gives you the markup and CSS code. It lists any points you should be aware of too.
View the Tutorial →

Create a Clean and Stylish Login Form With HTML5 and CSS3


This tutorial will show you how to create a clean and stylish login form with HTML5 and CSS3. It covers building the actual form, the form HTML5 attributes, and styling the form. Screenshots showing the code snippets also have hand-written-outline-style annotations, so you can easily see what parts of the code do what.
View the Tutorial →Demo →

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


With this tutorial you will be shown how to create a stylish and clean contact form using HTML5, CSS3, and PHP. Specifically, it focuses on the new HTML5 features that are already supported by all major browsers and employ 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.
View the Tutorial →Demo →

HTML5 and CSS3 Envelope Contact Form


This tutorial will show you how to create a cool-looking envelope-style contact form 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.
View the Tutorial →Demo →

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. For browsers that don’t support that HTML5 attribute, a fallback is created using Modernizr’s feature detection. Sample code is provided in each step.
View the Tutorial →Demo →

Progressively Enhancing HTML5 Forms


A CSS-Tricks tutorial on how to progressively enhance your HTML5 forms. Meaning, this tutorial teaches you how to create fall backs for HTML5 features that certain browsers might not support. Instead of not displaying your form the way you intended it to, a Javascript alternative will show in its place. The two features tools are Yepnope.js and Modernizr.
View the Tutorial →

HTML5 and CSS3 Form Toolbox: What’s Missing?

Over to you: what’s missing from this HTML5 and CSS3 form toolbox? What other references, resources, and/or tutorials do you think are essential? Feel free to share your favorites in the comments section below.

Author: (582 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments