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:
<input type=email>
<input type=url>
<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.
<input type=tel>
Allows browsers to optimize for telephone number input but doesn't constrain the value.
<input type=search>
Works exactly the same as text boxes.
<input type=text required> <input type=checkbox required > <textarea required>
Required elements can't be submitted without a value.
<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.
<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.
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.
<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.
<input type=file multiple> <input type=email multiple>
Lets the web developer allow multiple files or email addresses in a single input box.
<input type=text list="messages"> <datalist id=messages> <option>Happy Birthday</option> ...</datalist>
Provides suggestions similar to autocomplete.
input:valid {border:solid lime;} input:invalid {border:solid red;}
input:required:invalid {border:yellow solid;}
<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("");} }
<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); } }