Tab Navigation

In webpages with input fields, it is important to provide the right tab navigation, so users can go through the required fields using the Tab key. This is specially important for power users, since it enables them to interact with the whole page just using their keyboard.

Active Control

Visual top-level containers, such as Page (client page, server page) or MPage (client mobile page, server mobile page), include a property named ActiveControl. This property can have the Name of a control as value.

As a result, the target control will gain the focus automatically as soon as the page gets loaded in the user agent.

Tab Order

Every control has two properties, TabOrder and TabStop that can be used to define how they are navigated when hitting the Tab key, which changes the focus to the next input field.

First, you must ensure the TabStop’s property value is true (default), which enables tab navigation. Else, the value of the TabOrder property will be ignored.

Then, you must assign different values to the controls’ TabOrder property to define in which order they are menat to be navigated. Since 0 is the default value, we recommend to use 1 for the active control, and then 2 for the next control, 3 for the third, etc.

The value of TabOrder only defines the relative order; for example, if the active control’s TabOrder value is 16, it will be still the first component to get the focus when the page starts, and then when Tab key is pressed the control with the next higher value will get the focus (for example, a control with TabOrder set to 17). When there are no higher values in the TabOrder property of the rest of the controls, the count restarts, and the control with the lower value gets the focus instead.