Submitting Form Data to the Server in XHTML MP


In the previous sections of this XHTML MP tutorial, we have mentioned about how to use selection lists and various input elements to obtain data from a user in XHTML MP. However, the user data has no use if it is not posted to the server for further processing. To post data to the server in XHTML MP, you need the <form></form> tags and a submit button. Let’s first have a look at the following XHTML MP example. Then we will go into the details.


<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <title>XHTML MP Tutorial</title>
  </head>

  <body>
    <h1>Registration Form</h1>
    <form method=”get” action=”processing.asp”>
      <p>
        Username:<br/>
        <input name=”username”/><br/>

        Password:<br/>
        <input type=”password” name=”password”/><br/>

        Gender:<br/>
        <input type=”radio” name=”gender” value=”m”/>Male
        <input type=”radio” name=”gender” value=”f”/>Female<br/>

        Country:<br/>
        <select name=”country”>
          <option value=”ca”>Canada</option>
          <option value=”cn”>China</option>
          <option value=”fr”>France</option>
          <option value=”de”>Germany</option>
          <option value=”in”>India</option>
          <option value=”it”>Italy</option>
          <option value=”jp”>Japan</option>
          <option value=”kr”>Korea</option>
          <option value=”uk”>United Kingdom</option>
          <option value=”us”>United States</option>
        </select><br/>

        Which part of our XHTML MP tutorial do you like?<br/>
        <input type=”checkbox” name=”tutorial_part” value=”1″/>Part 1
        <input type=”checkbox” name=”tutorial_part” value=”2″/>Part 2
        <input type=”checkbox” name=”tutorial_part” value=”3″/>Part 3
        <input type=”checkbox” name=”tutorial_part” value=”4″/>Part 4

        <input type=”hidden” name=”temp_id” value=”123456″/>
      </p>

      <hr/>

      <p>
        <input type=”submit”/>
        <input type=”reset”/>
      </p>
    </form>
  </body>
</html>



























Sony Ericsson T610















Nokia Mobile Browser 4.0

Anchor Links in XHTML MP

Anchor links are used for navigation. You select an anchor link to go to another resource such as an XHTML MP page, or to scroll to a location in the current XHTML MP document. Anchor links are created with the <a></a> tag pair.


The href attribute of the <a> tag is used to specify the URL (Uniform Resource Locator) to the link target. The protocol used is HTTP. A URL has the form:




http://host_name/path/file_name#offset?parameter1=value1&parameter2=value2…




You should be very familiar with it if you have programmed HTML or WML before.




Going to a Location in the Current XHTML MP Page



As said earlier, you can make use of an anchor link to scroll to a location in the current XHTML MP page. To do this, first you have to set a link destination (target anchor) within the document. Second, you have to point an anchor link to the destination.


To set a link destination within an XHTML MP document, the id attribute should be used. Most XHTML MP tags contain the id attribute. Here are some examples:




<a id=”destination_id></a>


<a id=”destination_id />


<h1 id=”destination_id>XHTML MP Tutorial</h1>


<p id=”destination_id>Some text in a paragraph</p>




