Developers

Local Navigation

Home  >  Developers  >  Resources  >  Developer Journals  >  January 2005  > 

XHTML in Depth

Jennifer Emery, Research In Motion

Extensible Hypertext Markup Language (XHTML) was derived from HTML, and is stricter and cleaner by design. It was created as a replacement for HTML and may become the future language of choice for web development. This article focuses on XHTML development for the BlackBerry Browser. The BlackBerry Browser supports basic XHTML (pre v3.8) and XHTML-MP (Mobile Profile) (post v3.8).

Topics within this section include:

Top

The Basics

There are important differences that should be noted between XHTML and HTML:

  • XHTML is case sensitive and will only recognize lower case tags and attribute names.
  • All attribute settings must be enclosed in quotes (" ").
    (eg. <p align="left")
  • Empty tags are not allowed (including standalone tags).
    (eg. <br> tag would be replaced with <br />)
  • Tags must be properly nested.

All XHTML pages must start with the XML prolog: 

<? xml version="1.0" encoding="UTF-8"? >

This must be the first line of the document. Nothing can come before it, not even a blank line. The text that appears between the question marks indicates that it is an XML processing instruction instead of a mark-up tag or element. This line does not require a closing tag.

The second line of an XHTML page must be the document type definition. The DOCTYPE tells the browser which page specification to use and specifies any rules that may apply to the page.

XHTML supports three XML document types:

  • Strict
  • Transitional
  • Frameset

Top

Strict

XHTML Strict document type definition (DTD) can be used when you want clean markup. This document type is best used in conjunction with cascading style sheets (CSS) as it emphasizes structure rather than presentation. 

<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/
  xhtml1-strict.dtd">

Transitional

XHTML Transitional DTD is the opposite of Strict. It is best used when you need to use XHTML presentational features without cascading style sheets. 

<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/
  xhtml1-transitional.dtd">

Frameset

XHTML Frameset DTD is similar to Transitional except that it is best used when the page layout defines frames. 

<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Frameset//EN"
  "http://www.w3.org/TR/xhtml1/DTD/
  xhtml1-frameset.dtd">

The BlackBerry Browser does not support frames. Instead, a list of frames is displayed as links, which permits selection of a single frame as a standalone page. Style sheets are also not supported.

The best document type to define when developing a web page for the BlackBerry Browser would be Transitional.

Wrapping

All XHTML pages must start with one of the headers shown above, and must be wrapped between the start HTML tag: 

<html>

... and the end HTML tag: 

</html>

Note: All code examples to follow must include the XHTML header, and must be wrapped between <html></html> tags.

There are several attributes that can be included within the <html> tag such as "version", "lang" and "xmlns". The xmlns attribute can be manually set to the default value as follows: 

<html xmlns="http://www.w3.org/1999/xhtml">

... but since it is the default value, it will automatically be included if not specified. Note that the BlackBerry Browser ignores the additional attributes.

XHTML pages contain two main sections:

  • Header
  • Body

Top

<head>Header section</head>

Contains information about the document such as title, style, meta information, etc.

<style></style>
Not Supported

Defines style sheets, such as cascading style sheets, that specify presentation attributes for a page. In-line style definitions are also supported using the "style" attribute.

<link></link>
Not Supported

Defines a resource reference to another document such as an external style sheet.

The following attributes are required:

  • href
    URL of the resource
  • rel
    Relationship between the current page and the referenced document
  • type
    MIME type

<base />

The BlackBerry Browser will recognize the <base /> tag if it is specified within the header section. This tag specifies a base URL for all links included on that particular page.

For example: 

<head>
  <title>Hello World Page!!!</title>
  <base href="http://www.yourserver.com/
    Images/" />
</head>
<body>
<img src="Send.gif">

The image above is located in the subfolder called Images.

<title>Page title</title>

This tag is used to set a page title. This is displayed in the title bar on the BlackBerry Browser.

<meta />

Provides meta information about the page. Newer versions of the BlackBerry Browser have limited support for meta tags. The following http-equiv attributes are supported:

