Visualforce Developer Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
Introducing Visualforce
Tools for Visualforce Development
Getting a Quick Start with Visualforce
Compile Visualforce Successfully
Creating Your First Page
Displaying Field Values with Visualforce
Using the Visualforce Component Library
Override an Existing Page with a Visualforce Page
Redirecting to a Standard Object List Page
Using Input Components in a Page
Adding and Customizing Input Field Labels
Setting the Tab Order for Fields in a Form
Adding Dependent Fields to a Page
Create Visualforce Dashboard Components
Displaying Related Lists for Custom Objects
Enabling Inline Editing
Converting a Page to a PDF File
Building a Table of Data in a Page
Editing a Table of Data in a Page
Using Query String Parameters in a Page
Use Ajax in a Page
Put Visualforce Pages on External Domains
Customizing the Appearance and Output of Visualforce Pages
Standard Controllers
Standard List Controllers
Custom Controllers and Controller Extensions
Advanced Examples
Override Buttons, Links, and Tabs with Visualforce
Using Static Resources
Creating and Using Custom Components
Dynamic Visualforce Bindings
Dynamic Visualforce Components
Integrate Email with Visualforce
Visualforce Charting
Creating Maps with Visualforce
Render Flows with Visualforce
Templating with Visualforce
Developing Salesforce Apps with Visualforce
Adding Visualforce to a Salesforce AppExchange App
Using JavaScript in Visualforce Pages
Communicating Across the DOM with Lightning Message Service
Visualforce Best Practices
Standard Visualforce Component Reference
Appendices
PDF

Setting the Tab Order for Fields in a Form

Visualforce forms have a “natural order” for tabbing through the input fields: left-to-right, top-to-bottom. For some forms, this might not be the most efficient or accessible arrangement. You can use the tabIndex and tabOrderHint attributes on input and other components in your page to change the tab order to anything you’d like.

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>

Remember, for this page to display account data, the ID of a valid account record must be specified as a query parameter in the URL for the page. For example: 

https://MyDomain_login_URL/apex/myPage?id=001x000xxx3Jsxb

Note

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.

The tabOrderHint attribute is available on only the <apex:inputField> component. The tabIndex attribute can be set on the following Visualforce components.
  • <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.