Mobile browsers that support XHTML-MP also allow mobile-specific URI schemes as link targets in the href attribute of the <a> tag. These schemes enable common mobile use cases in Mobile Web content.
The tel: URI schemes allow mobile users to click a link to initiate a phone call. The format of a tel: URI is tel:<phone number>. The phone number to dial on the mobile device is embedded directly into the URI. The markup example below illustrates the use
Call <a href="wtai://wp/mc;+15035551212">+1-503–555-1212</a> for Information
<a href="wtai://wp/ap;+15035551212;Information">Add to Address Book</a>
Unfortunately, the tel: and wtai: URI schemes are not universally supported in mobile browsers. In general, older mobile browsers prefer wtai: while newer browsers support tel:. Some browsers do allow use of both schemes. Use a device database to
determine which of the two protocols are supported by a specific model of mobile device. See Chapter 4 for more information about device databases and content adaptation.
The sms: URI scheme initiates a SMS message. The format of this scheme is sms:<phone numbers>?<action>, where <phone numbers> is a comma-separated list of phone numbers and <action> is an optional token to specify more information about the text message, such as the message body. The markup examples below show uses of this scheme:
<a href="sms:+15035551212,+15035551234">Text us with a Question</a>
<a href="sms:+15035551212?body=Ask+a+Question">Text me with a Question</a>
The mmsto: URI scheme initiates an MMS message. The format of this scheme is
sms:<phone numbers>;<action>, where <phone numbers> is a comma-separated list of phone numbers and <action> is an optional token to specify more information about the text message.
<a href="mmsto:+15035551212">Send us a Photo</a>
<a href="mmsto:+15035551212?subject=Photo">Send us a Photo</a>
The sms: and mmsto: URI schemes are not universally supported in mobile browsers.
Consult a device database and perform on-device testing to determine their actual support levels in mobile browsers.
Forms
XHTML-MP provides basic support for forms. The <form> element supports action, enctype, and method attributes to specify, respectively, the URL to submit form data, the MIME encoding to use for form contents and the HTTP request method used to submit the form. The <form> attributes name and target from XHTML are not supported.
Valid child elements of <form> include <fieldset>, <p>, and <table>. The <input> elements of a form must be contained inside one of these child tags. In the <input> element, the
new title attribute specifies a softkey label to display when the input element is focused. As in XHTML, CSS may be used to customize the visual style of the form and its input fields.
The code sample in Listing 3-2 illustrates the use of <form> and <input> elements in XHTML-MP. This listing can be viewed in a browser at
http://learnto.mobi/books/bmwd/03/3–2.xhml. View the example in a mobile browser or emulator to observe the form behavior. Figure 3-1 displays Listing 3-2 in the Android emulator.
Figure 3-1. XHTML-MP Forms in Android Emulator Listing 3-2. XHTML-MP Forms
<?xml version="1.0" encoding="UTF-8"?>
<!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>
<link rel="stylesheet" href="/learnto.css" type="text/css" />
<title>XHTML-MP Form</title>
</head>
<body>
<form action="/signup.php" method="post">
<p>Join the Sunset Farmers' Market email list:</p>
<fieldset>
<label>First Name: <input type="text" name="firstname" size="7" title="First"/></label>
<label>Email: <input type="text" name="email" size="10" title="Email"/></label>
</fieldset>
<p>
contain <td> and <th> child elements to represent the table cells). The cellpadding and cellspacing attributes are not supported. Instead, use CSS to style tables, rows, columns, and individual cells. Table rows and cells can be aligned using CSS or the align and valign attributes. Both header and data cells (<th> and <td> tags) can span blocks in the table’s grid using colspan and rowspan attributes. All other visual
components of tables, including background colors, fonts, and visual differentiation of header and footer rows, are controlled using CSS.
The code sample in Listing 3-3 displays a basic <table> element in XHTML-MP. This listing can be viewed in a browser at http://learnto.mobi/books/bmwd/03/3–3.xhml.
View the example on an emulator or mobile device to observe how a table displays in a mobile browser. Figure 3-2 displays Listing 3-3 in an Android emulator.
Figure 3-2. XHTML-MP Table in Android Emulator
Listing 3-3. XHTML-MP Table
<?xml version="1.0" encoding="UTF-8"?>
<!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>
<link rel="stylesheet" href="/learnto.css" type="text/css" />
<title>XHTML-MP Table</title>
<td class="vegVendor">Mt. Tabor Farms</td>
</tr>
<tr>
<td align="center" valign="middle" class="special" colspan="3">Special! <a href="/specials.php">$3 for 3 heirloom tomatoes at Booth 201.</a></td>
</tr>
<tr align="left" valign="top">
<td class="vegName">Goat Cheese</td>
<td class="vegPrice">$4.00 / wedge</td>
<td class="vegVendor">Portland Organic Dairy</td>
</tr>
</table>
</body>
</html>