http-equiv="refresh"

  • Used to refresh the page at known intervals, and can be used to redirect one page to another. For example:
    • <meta http-equiv="refresh" content="2";
      url=http://localhost:8080/BlackBerry/
      index.html" />

http-equiv="expires"

  • Instructs the browser to remove the page from its cache after a pre-defined period of time has elapsed. This should only be used when necessary as it increases traffic on the wireless network and can increase the time it takes for the page to display. The following example forces the BlackBerry Browser to request the web page every time it is accessed:
    • <meta http-equiv="expires" content="-1" />

http-equiv="cache-control"

  • Instructs the browser how to cache a loaded page.

    • There are four potential values:
    public - cached in public shared caches.
    private - cached in private cache.
    no-cache - not cached.
    no-store - cached but not archived.

    Code Sample:

    <meta http-equiv="cache-control"
      content="no-cache">

Top

<body>Body section</body>

Contains page contents such as text, images, etc. There are several attributes associated within the <body> tag as shown in the following table:

Attribute Description
alink Color of active links.
Ignored by the BlackBerry Browser.
background Image to be used as the background.
bgcolor Background color of the web page.
link Color of all links on the page.
text Color of the text.
title Content title or description.
style Inline style definition.
vlink Color of visited links.
Ignored by the BlackBerry Browser.
xml:lang Declare human language used by element.

Note: In previous BlackBerry Handheld Software versions (v3.7 and earlier), the above attributes are not rendered if included within the <body> tag.

The XHTML skeleton structure so far: 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/
  xhtml1-transitional.dtd">
<html>
  <head>
    <meta /> <!-meta tags would appear here -->
    <title>Hello World!</title>
  </head>
  <body>
    This body section contains the content of the page.
  </body>
</html>

Note: The following images of the BlackBerry Browser output may not appear as exactly shown depending on user preferences and BlackBerry Wireless Handheld model.

BlackBerry Browser Output

Any text enclosed with the <!-- - -> tag is defined as a comment. Comments are used to describe the source code and are ignored by the BlackBerry Browser.

Top

Text Formatting

The BlackBerry Browser is designed to recognize a variety of tags included in the XHTML specifications, but it has a limited ability to render particular tags in the same way as desktop browsers. The following are tags that the BlackBerry Browser will render as normal text:

<abbr>Abbreviation</abbr> <acronym>Acronym</acronym>

Some desktop browsers render these as underlined text, then pop up a title window when the mouse is hovered over the enclosed text. The BlackBerry Browser displays the text in the default font without a pop up window.

Syntax:

<abbr title="Canada">CA</abbr>
<acronym title="World Wide Web">WWW</acronym>

<bdo>Text directon</bdo>

The tag includes a "dir" attribute which determines text direction . The value can be (default) "ltr" (Left to Right), or "rtl" (Right to Left). The BlackBerry Browser displays the text in the default font.

Code Sample:

<bdo dir="rtl">
  Defining the Text Direction
</bdo>
<br />
<bdo dir="ltr">
  Defining the Text Direction
</bdo>

Output from a desktop browser:

noitceriD txeT eht gninifeD

Defining the Text Direction

BlackBerry Browser Output


<del>Deleted text</del>
<s>Strikethrough text</s>
<strike>Strikethrough text</strike>

The enclosed text will appear on desktop browsers with a line through the text. The BlackBerry Browser displays the text in the default font

Code Sample:

<del>
  Deleted Text
</del>
<strike>
  Strike Text
</strike>
<s>
  Strikethrough Text
</s>

Output from a desktop browser:

Deleted Text
Strike Text
Strikethrough Text

BlackBerry Browser Output


<ins>Inserted text</ins>

Most desktop browsers will underline the enclosed text. The BlackBerry Browser does not underline the text.

Code Sample:

<ins>Inserted Text</ins>

Output from a desktop browser:

Inserted Text

BlackBerry Browser Output


<q>A short quotation</q>

The BlackBerry Browser and most desktop browsers will render the text using the default font.

<span></span>

Specifies an arbitrary portion of the content to apply a particular style, display or event management. This tag is mainly used to group inline elements in a document.

<sup>Superscripted text</sup>
<sub>Subscripted text</sub>

