Use HTML5 in Your BlackBerry Web Content!


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.


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.

<b>Datalist example:</b><br/>
<input id="ddlModels" name="ddModels" list="lstModels"/>
          <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">

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


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.

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

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”.

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

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.

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

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
+ -
  • Rcmaniac25

    Is the color control going to be avalible for Java development or is it simply an intergrated popup for the web browser?

    I have a use for popup and if it's already built in I don't want to create my own.

  • RIM Shows Us How To Use HTML5 for the BlackBerry Browser | »

    […] you are a developer for mobile websites you may want to take a look at the list and tips RIM has compiled at this link. Hopefully more are coming! Please Share With A […]

  • RIM : Cómo utilizar HTML5 en el BlackBerry Browser « CluBlackBerry ::. Noticias, Aplicaciones, Temas, Wallpapers, Sistemas Operativos, Ayudas y Mas Relacionadas con BlackBerry en Venezuela, America y Europa.::

    […] Si usted es un desarrollador de sitios web para móviles es posible que desee echar un vistazo a la lista y consejos RIM ha recopilado en este enlace AQUI […]

  • bruce

    I'm not a blackberry owner, so I'll ask here – is the input type=date pop-up the same UI/ look and feel as the native blackberry calendar app? Are they integrated?

  • astanley

    Hi folks, thanks for you comments!

    Rcmaniac25 – there are some Java UI controls that let you leverage this built-in functionality in your Java applications. There are two classes named Datefield and Datepicker that will let you make use of the date selection input fields. However as far as I know there is no built-in color selection input control for Java applications.

    bruce – The date input control used to implement the input type=data input field, is the same Java component that is also used within the native BlackBerry calendar app. However they are not integrated.


  • la5rocks

    I'm thrilled at how much progress the Blackberry browser is taking! With the growing support of these input types, the iPhone's Safari is starting to look like IE . . .

    A couple questions, however. I've tried setting the value of a date input, and the date format seems to be picky? Is the YYYY-MM-DD format required by HTML5? My attempts keep ending up with a default value of Dec 31, 1969, which ends up with a lot of scrolling!

    Check your example on the data list. You've duplicated the name attribute, and left out the id attribute in the list, I think.

  • astanley


    thanks for your comment. The type=date input field has two useful properties min/max that lets you define a range of values that are acceptable for your input field. This can help to make it easier for your users to choose the value they wish. Here's an example:

    <input type=”date” id=”txtDate” min=”1900-01-01″ max=”1999-12-31″ value=””/>

    Thanks for pointing out the typo in my sample code. You are correct, the first “name” property is supposed to be “id”. I'll send a request to the Blog manager to have this fixed.


  • Iain

    Ok this is exactly what i wanted to see however can anyone tell me how i can force the input controls to have a value that is retruned from a database?

  • Srini Vasan

    Is there support yet for the video tag in HTML5

  • astanley

    Hi Srini,

    Current in-market BlackBerry Smartphones do not include support for the HTML5 <video> tag.


    • Brent

      how should we feed video to the current blackberry’s then?

  • Petya Noname

    May be it's just emulation of html5?

  • Bharati

    Does Blackberry browser also support feature to browse the phone if something(may be an image) needs to be uploaded on the server from the phone's browser field

  • Fullmetal5000

    Hi Adam,
    How do I get Blackberry torch to recognize a phone number in an HTML page?

  • Marc

    Does Blackberry yet support the offline functionality of HTML5?

  • Jayesh Italiya

    Amazing it’s good for developers thanks any more Tags for webwork

  • Sean


    The date picker doesn’t work in focus navigation mode. It works like a text input. Any suggestion?


    • Anonymous

       Hmmm, that sounds like it might be a bug.  It should work whether the navigation mode is the default (pointer) or focus-based.  Can you please log a defect using the Developer Issue Tracker ( and I will escalate internally to the appropriate teams.

blog comments powered by Disqus