Understand field navigation
What Does This Page Cover?
Learn about navigating your Creator fields using the TAB key and also a combination of arrow keys with special keys (Option key on Mac or the Alt key on Windows), thereby making it easier and beneficial to users who prefer the keyboard over the mouse in terms of accessibility. The combination of navigating using arrow keys and special keys is referred to as four-way navigation.
Availability
Field navigation using TAB key and combination of arrow keys with special keys :
- is available in all the data centers.
- is supported in all browsers.
- can be accessed in both free and paid pricing plans of Creator.
- can only be enabled by the super admin, admins, and developers, while other users can navigate through the form fields using the TAB key in the chosen direction (top to bottom or left to right).
Overview
Field navigation refers to navigating through the fields within a form in your application in the preferred order during data entry process. In general, field navigation involves various techniques, such as using the TAB key or arrow keys, clicking on individual fields, or using keyboard shortcuts, to move from one field to the next in a logical and efficient manner. This keyboard accessibility benefits users who have limited dexterity with a mouse, and those who simply prefer or rely on the efficiency of a keyboard.
Effective field navigation can help users save time and reduce errors when working with data-intensive applications.
Field navigation in Creator
Navigation using TAB key
Creator enables you (admin/super-admin) to allow your users to navigate across the form fields using the TAB key. When filling out a form, users typically encounter multiple fields that require specific information, such as a name, address, phone number, or email.
Certain users might prefer the keyboard over the mouse to navigate through the form, as they might find it challenging to scan the screen and locate the field that currently has keyboard focus. Keyboard users typically use the TAB key to navigate through fields and enter the required data in your forms. As they navigate through the form, the order in which your form fields receive visible keyboard focus is essential and must be logical as well as intuitive.
Tab order is the order or sequence that the cursor moves from field to field in a form. Initially, the tab order is determined by the order in which the fields are added to the form. As an admin or super-admin, you can define the exact order in which the fields must be tabbed using the below options, thereby enabling them to easily and efficiently navigate the form. This tab order will be applied when editing or creating a new record.
- Vertical - The field focus moves from top to bottom through the fields.
- Horizontal - The field focus moves left to right first and then top to bottom i.e., the navigation occurs in a 'Z' manner. After navigating towards the end of the row, the field focus moves down to the next row of fields in your form.
Users can go forward or right between fields by using the Tab key, and backward or left by using the Shift+Tab combination. For forms with sections, users can either navigate through all columns for each row (from left to right ) and then move to the next row (top to bottom). Then, they can switch to the next section.
The tab order can vary as per your form requirements. It is essential to choose an order that is on par with the visual flow of your form.
Four-way navigation
Note: This navigation is not listed as a form property, but will work in your Creator applications' forms when users use the combination of keys, as mentioned below.
You can also move between fields in all four directions: up, down, left, and right. To do this, you can use the combination of up/down arrow keys or the left/right arrow keys with special keys, such as the Option key on Mac or the Alt key on Windows. This method of navigation enables users to navigate between form fields, sections, and multi-column layout more quickly and efficiently, especially in cases of forms with huge number of fields. This mode of navigation is essentially using the keyboard to reach the required field by pressing minimum number of keys.
For forms with multiple fields, you can combine both types of navigation mentioned above to navigate with better ease. Let's assume you've created a form that contains a certain number of fields that include a combination of address, subform, and rich text fields. You're at the start of the form and wish to navigate quickly to a field that's at the end of the form. Here, you can use both the TAB key and a combination of arrow keys + Option/Alt keys to quickly navigate to the desired field at the bottom of the form.
See how it works
The below video shows how your users can navigate across form fields using the TAB key.
The below video shows how your users can navigate across form fields using a combination of arrow keys + Option key in Mac devices.
Use Cases
- Vertical tab order - This is the default option that allows your users to move from top to bottom of your form. Let's assume you've created an Apply Leave form for your employees. You can choose the Vertical option in this case as this form does not contain any sections and users can navigate the form fields in a linear manner.
- Horizontal tab order - When you've chosen the Horizontal option, you'll be able to navigate from left to right first, then only move below. Let's assume you've created a Reimbursement Details form containing three sections. You can move across the fields in each section from left to right, then move to the next section.
Navigation Guide for accessing field navigation
Enable field navigation
- Navigate to the edit mode of your Creator application.
- Open the builder of the required form.
- Click the Properties icon in the top-right of the form builder, as shown above. The Form Properties pane will appear on the right.
- Select the required option, Horizontal or Vertical, beneath Keyboard Navigation in the Appearance section. By default, the Horizontal option will be chosen.
- Access your app in live and use the TAB key to navigate across and between the form fields in the chosen order.
Things to Know
- Navigation using TAB key
- Four-way navigation
Navigation using TAB key
- To allows users to move horizontally (left to right) across your form fields, more than one section or column must be present in that form.
- You can navigate across all form fields and buttons using the TAB key.
- When utilizing a multi-column layout, form field navigation is determined by the arrangement of fields in the form builder, rather than their appearance in live mode.
- If you've enabled the RTL layout for your application and chosen the Horizontal option, then using the TAB key will move the focus on the fields from right to left, and not left to right.
- The default behavior for composite fields (name and address) and subform fields will be from left to right, irrespective of the tab order chosen.
- When using the TAB key for navigating form fields, fields such as radio, checkbox, and decision box will not be focussed i.e., you cannot navigate or choose the required options in the mentioned fields using the TAB key.
Disabled fields in your form will also be tabbed (focused) when navigating our form fields using the tab key.
Four-way navigation
- This is a field-to-field mode of navigation. Using this navigation you can only navigate from one field to another field. If the field contains an icon (such as close or add icons in case of subform fields), you need to manually focus on the field input area.
- If a field has more than one sub-field (such as name and address fields), the field focus will always be on the first sub-field of that field when you try to navigate to the next field with a sub-field.
- If you've configured form workflows (such as showing an info message upon executing that workflow), this navigation will not focus on the View log details area.
- This navigation will not focus on the Captcha field if you've checked the Enable Captcha form property.
Related Topics
Access your files securely from anywhere
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Zoho DataPrep Resources
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Understand Permissions
What Does This Page Cover? Learn how you can define unique permission sets such as Read, Write, or customized ones that decide on how different users can access the records. Availability Permissions can be accessed in all plans of Creator. Addition ...Understand Forms
1. What Does This Page Cover? Learn about forms and how they are used to collect and store data in Creator. 2. Availability Forms built from scratch, by importing data, and from a template can be created in all plans of Creator, while integration ...Understand Connections
This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version What Does This Page Cover? Learn about connections and their types that can be used to integrate your Creator application ...Understand field rules
The script actions in the field rules event will help you in defining the behavior of the fields in the form. There are multiple actions which can be associated with the field rules event. They are: Show field - This will make the field visible to ...Understand OCR field
The OCR field enables you to perform optical character recognition on an image. In other words, it extracts text from the images stored in an image field. For example, you can use the OCR field to extract the text from the images of invoices, ...
New to Zoho LandingPage?
Zoho LandingPage Resources