The BlackBerry Browser renders using the default font.

Code Sample:

<sup>Superscripted Text</sup>
<br />
<sub>Subscripted Text</sub>

Output from a desktop browser:

Normal Text ~ Superscripted Text
Normal Text ~ Subscripted Text

BlackBerry Browser Output


Supported style tags

The BlackBerry Browser is designed to correctly render the tags outlined in the next section. However, where noted, previous versions of the BlackBerry Browser will not render as expected.

<address>Address information</address>

Enclosed text will render in italicized form, and will include a line break before and after the address tag. For example:

Code Sample:

<address>
  Test User<br />
  123 Smith Rd.<br />
  Canada
</address>

Output from a desktop browser:

Test User
123 Smith Rd.
Canada

 

BlackBerry Browser Output


Previous versions of the BlackBerry Browser will render enclosed text of the address tag using the default font.

<b>Bold text</b> <strong>Strong emphasized text</strong> 

<strong>
  Strong emphasized text
</strong>

Output: Strong emphasized text

<big>Big text</big> 

<big>
  Big Text
</big>

Output: Big Text

<blockquote>A long quotation</blockquote>

The BlackBerry Browser will indent enclosed text by one full-width space. Previous versions (v3.7 or earlier) of the BlackBerry Browser will not render this indentation.

Code Sample:

<blockquote>This is the start of the blockquote, which defines
the start of a long quotation.</blockquote>

Output from a desktop browser:

This is the start of the blockquote, which defines the start of a long quotation.

BlackBerry Browser Output


<button>Push button</button>

The button tag is mostly used in conjunction with JavaScript™ events such as OnKeyPress, etc. Previous versions of the BlackBerry Browser (v3.7 and earlier) do not support JavaScript, and render enclosed text in the default font. The BlackBerry Browser application now supports JavaScript, where enclosed text will be displayed as a push button.

The following image was created using a simulated color BlackBerry wireless device. Monochrome BlackBerry Wireless Handhelds will display buttons slightly differently.

Code Sample:

<button>Push Me</button>

BlackBerry Browser Output


<cite>Text citation</cite>

The enclosed text is displayed in italics. In previous versions of the BlackBerry Browser, the text will be shown in the default font.

Code Sample:

<cite>Defines a Citation</cite>

Output from a desktop Browser:

Defines a Citation

BlackBerry Browser Output


<code>Source code</code>

Most desktop browsers will use the default browser font or "Courier New" to display <code>. The newer version of the BlackBerry Browser uses a fixed width font to display the enclosed text. In previous versions, the enclosed text is rendered using the default font.

Code Sample:

<code>This text represents code that has been enclosed within
the <code> element.</code>

Output from a desktop browser:

This text represents code that has been enclosed within the <code> element.

BlackBerry Browser Output


<dfn>Term definition</dfn>

Desktop browsers change enclosed text to appear in italics. Current versions of the BlackBerry Browser render text in italics while older versions render text without the italics.

Code Sample:

<dfn>Definition Term</dfn>

Output from Browser:

Definition Term

BlackBerry Browser Output


<i>Italics text</i> <em>Emphasized text</em> 

<em>
  Emphasized Text
</em>

Output:

Emphasized Text

<kbd>Keyboard input</kbd>

Desktop browsers change the font style of enclosed text to a smaller, fixed-width Courier-type font. The BlackBerry Browser (v3.8 or later) renders text using a fixed-width font while previous versions (v3.7 or earlier) render enclosed text using the default font.

Code Sample:

<kbd>Keyboard Type Text</kbd>

Output from a desktop browser:

Keyboard Type Text

BlackBerry Browser Output


<pre>Preformatted text, fixed-font</pre> 

<pre>
  Pre Tag
</pre>

BlackBerry Browser Output


<u>Underlined text</u> 

<u>
  Underlined Text
</u>

Output:

Underlined Text

<samp>Special emphasis</samp>

Formats the text with special emphasis. Browsers, including newer version (v3.8 and later) of the BlackBerry Browser, will render text using a fixed-width font, while previous versions will use the default font.

