BlueLemonCode.Com

Yet Another Tech Blog

Features of HTML5 - New input types

Introduction

HTML5 is 5th revision of HTML standards. Though it is still under development and not all browsers spport its all features, HTML5 promices to be great respite for web developers.

There are many new features that HTML5 draft specifies. However, their implementation is depend on browser creators. But it could be seen that all major browsers are increasing support for new HTML5 features with every new release.

I am sure that I cannot cover all the HTML features. however, in this HTML5 article series, I am going to highlight some of the features which appeals to me. This short article would focus on new input types introduced under HTML5.

Background

There are many new features included in HTML5 like new input types and attributes, canvas feature, change in HTML scripting syntax and of course well endorsed "Local storage" (Though, local storage is not part of standard HTML5 draft now) and many more.

If you are intrested about what draft says, then you should visit HTML5 standard draft here.

Article Body

 My focus in this article is exploring new input types introduced in HTML5 draft. We will look at each of them and their usage, supported browser etc.

*Note: I have tested below code in recent version of all major browsers (at the time of this writing). IE seems to have not implemented any of these features as of yet. However, IE10 (as per MSDN articles) promices to have supported them completely.

Input type - Number (supported in Opera, Chrome, Safari)

<input type="number" min="0" max="50" step="10" value="0" />

This input type can be used where your require number only field. Range validation is addtional feature of this type.

min and max values indicate the minimum and maximum values that would be allowed in the field and value attribute indicates the default value while step attribute governs the interval by which values can incremented or decremented for this field using up and down arrows (see image). If user enteres the value which is non numerical or beyong min-max range then validation message is displayed on the field when trying to submit the form.

 

Input type - Range (supported in Opera, Chrome, Safari)

<input type="range" min="0" max="50" step="5" value="25" />

 

This input type can be used where your require user to select the value from range of values. For example survey rating where rather than allowing user to type score, range type provides more friendly approch and option to select the range from possible values only.

min and max values indicate the minimum and maximum values that would be allowed in the field and value attribute indicates the default value while step attribute governs the interval by which values can incremented or decremented (see image).

 

Input type - Date (supported in Opera, Chrome, Safari) 

<input type="date" name="DateField"/>

 

This input type saves web developers from hassle of including some javascript code/library to display simple calender on date field. This feature was trully essential to be included. Although Opera displays it as calender, Chrome and safari chose to display it as selection field (see image).

Simillar to date as input type, there are diffrent input types related to date and time. These are as below. You may want to try each of them

  • month
  • week
  • datetime
  • time

 

Input type - Color (supported in Opera)

<input type="color" name="ColorField"/>

 

Sometime we want to let user select the color on web page. This requires complex Javascript plugin to be added in your code and still effect does not reach to window client application. In HTML5 standard, the color choser is supported from within browser. Only Opera provides support from visual color selection.

 

Input type - Email (supported in Opera, Chrome, Safari, Firefox)

<input type="email" name="EmailField" />

 

In almost all data entry forms, we require to use email field and also add validation to verify user has enter proper email address. A simple regular expression validation works for this scenario. But we really use it so often that, it is worth adding this as a browser functionality rather than developer need to add extra bit of code every time.

If entered email address is not valid then on form submission, validation message is displayed on the field (Just like regular expression validadtor works with calloutextender). This works almost simillar in all browsers where email input type is supported (apart from look and feel).

 

Input type - URL (supported in Opera, Chrome, Safari, Firefox)

<input type="url" name="urlField" />

 

This input type verifys entered value is valida url is or not. The validation happens on form submission.

In case of Opera, when focus moves away from field and entered value is not valida url then Opera appends "http://" at start of string to make it valid url. All other supported browsers simply displays validation upon form submission.

 

Apart fom these new input types, there are few attributes introduced in HTML5 which can be very handy in many scenarios

Attribute - required (supported in Opera, Chrome, Safari, Firefox)

<input type="text" required name="RequiredField" />

I think, this is highest used validation type in any web form. "required" is not input type. In fact, you just need to add keyword "required" in any text type field to make it required field. If there is required field in the form which is empty and form is submitted then browser will display validation onto that field.

 

Attribute - placeholder (supported in Opera, Chrome, Safari, Firefox)

<input type="text" placeholder="Enter text here" name="PlaceholderField" />

 

As it is clear from above image, placeholder displays watermarked text in text field. Once clicked in the field, the placeholder field goes off and if text field is empty when focus is moved away from text field then placeholder text is displayed again.

This is the simillar effect for which Ajax watermark extender was used in "old" days (or JQuery plugin etc.). A clean browser supported approch removes need of using any of those methods.

If you are running on IE then you would be disappointed to see that most of these input types yet not work there. We can expect it to work in future versions of IE. The goog thing is If these new input type is not supported in your browser, then it would be displayed as simple text type field.

There are loads of new features presented in HTML5. I would try to explain about canvas element and its features in next article.

Conclusion

As the support for HTML5 feature is not complete and even HTML5 is still under development, at this stage it is better to use any of the HTML5 feature with caution. Like, if you are using new input types for form validation then it is require that you also provide functionality of custom validation so that your page does not break on browsers where HTML5 support is not available.

As usual, comments welcome :)