HTML5 Forms

IE10 includes support for HTML5 Forms. HTML5 Forms offers two major advantages over previous versions: new input types and built in validation. The form below is an example cake order form that utilizes validation and new input types.

Here are some interesting scenarios you may wish to try:

After submitting try filling in different fields and see what happens.

Contoso Bakery Cake Order Form

cake with a slice removed
Contact Person






Cake Options (available in increments of 10)
1 - 3 layers


(some suggestions are provided.)

Under the Hood

New input types

Email

<input type=email>

URL

<input type=url>

Number

<input type=number>

The value entered must be a valid floating point number. If you enter a value which is not a number, it will be cleared from the input box after focus moves away.

Telephone

<input type=tel>

Allows browsers to optimize for telephone number input but doesn't constrain the value.

Search

<input type=search>

Works exactly the same as text boxes.

New Attributes

Required

<input type=text required> <input type=checkbox required > <textarea required>

Required elements can't be submitted without a value.

Placeholder




<input type=text placeholder="John Doe">

Placeholder text is visible until focus is placed in the element. It can be styled with pseudoclass :-ms-input-placeholder.

Pattern

<input type=text pattern="abcd" title="enter 'abcd'">

The pattern attribute is a regular expression that the value must match. In the example above entering 'abcd' works but any other value will be rejected.

Autofocus

The autofocus attribute lets web developers specify where they want focus to go after the page loads. For example, if you go to bing.com, you want focus to go to the search box on the page so that you can just immediately start typing.

See autofocus in action

Min, Max and Step

<input type=number min=0 max=10 step=2> <input type=number min=0 max=10 step=0.5>

Defines the minimum, maximum and step values for number input elements. The step attribute defines the jump between values that are allowed. For example, if min=0 and step=1 then 0,1,2,3... will be allowed. If min=1.1 and step=1, then 1.1, 2.1, 3.1, ... will be allowed.

Multiple


<input type=file multiple> <input type=email multiple>

Lets the web developer allow multiple files or email addresses in a single input box.

List

<input type=text list="messages"> <datalist id=messages> <option>Happy Birthday</option> ...</datalist>

Provides suggestions similar to autocomplete.

New PseudoClasses

:valid/:invalid




input:valid {border:solid lime;} input:invalid {border:solid red;}

:required/:optional



input:required:invalid {border:yellow solid;}

New DOM Properties and Events

Using a custom Error Message

<input type="number" min="0" max="100" name="num" onchange="checkValue(this)">

function checkValue(elt) { if (elt.validity.rangeOverflow) {elt.setCustomValidity("Please call the bakery directly for orders over 100 people");} else { elt.setCustomValidity("");} }

Creating a custom error Experience

You must enter a valid email address!
You must enter the telephone numer in the form "(xxx) xxx-xxxx"

<input type="email" onchange="checkValue2(this, document.getElementById('errorMessage'))" oninvalid="return false"> <span id="errorMessage">You must enter a valid email address!</span> <input type="submit" onclick="displayErrorExperience(this.form)" > function checkValue2(elt, msg) { if (!elt.checkValidity()) { msg.style.visibility = 'visible'; } else { msg.style.visibility = 'hidden'; } } function displayErrorExperience(form) { var formValidity = true; for (var i=0; i<form.elements.length; i++) { if (!form.elements[i].checkValidity()) { formValidity = false;} } if (!formValidity) { var message = "There was an error trying to submit this form:"; for (var i=0; i<form.elements.length; i++) { if (!form.elements[i].checkValidity()) { switch (form.elements[i].type) { case 'email': message += "\n Email field must contain a vaid email address"; break; case 'tel': message += "\n Telephone filed must contain a phone number in the form (xxx) xxx-xxxx"; break; } } } window.alert(message); } }