Code Sample:

<samp>Enclosed text should have a special emphasis</samp>

Output from a desktop browser:

Enclosed text should have a special emphasis

BlackBerry Browser Output


<small>Small text</small> 

<small>
  Small Text
</small>

Output:

Small text

<tt>Teletype text</tt>

The font style is changed to a fixed Courier-type font. Previous versions of the BlackBerry Browser (3.7 or earlier), use the default font to render text.

Code Sample:

<tt>This is Teletype</tt>

Output from a desktop Browser:

This is Teletype

BlackBerry Browser Output


<var>Variable name or value</var>

Enclosed text will be displayed in italics. Previous versions of the BlackBerry Browser (v3.7 and earlier) render enclosed text using the default font without special emphasis.

Code Sample:

<var>Variable tag ~ Indicates a variable name</var>

Output from a desktop browser:

Variable tag ~ Indicates a variable name

BlackBerry Browser Output


Top

Note on fonts

The BlackBerry Browser has a limited ability to render fonts. The BlackBerry Browser will render using the default font if the <font></font> or <basefont /> tags are specified within a page.

Defining a header

Header tags are used to emphasize text on a page. There are six sets of tags, <h1></h1> through to <h6></h6>. <h1> is the largest header and <h6> is the smallest. An align attribute can be added to align the enclosed text, either left, center or to the right. 

  <h1>Header # 1</h1>
  <h2 align="left">Header # 2</h2>
  <h3>Header # 3</h3>
  <h4>Header # 4</h4>
  <h5>Header # 5</h5>
  <h6>Header # 6</h6>

BlackBerry Browser Output


The BlackBerry Browser does not render header tags in the same way as desktop browsers and the output will depend on the software version installed on the handheld. In previous versions of the BlackBerry Browser (v3.7 and earlier), some of the header elements will render with the same emphasis.

Special Characters

The BlackBerry Browser can render special characters embedded within a web page. Each special character can be identified by using either its entity name or number. For example:

Code Sample:

Copyright - &copy;  or  &#169;<br />
Quotation Mark - &quot;  or  &#34;<br />
Ampersand - &amp;  or  &#38;<br />
Registered Trademark - &reg;  or  &#174;<br />
Less Than - &lt;  or  &#60;<br />
Greater Than - &gt;  or  &#62;<br />

BlackBerry Browser Output


Please view the following link for a complete list of special characters:

 

Text Layout

XHTML provides a few easy to use tags that can align, list and display page contents. The following illustrates each tag:

<center>Center enclosed text</center>

Syntax:

  <center>Title of Page</center>

BlackBerry Browser Output


<p>New paragraph of text</p>

Paragraphs can be aligned left, center and right:

  • <p align="left">
  • <p align="center">
  • <p align="right">

 

The BlackBerry Browser supports horizontal alignment of text, and ignores vertical alignment. The following code snippet shows each alignment value. 

  <p align="left">Text aligned left</p>
  <p align="center">Text aligned center</p>
  <p align="right">Text aligned right</p>

BlackBerry Browser Output


<div>A division or section within the document</div>

The BlackBerry Browser inserts a line break before and after the <div> tag. Alignment can either be left or right for horizontal alignment. Vertical alignment will be ignored.

  • <div align="left">
  • <div align="center">
  • <div align="right">

 

The following code snippet shows each alignment value. 

  <div align="left">Text left aligned</div>
  <div align="center">Text center aligned</div>
  <div align="right">Text right aligned</div>

BlackBerry Browser Output


<br />
Inserts a single line break

Previous versions of the BlackBerry Browser (v3.7 or earlier), ignore multiple sequential <br /> tags. The newest version of the BlackBerry Browser (v3.8 and later) will execute all <br /> tags.

<hr />

Insert a horizontal rule

Draws a horizontal line where placed. 

  Line #1 <br />
  <hr />
  Line #2 <br />
  <hr align="center" size="10" width="100" />
  Line #3 <br />
  <hr size="5" noshade />

BlackBerry Browser Output


Attribute Description
align="left/
center/right"		 Horizontal line alignment
size Line height
width Line width
noshade When specified, the rule is rendered as a solid color rather than a traditional 2-color "groove" line.

