Microsoft 70-480: Validate user input by using HTML5 elements

Exam Objectives

Choose the appropriate controls based on requirements; implement HTML input types and content attributes (for example, required) to collect user input

Quick Overview of Training Materials

Programming in HTML5 with JavaScript and CSS3 - Training Guide - Chapter 7

Developing in HTML5 with JavaScript and CSS3 Jump Start - Module 1 (part 1)
HTML5 specification from w3.org - Specifically Section 4.10 Forms
Dive Into HTML5 - A form of madness
Microsoft.com - Exam 70-480 - suggested link: pattern attribute | pattern property
MSDN - Better web forms with HTML5 Forms

HTML Form basics

The structure of HTML forms hasn't changed in HTML5, it's just a matter of new controls having been added.  Any HTML form lives within <form></form> tags, and generally includes some kind of submit action.  This will usually involve a POST to the web server, which then does something with the form data (validation, uploading to database, etc.). Before we can really dive into the new form controls introduced in HTML5, I think its important to know what was already available.  The HTML 4.1 spec includes the following form controls:

• <input> - Some kind of input. The type of input is set using the type attribute, which determines which control (spec) the input will act like. Type can equal:
• text - single line of text
• password  - a password. Similar to "text" but the value in the input box is masked
• checkbox  - creates a checkbox control, which is essentially an "on/off" control
• radio  - like checkboxes, except that several are linked by a common "name" attribute and only one value may be specified
• reset - a button control that resets all values on the form to their initial values
• file - allows user to select a file, the contents of which will be submitted with form
• hidden - this control holds a value but is not rendered on screen. Generally used to store state information.
• image - a "Submit" control with an image instead of a button
• button - a push button. No default behavior. unlike the <button> element, text inside this control is defined using the value attribute.
• submit - a button that, when pressed, submits the form using the method and action defined with the same attributes on the <form> element.
• <button> - a push button. My demos have used a lot of these with declarative event handler definitions (that is, setting onclick="<JS code here>"). Unlike the <input> button, the <button> element requires a closing tag. The type attribute can be set to "submit", "reset", or "button", which will cause this button to behave like the respective <input> control types.
• <select>, <optgroup>, and <option> - These three elements together are used to creaet drop-down controls.  The top control is <select>. Within the select selement we can define options with the <option> tag, and we can group these options using the <optgroup> tag. Using a label attribute on the optgroup element lets us describe the options in that group. Grouped and ungrouped options can be used in the same select, it just effects how they are displayed within the drop down.
• <textarea> - multiline text input. Initial size (and effectively minimum size...) defnied by rows and cols attributes, through it is resizable by default. Can be made non-resizable by setting CSS style resize: none (cite), or you can use max- and min- height/width to contrain size.
• <label> - used to specify a label on elements that do not implicitly have one. 
• <fieldset> and <legend> - use these two elements to group form controls. The Fieldset element groups the elements together, and the legend element adds a label.

HTML5 Form enhancements

The HTML5 Forms spec defines a number of new controls, mostly new <input> types. The Dive Into HTML5 chapter focuses on these new ones. It should be noted that in browsers that don't support these new input types, they will revert to type "text", so they degrade gracefully:

• search - subtle changes to the text box to make it more condusive as a search field. In Chrome, an "x" appears on the far right of the text box that clears the contents.
• tel - used in enter a telephone number.  Does not have built in validation, instead you would have to use the pattern attribute with a regex pattern appropriate for the types of phone numbers you want to collect.
• url - the web address including protocol (so http://www.google.com/, not just google.com). Validates automatically.  Some mobile devices will display email optimized on screen keyboards for this type.
• email - the spec describes the validation of emails as a willful violation of the spec defining email addresses because it is both to strict and too vague. What validation really looks for here is the presense of an @ symbol. Some mobile devices will display email optimized on screen keyboards for this type.
• Date and Time:
• datetime - [mm/dd/yyyy --:-- -- ] global date time according to the Gregorian calendar expressed relative to GMT
• datetime-local - [mm/dd/yyyy --:-- -- ] same as datetime but local...
• date - [mm/dd/yyyy ] - date according to Gregorian calendar
• month - [month, year] - month according to Gregorian calendar
• week - [week number, year] - numeric week of a given year
• time - [--:-- --] - a valid time in the form hours:minutes am/pm
• number - validates that the contents is a number. Can be given min and max attributes to define a range, and defining value sets an initial value.
• range - basically the same as number, but will display as a slider bar on supported browsers (which results in the actual number value not being displayed.
• color - brings up a color picker. Value is the CSS hex value (#FFFFFF is white, #000000 is black, basically #RRGGBB in rgb terms)

A number of new attributes for controls are also included in HTML5, including:

• autocomplete - allows browsers to predict values for fields
• autofocus - automatically places cursor in a given input
• step - defines the increments for "range" and "number"
• placeholder - inserts background placeholder text in a textbox.
• pattern - defines a regex pattern for validation. For example, a naive pattern for phones might look like pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
• novalidate - validation is ignored. So if you wanted emails to display the email optimized onscreen keyboard but you didn't want it to actually try to validate, you could use the novalidate attribute on the field.
• required - you are not allowed to submit the form until this form is validly completed

This JSFiddle demo shows off some form controls. Note that pressing "Submit" does nothing  because there is nothing on the server side to handle the POST message, so the buttons were all left outside the <form> element (otherwise they would blow it all up):