To point an anchor link to the link destination, you need to construct a URL using the id of the link destination as the offset (Note that an offset begins with the # character), and then specify this URL as the href attribute value of the anchor link, like this:




<a href=”#destination_id“>Select here to go to a location in the current XHTML MP document</a>




As the link destination is in the current XHTML MP document, there is no need to specify the host name, path and file name in the URL. Only the offset is needed.


The following XHTML MP example demonstrates how to go to a location within the current document:


<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <title>XHTML MP Tutorial</title>
  </head>

  <body>
    <p><a id=”top”>Table of Contents:</a></p>
    <ul>
      <li>Part 1 XHTML MP Introduction</li>
      <li>Part 2 Development of Wireless Markup Languages</li>
      <li>Part 3 Advantages of XHTML MP</li>
      <li>Part 4 WML Features Lost in XHTML MP</li>
    </ul>
    <p><a href=”#top”>Back to top</a></p>
  </body>
</html>




This is the result of the above XHTML MP example in a mobile phone browser:











Nokia Mobile Browser 4.0




If you select the “Back to top” link, the page will be scrolled to show the text “Table of Contents”.











Nokia Mobile Browser 4.0




For Sony Ericsson mobile phones, going to a link destination in the current XHTML MP page is not supported until browser version 4.0, which is first included in Sony Ericsson Z1010 mobile phones. Hence, earlier mobile phone models such as T610 and T68i do not support this feature.

XHTML MP Tables

To create a table in XHTML MP, you need the <table>, <tr> and <td> tags. Data in a cell is enclosed in <td></td> tags. Cells in the same row are enclosed in <tr></tr> tags. All rows are enclosed in <table></table> tags. So, <td></td> should be enclosed in <tr></tr> and <tr></tr> should be enclosed in <table></table>. The following XHTML MP example demonstrates how to create tables:


<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <title>Table in XHTML MP</title>
  </head>

  <body>
    <table>
      <tr>
        <td>Cell A</td>
        <td>Cell B</td>
        <td>Cell C</td>
      </tr>

      <tr>
        <td>Cell D</td>
        <td>Cell E</td>
        <td rowspan=”2″>Cell F</td>
      </tr>

      <tr>
        <td colspan=”2″>Cell G</td>
      </tr>
    </table>
  </body>
</html>




The result of the above XHTML MP markup code in mobile phone emulators is shown below:












Sony Ericsson T610



Nokia Mobile Browser 4.0




WAP CSS is required to control the presentation aspect of a table. For example, if you want to add a border to the table or specify the color of a table cell, you have to make use of WAP CSS. To let you see clearly the effect of the rowspan and colspan attributes in the previous XHTML MP example, we specify black borders to the table cells with the WAP CSS border property, like this:




td {
  border: thin solid black
}














Sony Ericsson T610



Nokia

XHTML MP Images

Displaying an Image in XHTML MP



The <img> tag is used to display an image in XHTML MP. This is the same as in HTML. WAP browsers will display the text assigned to the alt attribute of the <img> tag if it cannot display the image for reasons such as file not found or image format not supported. The height and width attributes of the <img> tag, as their names suggested, are used to specify the height and width (in pixels) of an image’s display area. You can make use of these two attributes to scale up or down the size of an image on the screen.


Besides the old WBMP image format, WAP 2.0 wireless devices should be able to support image formats commonly used on the web such as GIF, animated GIF, JPG, and PNG. However, this is device-specific. Some WAP 2.0 wireless devices can only support a subset of the above image formats.


One simple way to find out whether a particular image format is supported on a wireless device is to check the accept HTTP header, like what we have done in the “Choosing MIME Types Dynamically” section of this XHTML MP tutorial. For example, if “image/gif”, “image/jpg” and “image/png” are found in the accept HTTP header, it means the wireless device supports the GIF, JPG and PNG image formats.


The following example demonstrates how to display an image in XHTML MP:


<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <title>Image in XHTML MP</title>
  </head>

  <body>
    <p>
      <img src=”smile.gif” alt=”Smile” height=”62″ width=”60″ /><br/>
      Hello, welcome to our XHTML MP tutorial.
    </p>
  </body>
</html>




The result of the above XHTML MP code in some WAP browsers is shown below:













Sony Ericsson T610



Nokia Mobile Browser 4.0




If the image file does not exist, the result of the same XHTML MP code will become:













Sony Ericsson T610



Nokia Mobile Browser 4.0



XHTML MP Lists

The <ul>, <ol> and <li> elements are used to create lists in XHTML MP.


To create an unordered list, use the <ul> element. Each list item in an unordered list begins with a bullet. The <li></li> tags are used to enclose every list item. This XHTML MP example demonstrates how to create an unordered list:



<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <title>XHTML MP Tutorial</title>
  </head>

  <body>
    <p>Table of Contents:</p>
    <ul>
      <li>Part 1 XHTML MP Introduction</li>
      <li>Part 2 Development of Wireless Markup Languages</li>
      <li>Part 3 Advantages of XHTML MP</li>
      <li>Part 4 WML Features Lost in XHTML MP</li>
    </ul>
  </body>
</html>
















Sony Ericsson T610







Nokia Mobile Browser 4.0




To create an ordered list, use the <ol> element. An ordered list has list numbering. List items are enclosed within <li></li> tags. The following XHTML MP example demonstrates how to create an ordered list.


<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <title>XHTML MP Tutorial</title>
  </head>

  <body>
    <p>Table of Contents:</p>
    <ol>
      <li>XHTML MP Introduction</li>
      <li>Development of Wireless Markup Languages</li>
      <li>Advantages of XHTML MP</li>
      <li>WML Features Lost in XHTML MP</li>
    </ol>
  </body>
</html>



















Sony Ericsson T610







Nokia Mobile Browser 4.0




You can make use of the start attribute of the <ol> element to specify the starting number of the sequence, like this:


<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <title>XHTML MP Tutorial</title>
  </head>

  <body>
    <p>Table of Contents:</p>
    <ol start=”4″>
      <li>XHTML MP Introduction</li>
      <li>Development of Wireless Markup Languages</li>
      <li>Advantages of XHTML MP</li>
      <li>WML Features Lost in XHTML MP</li>
    </ol>
  </body>
</html>




The result of the above XHTML MP example in some WAP browsers is shown below:

















Sony Ericsson T610







Nokia Mobile Browser 4.0


With WAP CSS, you can have more precise control over the outlook of a list. For example, you can control the bullet shape of unordered lists and the list numbering of ordered lists (for example, changing the list numbering from “1, 2, 3…” to “i, ii, iii…”).

XHTML MP Preformatted Text

In XHTML MP, leading and trailing whitespaces of a paragraph is not displayed. Furthermore, two or more whitespaces in a paragraph are shown as one whitespace on the screen of mobile devices. This behavior is demonstrated in the following XHTML MP example.


<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <title>XHTML MP Tutorial</title>
  </head>

  <body>
    <p> Hello, welcome
to
our
XHTML MP tutorial. </p>
  </body>
</html>












Sony Ericsson T610



Nokia Mobile Browser 4.0




To preserve the formatting of the text in XHTML MP, you have to use the <pre> element, like this example:


<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <title>XHTML MP Tutorial</title>
  </head>

  <body>
    <pre> Hello, welcome
to
our
XHTML MP tutorial. </pre>
  </body>
</html>















Sony Ericsson T610







Nokia Mobile Browser 4.0



Font Style in XHTML MP

You can use tags to change the font style of the text in XHTML MP. However, some WAP browsers only support a subset of these tags, even though these tags are defined by the XHTML MP specification. This is because the WAP browser can only make use of the fonts available on the mobile device. For example, if the italic font is not available, the italic style is not supported. Unsupported XHTML MP tags will be ignored by WAP browsers and will not cause any errors.



<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <title>Font Style</title>
  </head>

  <body>
    <p>
      <b>Bold</b><br/>
      <i>Italic</i><br/>
      <b><i>Bold italic</i></b><br/>
      <small>Small</small><br/>
      <big>Big</big><br/>
      <em>Emphasis</em><br/>
      <strong>Strong</strong>
    </p>
  </body>
</html>




The <b> and <i> tags means bold and italic respectively. The <small> tag reduces the text size. The <big> tag increases the text size. The <em> and <strong> styles are similar. The WAP browser will display text with emphasis (<em>) or strong (<strong>) style in some way that makes it more noticeable. The effect depends on the actual wireless device.


The following screenshots show the output of the above XHTML MP markup code in some WAP browsers. The result will be somewhat different on other mobile phone models.












Sony Ericsson T610



Nokia Mobile Browser 4.0




You can have more precise control over font formats with WAP CSS. For example, you can control the font family to be used or set a specific font size (e.g. 12pt) to some text.


The <u> tag of HTML does not exist in XHTML MP. So, if you want to underline some text, WAP CSS has to be used.

XHTML MP Headings

The elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> are used to specify headings (level 1 to level 6) in an XHTML MP page. WAP browsers will try to display headings of different levels with different font sizes and styles. However, some WAP devices do not have so many sizes and styles of fonts and so headings of different levels may look the same on the screen.


<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <title>Headings Test</title>
  </head>

  <body>
    <h1>Level 1 Heading</h1>
    <h2>Level 2 Heading</h2>
    <h3>Level 3 Heading</h3>
    <h4>Level 4 Heading</h4>
    <h5>Level 5 Heading</h5>
    <h6>Level 6 Heading</h6>
  </body>
</html>




This is the result of the above XHTML MP example in some WAP browsers:
















Sony Ericsson T610







Nokia Mobile Browser 4.0


Comments in XHTML MP

Comments are placed inside <!– –> in XHTML MP. This is the same as HTML and WML 1.x. For example, the following lines are comments. WAP browsers ignore all comments.




<!– This is a comment in XHTML MP –>


<!– This is a multi-line
     comment –>




Line Breaking in XHTML MP


<br/> is the line breaking tag in XHTML MP, which is the same as that in HTML and WML 1.x. The following example demonstrates the usage of line breaks:



<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <title>Line Break</title>
  </head>

  <body>
    <p>
      Line 1<br/>
      Line 2<br/><br/>
      Line 3
    </p>
  </body>
</html>




The result should look like this in WAP browsers:












Sony Ericsson T610



Nokia Mobile Browser 4.0




XHTML MP Horizontal Rules


The <hr/> tag is used to add a horizontal rule to your XHTML MP page. Note that <hr/> should not be enclosed in the <p></p> tag pair.


The following example demonstrates the usage of horizontal rules in XHTML MP:


<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <title>XHTML MP Tutorial</title>
  </head>

  <body>
    <p>
      Table of Contents:<br/>
    </p>
    <hr/>
    <p>
      Part 1 XHTML MP Introduction<br/>
      Part 2 Development of Wireless Markup Languages<br/>
      Part 3 Advantages of XHTML MP<br/>
      Part 4 WML Features Lost in XHTML MP
    </p>
  </body>
</html>




The following screenshots show the result of the above XHTML MP example in some mobile phone browsers:













Sony Ericsson T610



Nokia Mobile Browser 4.0

XHTML MP Generic Metadata

You can specify some generic metadata for your XHTML MP file using the <meta/> tag. The <meta/> tag should be enclosed within the <head></head> tags. A WAP browser will just ignore the metadata if it does not understand the metadata’s meaning. You can specify metadata of any sort in an XHTML MP file without affecting the look of the page. For example, you may want to state the author name in your XHTML MP file but without displaying it on the screen.


<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <title>XHTML MP Tutorial</title>
    <meta name=”author” content=”Andrew”/>
  </head>

  <body>
    <p>Hello world. Welcome to our XHTML MP tutorial.</p>
  </body>
</html>