Top

Layout - Lists

Lists are used to neatly organize page content. Lists may also be nested to appear inside another list

XHTML provides three methods to create lists.

The first approach is a simple ordered or un-ordered list. The items in an ordered list appear in numbered sequence. Bullets are used to prefix items in an un-ordered list. The following code snippets illustrates each type.

Ordered Lists: Unordered Lists: 

 <ol>   <li />Item # 1<br />   <li />Item # 2<br />   <li />Item # 3<br /> </ol>       

 <ul>   <li />Option # 1<br />   <li />Option # 2<br />   <li />Option # 3<br /> </ul>

BlackBerry Browser Output


The <li> tag defines a list item and must be properly closed.

The second design approach is to define a directory list by using the <dir></dir> tag. This tag is used with the <li> tag, with output similar to an un-ordered list.

For example: 

<dir>
  <li>Item # 1</li>
  <li>Item # 2</li>
  <li>Item # 3</li>
</dir>

BlackBerry Browser Output


The third design approach is through a definition list, which splits the word and meaning on separate lines.

For example: 

<dl>
  <dt>Computer</dt>
  <dd>
    A device that computes, especially a
    programmable electronic machine that
    performs high-speed mathematical or logical
    operations or that assembles, stores,
    correlates, or otherwise processes
    information.
  </dd>
</dl>

BlackBerry Browser Output


<dl></dl> Defines the start and end of a definition list.
<dt></dt> Defines the start and end of the term within a definition list.
<dd></dd> Defines the start and end of the description of a term in a definition list.

Top

Layout - Tables

The BlackBerry Browser supports basic table definitions, along with several attributes. The following table details tags that will render when using the BlackBerry Browser (v3.8 and later):

Tag Attribute Description
<table>
</table>		   Defines the start and end of a table
  align Aligns the table.
Ignored by the BlackBerry Browser.
  bgcolor Background color for the entire table.
  border Border width.
  cellpadding The space between cell walls and the cell contents.
  cellspacing Space between cells.
  width Width of the table.
<caption>
</caption>		   Provides a table caption. This tag must be inserted immediately after the <table> tag. There can also only be one caption per table.
<th></th>   Denotes a table header cell.
<tr></tr>   Defines a table row.
  align Horizontal alignment of the cell contents.
  bgcolor Background color of the table cell.
  valign Vertical text alignment in cells.
Ignored by the BlackBerry Browser.
<td></td>   Defines a table column.
  align Horizontal alignment of cell contents.
  bgcolor Background color of the table cell.
  colspan The number of columns this cell should span.
  height The height of the table cell.
Ignored by the BlackBerry Browser.
  rowspan The number of rows this cell should span.
  valign Vertical alignment of cell content.
Ignored by the BlackBerry Browser.
  width Width of the table cell.

Code Sample:

<table>
  <caption>Table Example</caption>
  <tr bgcolor="yellow" align="right">
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
    <td colspan="2">Row 1, Column 3</td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="red">
      Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    <td>Row 2, Column 3</td>
  </tr>
</table>

BlackBerry Browser Output


Note: Previous versions of the BlackBerry Browser (v3.7 or earlier), did not support tables where table cell content would be displayed vertically.

Top

Links

Links create navigation elements on a web page. The anchor (<a> and </a>) tags are used to define the link, where the text between the tags will appear underlined.

The BlackBerry Browser supports the following link schemes:

cti: dc: http://
mailto: tel: wtai:

The syntax for an http link would be as follows: 

<a href=http://www.blackberry.com">
  BlackBerry Home Page
</a>

Images

The BlackBerry Browser can recognize wbmp (monochrome wireless bitmaps), gif, tif, jpeg and png images. The BlackBerry Mobile Data Service will convert gif images to png format as png images have a higher compression ratio and support alpha channels. jpeg images are used on color screen BlackBerry wireless devices.

Use the <img> tag to add images to a document, and make sure to always close the tag. There are several attributes associated with the <img> tag as shown in the following table:

