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 make your understanding and knowledge of HTML5 forms all the better and make your development life much easier.
HTML5 and CSS3 Form References & Resources
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.
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.
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.
Here is an article on A List Apart about using HTML5 and CSS3 to create a CSS-based form validator that has good 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.
HTML5 and CSS3 Form Tutorials & Walkthroughs
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.
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.
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.
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.
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 cool CSS3 properties to style the form as if it was designed in Photoshop but without needing to use any images.
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.
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.
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.
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.
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.
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.
- 10 Code Snippets for Creating Beautiful Forms
- 10 Open-Source Login Page Templates Built With HTML & CSS
- 9 Custom Open Source File Upload Field Snippets
- 10 Retro Video Games Recreated with HTML5, JS & CSS