dotMobimobiThinkingmobiForgemobiReadyDeviceAtlasgoMobi

Dealing with Forms can be Tricky

Entering data into a Mobile Web site can be a difficult and time-consuming process. To avoid wasting the user’s time and causing frustration, use forms sparingly. However, when using forms, reduce the required information as much as possible. The following creates a contact form with few fields: 

<form method="post" action="process_comment.cgi">
  <dl>
    <dt>Your comment is about:</dt>
    <dd><input type="radio" id="cat1" value="website" accesskey="w" /> 
    <label for="cat1">Our <span class="accesskey">W</span>eb Site</label></dd>
    <dd><input type="radio" id="cat2" value="product" accesskey="p" />
    <label for="cat2">Our <span class="accesskey">P</span>roducts</label></dd>
    <dd><input type="radio" id="cat3" value="news" accesskey="n" />
    <label for="cat3">A <span class="accesskey">N</span>ews Article</label></dd>
    <dd><input type="radio" id="cat4" value="other" accesskey="o" />
    <label for="cat3"><span class="accesskey">O</span>ther</label></dd>
    <dt><label for="comment">Your comment:</label></dt>
    <dd><textarea id="comment" name="comment" rows="5" cols="20"></textarea></dd>
    <dt><label for="email">Your e-mail (optional):</label></dt>
    <dd><input type="text" name="email" id="email" /></dd>
    <dt><input type="submit" value="Send" /></dt>
  </dl>
</form>

With all the basics covered, the code looks like the following when putting it all together to create an XHTML Basic homepage. 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Site Name</title>
  <meta http-equiv="content-type" content="application/xhtml+xml" />
  <meta http-equiv="cache-control" content="max-age=300" /> 
  <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
  <body>
  <!-- 
  All pages start with a common header and navigation bar so that users can
  navigate back to earlier pages without needing to scroll right down to the
  bottom of the page. Note that we still provide styling using XHTML
  elements where appropriate rather than by using the equivalent CSS styles. 
  This is so that the pages look their best on devices that do not support 
  CSS.
  -->
  <div id="header">
    <h1><img src="logo.gif" width="100" height="50" alt="Company Logo" /></h1>
    <p>Home Page</p>
  </div>
  <!-- 
  The page content is sandwiched between the common header and footer. In 
  this case, our content is a set of links to sections. Because the content
  of this page is static, it is sensible to provide access keys so that 
  users can access links immediately. Each section is labeled by the key
  number corresponding to its access key.
  -->
  <div id="content">
    <ol>
      <li>
        <a href="news.html" accesskey="1">News</a>
        <span class="description">Read the latest news about
        <span class="company">Company</span> and our products.</span>
      </li>
      <li>
        <a href="products.html" accesskey="2">Our Products</a>
        <span class="description">Browse our product portfolio 
        and request further information.</span>
      </li>
      <li>
        <a href="customers.html" accesskey="3">Our Customers</a>
        <span class="description">How <span class="company">Company</span>
        products help our customers succeed.</span>
      </li>
      <li>
        <a href="about.html" accesskey="4">About Us</a>
        <span class="description">What do <span class="company">
        Company</span> do? How can we help you?</span>
      </li>
      <li>
        <a href="contact.html" accesskey="5">Contact Us</a>
        <span class="description">Contact information: telephone, email
        and postal details plus a map of our location.</span>
      </li>
    </ol>
  </div>
  <!-- 
  The common footer provides the copyright statement for your company and a
  second copy of the navigation bar so that users don't need to scroll right
  back to the top.
  -->
  <div id="footer">
    <p>&copy; Company Ltd. All rights reserved.</p>
  </div>
</body>
</html>

The following is the associated CSS file style.css that provides the styling information for the page: 

body { margin: 0; }
#header  { background: #e0ffe0; color: green; border-bottom: solid 1px green; margin: 0 0 5px 0; padding: 5px; }
#header h1 { margin: 0 0 0 2px; }
#header p { margin: 0 0 0 10px; }
#footer  { background: #e0ffe0; color: green; border-top: solid 1px green; margin: 10px 0 0 0; }
.company { font-weight: bold; }
.small { font-size: small; }
.description { font-size: small; display: block; }
hr { clear: both; border:solid; border-width:1px; border-bottom-color:#007300; border-top-color:#ffffff; border-left-color:#ffffff; border-right-color:#ffffff;}
a { text-decoration: none; font-weight: bold; color: green; }
‹ Linking Phone NumbersupReferences & Resources ›