Attribute Description
src The source (link/URL) of the image.
height Image height.
Unit of measurement must be supplied (eg. 10pt)
width Image width.
Unit of measurement must be supplied (eg. 6px)
align Aligns images horizontally on the page. Acceptable values are left and right. The BlackBerry Browser aligns images to the left by default. Vertical alignment is ignored.
alt Short image description. The enclosed text will display if the image is unavailable or if the user has disabled images on the BlackBerry Browser. This is a required attribute. Within the BlackBerry Browser, under Options - Browser Configuration, you must have "Show Images" set to "No", and "Show Image Placeholders" set to "Yes", for the alt text to display.
usemap Define an image as being an image map.

The <map> and <area> tags are required when defining an image as a usemap to declare image hotspots.

The usemap name (#ImageMap) is the same name specified with the opening <map> tag and is necessary for a usemap to function properly. <area> tags are specified within the opening and closing <map> tags to define a region within the image map. The <area> tag has several mandatory attributes as described in the following table:

Attribute Description
shape Determines the shape of the area. There are several acceptable values:
  • Circle
  • Rect
  • Poly
coords The x and y coordinates of the hot spot or image region. Coordinates are separated by a comma and appear in the following format:
  • Circle
    coords="center x, center y, radius"
  • Rect
    coords="left, top, right, bottom"
  • Poly
    coords="x1,y1,x2,y2,...,xn,yn"
alt Alternate text for the area if the image is not displayed. This is a required attribute.
target Specifies how the page is opened. The BlackBerry Browser ignores this attribute. 
Code Sample:
<img src="MapImage.gif" _fcksavedurl=""MapImage.gif"" alt="Map Test"
    usemap="#ImageMap" />
<map name="ImageMap">
  <area shape="rect" coords="0,0,79,25"
      href="#" _fcksavedurl=""#"" alt="Test1">
  <area shape="rect" coords="0,25,79,50"
      href="#" alt="Test2">
  <area shape="rect" coords="0,50,79,72"
      href="#" alt="Test3">
</map>

Top

Forms

Adding a form to a web page enhances functionality and user interaction. After selection of the "Submit" button, the form collects the name and associated values of the enclosed select, input and textarea elements, then submits the gathered content.

XHTML supports a basic form, which is also supported by the BlackBerry Browser.

The syntax supported by the BlackBerry Browser is: 

<form action="" method="">

action

A required form attribute to set the submission URL.

method

The HTTP method used to submit data to the URL specified with the action attribute. The method is set to either POST or GET, and is set to GET by default.

GET submits the form contents within the URL, where POST submits contents in the body of the request.

Other form attributes such as enctype, name, style, and title are ignored by the BlackBerry Browser.

The <input> tag is used to define a field on a form: 

<input type="" name="" value="">

The default type is "text". The attributes "size", "maxlength" and "checked" can be used depending on the setting of "type". "maxlength" is only used when type is set to "password" or "text" input. "checked" is only used when type is set to "checkbox" or "radio". The "size" attribute sets the width of the text field (in characters).

Several types of input fields can be defined as shown below:

type = "checkbox"

Defines a checkbox control.

Code Sample:

<input type="checkbox" name="Check" value="Check1" checked />
Check Box # 1<br />
<input type="checkbox" name="Check" value="Check2" />
Check Box # 2<br />
<input type="checkbox" name="Check" value="Check3" />
Check Box # 3<br />

BlackBerry Browser Output


Any options that includes the "checked" attribute will automatically show as selected when the page loads.

Attribute - name

The check box group name. It is a required attribute if the input type is "checkbox".

Attribute - value

Specifies the value of the checkbox. This value is sent to the server when the form is submitted. This attribute is required.

type = "hidden"

Defines a hidden element on a form. This item is included when the form is processed but is not displayed to the browser window.

Code Sample:

<input type="hidden" name="HiddenField"
    value="HiddenValue" />

type = "password"

Creates a password input field where the entered characters are masked with an asterisk (*).

Code Sample:

<input type="password" name="UserPaswd" size="10" maxlength="5" />

  • The "size" attribute is used to set the size of the field that is displayed.
  • The "maxlength" attribute is used to limit the number of characters that can be entered.

 

type = "radio"

Defines a radio control, where only one option can be selected at a time.

Code Sample:

<input type="radio" name="Radio1" />
Radio # 1<br />
<input type="radio" name="Radio2" />
Radio # 2<br />
<input type="radio" name="Radio3" />
Radio # 3<br />

BlackBerry Browser Output


type = "reset"

Displays a Reset button. When selected the form is reset (all fields are restored to the original values)

Code Sample:

<input type="reset" />

type = "submit"

Defines a Submit button. When selected, the contents of the form are submitted to the provided URL with the action attribute of the form element.

Code Sample:

<input type="submit" />

type = "text"

Defines a text input field.

Code Sample:

<input type="text" name="textfield" size="10" maxlength="20"/>

Descriptive label controls can be added for any field by using the <label> tag.

Code Sample:

<label>Enter Information:  </label>
<input type="text" size="10" maxlength="20"/>

BlackBerry Browser Output


type = "img"

Defines the associated image as being selectable.

Note: The input types "file" and "button" are not supported by the BlackBerry Browser.

Another method to provide user interaction on a form is through a drop down list. This is created through a <select> tag set to single-selection or multiple-selection. The select is set to single-selection by default, where the first list item is automatically selected (unless otherwise specified). You must specify the attribute "multiple" in the opening select tag to create a multiple-selection drop down list. A select list contains one or more <option> tags to define items in the drop-down list. Each option tag appears between the opening and closing select tags.

Code Sample: Single Select List

<br />
<select name="SingleSelectList">
  <option value="Option1" selected>
    Option # 1
  </option>
  <option value="Option2">Option # 2</option>
  <option value="Option3">Option # 3</option>
  <option value="option4">Option # 4</option>
</select>

BlackBerry Browser Output


Code Sample: Multiple Select List

<br />
<select name="MultipleSelectList" multiple>
  <option value="Option1 selected">Option # 1</option>
  <option value="Option2">Option # 2</option>
  <option value="Option3 selected">Option # 3</option>
  <option value="option4">Option # 4</option>
</select>

BlackBerry Browser Output


The "selected" attribute will automatically display the option as selected when the page loads.

The last type of field that can be added to a form is a multi-line text area. This input field is defined by the <textarea> tag. You can specify the number of rows and columns visible in the text area within this tag.

The following example defines a text area that spans 5 rows and 15 columns: 

<textarea name="TextArea1" rows="5" cols="15">
</textarea>

The "name" attribute defines the name of the text area

BlackBerry Browser Output


Top

Embedded Scripting and Content

The BlackBerry Browser (v3.8 and above) is designed to provide JavaScript support when used with the BlackBerry Enterprise Server v4.0 or greater. JavaScript will be executed when the page is first rendered, or when associated with control actions on the page. JavaScript support is optional. This feature can be enabled or disabled through the BlackBerry Browser Options under General Properties. BlackBerry Enterprise Server Administrators can also enable or disable JavaScript support through an IT Policy. IT Policy is sent down wirelessly to BlackBerry wireless devices (if connected to a BlackBerry Enterprise Server).

To define JavaScript, include the <script> tag within the header section of a web page, and define the type of script being used.

Code Sample:

<head>
  <script type="type/javascript">

  </script>
</head>

In addition, the BlackBerry Browser can support embedded content such as PME (transcoded SVG) and MIDI files by using the <object> and <param> tags. This option is also configurable under the BlackBerry Browser Options (General Properties).

Other types of embedded content, such as applets, are not supported on the BlackBerry Browser.

Previous versions of the BlackBerry Browser (v3.7 or earlier) do not support JavaScript or embedded content.

For people who are already programming in HTML, moving into XHTML development will not cause a huge impact on their day-to-day work, and is not considered a substantial learning curve.

For further information on XHTML development, or any other type of BlackBerry Browser development, please visit the Developer's section of BlackBerry.com:

http://www.blackberry.com/developers/

.. or visit the World Wide Web Consortium:

http://www.w3.org/

Please email your comments, suggestions and editorial submissions to mail

Related Links