Understanding WML - 8

Select inputs and drop down lists

Entering text using a mobile phone is tedious in the extreme. It may be fun to use abbreviations when texting friends using SMS, but if you want to enter data into a website, c u l8r won't get very far. Wherever possible, try to limit the number of <input> tags and use select boxes instead. Similar (but not identical) to HTML select inputs, WML select inputs offer a choice of pre-set options - reducing the number of keypresses to two or three. Each select input must have a name and at least one <option> tag. Unlike HTML, </option> tags are essential. In the deck described in page 6, I can add a select option - in this case to offer a choice of categories to use to index the link. This is the complete file:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
 "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
   <template>
      <do type="prev" label="Back">
         <prev/>
      </do>
   </template>
   <card id="main" title="CodeHelp" newcontext="false">
      <do type="accept" label="Add this link">
         <go method="post"
         href="http://www.codehelp.co.uk/cgi-bin/myscript.pl">
            <postfield name="category" value="$category"/>
            <postfield name="title" value="$title"/>
            <postfield name="url" value="$url"/>
            <postfield name="desc" value="$desc"/>
         </go>
      </do>
      <p>WML Add link page</p>
      <p>
         All titles must be <b>20 characters</b> or less.
      </p>
      <p>
         <fieldset>Category:
            <select name="category" title="Section?">
            <option value="computers">Computers</option>
            <option value="wap">WAP and WML</option>
            <option value="gateway">Gateways</option>
            </select>
         </fieldset>
         <fieldset>Title:
            <input type="text" name="title" size="20" emptyok="false"/>
         </fieldset>
      </p>
      <p>The URL you post <b>MUST</b> specify a .wml file in a
      valid location.</p>
      <p>
         <fieldset>URL:
            <input type="text" name="url" size="100" emptyok="false"/>
         </fieldset>
      </p>
      <p>Make sure you include in your description all the searchable
keywords people may enter when looking for your site.</p>
      <p>
         <fieldset>Description:
            <input type="text" name="desc" size="800" emptyok="true"/>
         </fieldset>
      </p>
   </card>
</wml>

Note that the select input is within a paragraph and a fieldset. This is to help keep all relevant information on the screen at the same time. Try not to offer too many selections, it may be better to split the process into more than one deck of cards in order to stay below the byte code limit of the WAP gateway concerned. For the same reason, keep the values and the contents of the options as brief as possible. For example, it is best NOT to output content direct from a database into a select form - or any WML card deck. You should always check the length of the data and trim it to fit within the small WAP limits. At the same time, keep the descriptions clear and unambiguous - the content of the option tag may be the only prompt the user gets to see on the mobile phone. The title of the select input will display once the soft key is pressed (often with the prefix Edit) but not all phones will display anything except the contents of the options from which the user has to choose.

This is the closest WAP comes to the drop-down list familiar to HTML forms. It is possible to allow multiple selections by changing the select tag to:

<select name="category" title="Section?" multiple="true">

This will return the values of the options as a string, with each value separated by a semi-colon, e.g.

computers;wap;gateway

You will have to use your scripting language (Perl, PHP, ASP etc) to split the values into an array for future use.

echo "all: $category<br/>\n";
$categories = explode (";",$category);
echo "Category<br/>\n1: $categories[0]<br/>\n";
echo "2: $categories[1]<br/>\n";

In PHP generates:

<p>all: computers;wap;gateway<br/>
Category<br/>
1: computers<br/>
2: wap<br/>
</p>