- Adding decent validation to a form — not to mention creating custom widgets for things like dates and number ranges — is both fiddly and time-consuming.
In this tutorial I'm going to walk you through the process of creating a nice, self-validating, widget-rich, HTML5 Web form. It's an online order form for an imaginary software company.
Step 1. Create the basic markup
First we'll create the basic skeleton markup for the page and form:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<form id="orderForm" action="" method="get">
<h1>Software Order Form</h1>
<input type="submit" name="placeOrder" value="Place Your Order" />
No big surprises here — this is fairly standard stuff. We're using the HTML5
title elements, specifying the
utf-8 (Unicode) character set, adding a page title, and creating the basic form.
The form itself consists of an
h1 heading, and 3
fieldset elements for the 3 sections of the form. Each
fieldset has a
legend, and an empty
ul (unordered list) element. We'll place our fields inside these lists. The form ends with a
submit button so that the user can send the form.
Step 2. Add the "Email address" field
The first field we'll add to the form is the "Email address" field. This goes inside the unordered list in the "License details" fieldset.
<label for="emailAddress">Email address</label>
<input type="email" name="emailAddress" id="emailAddress" placeholder="email@example.com" required="required" autofocus="autofocus" maxlength="50" />