adobe stock iconDownload 10 Free Photos & Design Assets From Adobe Stock Download Now

Resources for Getting Started with HTML5 Forms

on CSS

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

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.

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

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

Related Tags