When designing forms, try to design a logical order that allows the user to navigate efficiently by using TAB navigation (typically, UP and DOWN keys in a mobile keypad). This is not only applicable to controls in forms, but also to any link or object.
This can be achieved in XHTML (Basic or Mobile Profile, if we focus on some -not all- mobile markup languages) by using the attribute tabindex. In the example below, the logical navigation order for the controls inside the form would be given by the order in which they appear in the code. tabindex attributes added, allow the user to navigate in the order myFirstName -> myLastName -> myFavCountry -> mySubmit (which might be more usable for the final user than accessing the submit control before the select control).
Besides, the example also shows how to associate labels to controls (input and select, in the example) and how they should be written being next every pair label-control in the code. This technique allows web browsers to re-flow a document so it is rendered the best way for the display of the device and, in general, to facilitate any form of content adaptation.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example with tab order, control labelling an control positioning</title>
</head>
<body>
<p>Enter your personal data and preferences in the following form:</p>
<form id="myFirstForm" action="http://prefs.example.com" method="post">
<p>
<label for="myFirstName">First Name:</label>
<input id="myFirstName" type="text" tabindex="0"/>
<label for="myLastName">Last Name:</label>
<input id="myLastName" type="text" tabindex="1"/>
<input id="mySubmit" type="submit" value="Submit" tabindex="3"/>
<label for="myFavCountry">Favourite country:</label>
<select id="myFavCountry" tabindex="2">
<option value="0">My fav one is not included</option>
<option value="1">USA</option>
<option value="2">Canada</option>
<option value="3">Argentina</option>
<option value="4">Spain</option>
<option value="5">UK</option>
<option value="6">France</option>
</select>
</p>
</form>
</body>
</html>
CategoryBpTabOrder CategoryBpControlLabelling CategoryBpControlPosition