HTML5 is the Blueprint of the Future. What's new in HTML 5?
HTML 5 focuses on usability and the user experience and with it come some significant upgrades to form elements. HTML 5 focuses on building applications. Forms are a large part of any application you might build and form behaviors previously controlled by Javascript have been formalized into the form elements themselves eliminating the need for external script controls.
HTML 5 specifies thirteen new input field types which will make form validation easier. In some cases, the type of information a text field is expecting will change. For example, features such as auto filling, could change how interface options are laid out.
One example of a new input field type is email. Note the subtle difference.
HTML4 Format: <input type="text" name="email" id="email" tabindex="10"> HTML5 Format: <input type="email" name="email" id="email" tabindex="10">
HTML5 will expect input in the form of an email address or you'll get an error message. Some of the new input types include: url, date, time, file, tel, month, number, week, and there are several more.
Autofocus sets the focus so the user does not have to click into the form to use it. When the page loads, the curser will be sitting in the form field set for focus, waiting for the user to fill in the information. Autofocus and autocomplete are two new attributes that can extend the functionality of certain form elements. Autofocus takes the Boolean values of true or false but setting it to true is not necessary. To turn it off, set the value to "false".
Placeholder data guides the user through the form requirements. All that is needed, is to place the suggested text in the form's text field. Using this input type is more engaging for users and ensures accurate data input by the user. Placeholder data is currently supported in Chrome, & Safari. At the time of this writing, it is not yet supported in Opera or Firefox.
HTML5 offers new tools to help validate form fields by being able to mark form fields as required. Required is a new attribute of the <input> tag. Like autofocus and autocomplete it takes the Boolean values of “true” or “false”. The required attribute offers more ease of control for scripting your own validation and offers fallback security for specific browsers or devices. Browser validation support is limited to Opera at this time (According to Lynda.com).
Numbered inputs allow greater control for submitting numeric data. This input uses the number and the range attribute. The number attribute can use the following values: min, max, step (Uses incremental values). In some browsers, a simple text box appears, some others include a stepper. The range attribute will display a slider bar in the browser. HTML5 includes new javascript methods for dealing with these new types of controls.
EX: <input type=”number” name=”yourchoice” id=”yourchoice” tabindex=”60” min=”1” value=”1”>
At this time, the specifications are extremely vague as to how devices and browsers should represent this data.
Date Picker Attributes:
Date: Displays a simple calendar in Gregorian calendar format.
Month: Displays a simple calendar with a month pulldown menu.
Week: Displays a simple calendar with a week pulldown menu.
Datetime: Displays a calendar with a time picker on top of it. (Choose a date and specific time.)
Datetime-local: Displays a calendar with a time picker on top of it with no time zone offset.
(Choose a date and specific time.)
Time: Displays no calendar whatsoever. It is simply the time picker itself.
This input type is currently supported in Opera. If date pickers are not supported in browsers, a fallback text field will appear.
