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.
- 50+ Free Responsive Web Layout HTML Templates
- CSS Snippets for Creating Responsive HTML Tables
- 8 CSS Snippets for Styling HTML Checkboxes & Radio Buttons
- 10 Free CSS Snippets for Creating Responsive Pricing Tables
- 10 Retro Video Games Recreated with HTML, JS & CSS
- 8 Tip-Top Toggle Switch CSS Snippets
- 12 Free Modal Window Libraries & Plugins For Your Site