Use HTML5 in Your BlackBerry Web Content!

How-to

I thought I’d share a few examples of some of the HTML5 input controls supported by the BlackBerry® Browser. As you know, HTML5 is the next evolution of the hyper text markup language (HTML) standard, and the BlackBerry Browser continues to grow in order to provide support for more of the HTML5 elements as they become finalized.

One of the elements that has been finalized is the new form controls. The below HTML5 controls are supported by the BlackBerry Browser in BlackBerry Device Software version 5.0. We will continue to add support for more HTML5 elements in future versions of the BlackBerry Browser.

Datalist

You can now define list item information as an independent data structure, called a datalist. This data structure can then be associated with one or more text input fields. When the user places focus on the text field, the items in the bound data list will be displayed as selectable-drop down items.

<div>
<b>Datalist example:</b><br/>
<input id="ddlModels" name="ddModels" list="lstModels"/>
<datalist>
          <option label="Pearl" value="8100">
          <option label="Bold" value="9000">
          <option label="Bold2" value="9700">
          <option label="Storm" value="9500">
          <option label="Storm2" value="9550">
</datalist>
</div>

Figure 1: HTML5 input element bound to a datalist element.

Input

The “type” attribute of an input field includes support for a wider range of supported input types, such as date, email, color and more.

Date – In my experience, formatting and validating dates in a web form can quickly become frustrating and complicated, mainly as a result of confusion over localized date formats. In order to simplify this, when an input element is defined as a date, the BlackBerry Browser will prompt the user with an easy to use date-selection control. The input field will accept values within a pre-defined min/max range.

<div>
<b>Date input example:</b> <br/>
Dates between 1900 - 1999: <input type="date" id="txtDate"  min="1900-01-01" max="1999-12-31" value=""/>
</div>

Figure 2: HTML5 date input control.

Email – Did you ever notice that when using the messaging application on BlackBerry® smartphones, you don’t have to type the “@” or “.” characters when you are typing an email address in the email address field? You simply press the space key, and the application adds the correct character, depending on the context of what has already been entered. This logic can now be applied to HTML input fields with a type of “email”.

<div>
<b>Email input example :</b> <br/>
Email address: <input type="email" id="txtEmail" value="" />
</div>

Figure 3: HTML5 email input control.

Color – By simply declaring your input control as type = “color” you immediately get an out-of-the box color selection control. The values submitted are the selected color’s hexadecimal RGB code.

<div>
<b>color picker example:</b> <b/>
Color: <input type="color" id="txtColor" value="#FF0000"/>
</div>

Figure 4: HTML5 color input control.

I hope you share in my excitement over these the new HTML 5 controls. What thrills me the most about them is just how easy they are to integrate and use in your BlackBerry web applications!

I look forward to hearing from you about the BlackBerry Browser’s support of these controls. Please let me know if you have any questions or general feedback.

About Adam S.

Adam is a Team Lead on the Developer Relations Team at BlackBerry. He manages technical relationships with ISVs as well as incubating the developing community ecosystem. Adam specializes in producing applications based on web and native technologies.

Join the conversation

Show comments Hide comments
+ -
blog comments powered by Disqus