Setting the Tab Order for Fields in a Form
Here is a simple example that uses the tabOrderHint attribute to control the tab order.
<apex:page standardController="Account">
<apex:form>
<apex:pageBlock title="Edit Account: {!Account.Name}">
<apex:pageBlockSection title="Account Details" columns="1">
<apex:inputField value="{!Account.Name}" tabOrderHint="4"/>
<apex:inputField value="{!Account.Website}" tabOrderHint="3"/>
<apex:inputField value="{!Account.Industry}" tabOrderHint="2"/>
<apex:inputField value="{!Account.AnnualRevenue}" tabOrderHint="1"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
Notice that when you display this page and press TAB, the active field changes in the reverse order than you would normally expect.
Using tabIndex and tabOrderHint
The tabOrderHint attribute is used as a hint when calculating the value to set for the tabindex value of the rendered HTML element or elements. It’s used to indicate the relative order in which the field is selected compared to other page components. This value must be an integer between 1 and 3276, or an expression which evaluates to an integer value in the same range. The tab order begins with component 1 being the first component selected when a user presses TAB.
The tabIndex attribute is used to directly set the tabindex value of the rendered HTML element. It’s an absolute index setting the order in which the field is selected, compared to other page components. This value must be an integer between 0 and 32767, or an expression which evaluates to an integer value in the same range. The tab order begins with component 0 being the first component selected when a user presses TAB.
- <apex:commandButton>
- <apex:commandLink>
- <apex:inputCheckbox>
- <apex:inputFile>
- <apex:inputSecret>
- <apex:inputText>
- <apex:inputTextarea>
- <apex:outputLabel>
- <apex:outputLink>
- <apex:selectCheckboxes>
- <apex:selectList>
- <apex:selectRadio>
When mixing <apex:inputField> with components that use the tabIndex attribute to set the tab order, you can multiply the tabOrderHint by 10 to get the approximate equivalent value of the tabIndex for that field. Use this to manually calculate equivalent values to set the appropriate attribute on each of the components in such a way as to set the desired tab order for all elements on the page.