HTML 5 is the latest specification of HTML. In the following article we will discuss some of the new interesting features introduced in HTML 5.
Certain tasks are common in the HTML forms like input validation and rich client interaction. Earlier for these tasks JavaScript and server side frameworks were used. For example if we need to display the input type as a date picker then we had to use the JavaScript in the past. jQuery provides widgets, yet significant plumbing still needs to be done to hook up the widget.
HTML 5 greatly simplified these common tasks. It provides new input type attributes that we just need to apply to the input element. For example to display the date picker in the HTML form we need to just put the following tag in the HTML form:
<input type="date"></input>
Other useful type attribute are:
- email indicates that the field is of type email.
- tel indicates that the field is of type telephone.
- search indicates that the field is used to search content.
- URL indicates that the field contains an URL.
- required indicates that the field is required and that the form cannot be submitted without filling in the field.
One useful thing is that if the browser doesn't recognize these types as in the case of old browsers then it will be recognized as the type="text". So we can be sure that these types will work in every browser.
Also HTML 5 introduces some new useful attributes that can be used on input fields for input validation and rich client functionality. Some of the important ones are:
Placeholder that represents a short hint intended to aid the user with data entry.
Pattern that expects a regular expression, that the browser uses to validate the field.
For certain scenarios, if you want to allow a user to submit a form without validation, there are two attributes:
Formnovalidate that is placed on input fields of type submit
Novalidate that is placed on an opening form tag.
Autofocus That is an interesting new attribute that lets you specify a single form field to automatically receive focus when a page loads. Only one field per page should hold this attribute; if multiple elements are marked up with autofocus.
Formaction specifies the URL of a file that will process the input control when the form is submitted. This overrides the action attribute of the form element.
Formenctype Specifies how the form-data should be encoded when submitting it to the server. This overrides the action attribute of the form element.
Autocomplete Specifies whether a form or input field should have autocomplete on or off. When autocomplete is on, the browser automatically completes the values based on values that the user has entered before.
Min & Max Specifies the minimum and maximum value for an input element. The min and max attributes works with the following input types: number, range, date, datetime, datetime-local, month, time and week.
HTML 5 support is provided in Visual Studio. To use it, ensure you have Visual Studio 2010 SP1. Modernizr is a JavaScript library that can help detect support for HTML5 features in the browser. So we can use it to detect the support for HTML 5 featues in the browser.
For example we can check for support of the date type using the following code.
if (!Modernizr.inputtypes.date) {
$("input[type=date]").datepicker();
}
One important thing to note is that the HTML5 specification doesn't dictate how browsers should present these new input types. So we can have the date type displayed differently in the various browsers.