Understand field navigation | Zoho Creator Help

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

  1. Navigation using TAB key
  2. Four-way navigation
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.
  1. Vertical - The field focus moves from top to bottom through the fields. 
  2. 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

  1. 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.
  2. 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.

Enable field navigation

  1. Navigate to the edit mode of your Creator application.
  2. Open the builder of the required form.
  3. Click the Properties icon in the top-right of the form builder, as shown above. The Form Properties pane will appear on the right.

  4. Select the required option, Horizontal or Vertical, beneath Keyboard Navigation in the Appearance section. By default, the Horizontal option will be chosen.

  5. 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

  1. Navigation using TAB key
  2. Four-way navigation
  1. 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.
  2. You can navigate across all form fields and buttons using the TAB key.
  3. 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.
  4. 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.
  5. The default behavior for composite fields (name and address) and subform fields will be from left to right, irrespective of the tab order chosen.
  6. 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 

  1. 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. 
  2. 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.
  3. 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.
  4. This navigation will not focus on the Captcha field if you've checked the Enable Captcha form property.
  1. Understand forms
  2. Understand fields
  3. Add a field
  4. Localization


 

    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 CRM Training
        Redefine the way you work
        with Zoho Workplace

          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 CRM Training

            Create, share, and deliver

            beautiful slides from anywhere.

            Get Started Now


              Zoho Sign now offers specialized one-on-one training for both administrators and developers.

              BOOK A SESSION





                          Quick Links Workflow Automation Data Collection
                          Web Forms Enterprise Begin Data Collection
                          Interactive Forms Workplace Data Collection App
                          CRM Forms Customer Service Accessible Forms
                          Digital Forms Marketing Forms for Small Business
                          HTML Forms Education Forms for Enterprise
                          Contact Forms E-commerce Forms for any business
                          Lead Generation Forms Healthcare Forms for Startups
                          Wordpress Forms Customer onboarding Order Forms for Small Business
                          No Code Forms Construction RSVP tool for holidays
                          Free Forms Travel
                          Prefill Forms Non-Profit

                          Intake Forms Legal
                          Mobile App
                          Form Designer HR
                          Mobile Forms
                          Card Forms Food Offline Forms
                          Assign Forms Photography
                          Mobile Forms Features
                          Translate Forms Real Estate Kiosk in Mobile Forms
                          Electronic Forms

                          Notification Emails for Forms Alternatives Security & Compliance
                          Holiday Forms Google Forms alternative  GDPR
                          Form to PDF Jotform alternative HIPAA Forms
                          Email Forms
                          Encrypted Forms
                          Embeddable Forms
                          Secure Forms
                          Drag and Drop form builder
                          WCAG


                                            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.




                                                Manage your brands on social media

                                                  Zoho Desk Resources

                                                  • Desk Community Learning Series


                                                  • Digest


                                                  • Functions


                                                  • Meetups


                                                  • Kbase


                                                  • Resources


                                                  • Glossary


                                                  • Desk Marketplace


                                                  • MVP Corner


                                                  • Word of the Day


                                                    Zoho Marketing Automation

                                                      Zoho Sheet Resources

                                                       

                                                          Zoho Forms Resources


                                                            Secure your business
                                                            communication with Zoho Mail


                                                            Mail on the move with
                                                            Zoho Mail mobile application

                                                              Stay on top of your schedule
                                                              at all times


                                                              Carry your calendar with you
                                                              Anytime, anywhere




                                                                    Zoho Sign Resources

                                                                      Sign, Paperless!

                                                                      Sign and send business documents on the go!

                                                                      Get Started Now




                                                                              Zoho TeamInbox Resources



                                                                                      Zoho DataPrep Resources



                                                                                        Zoho DataPrep Demo

                                                                                        Get a personalized demo or POC

                                                                                        REGISTER NOW


                                                                                          Design. Discuss. Deliver.

                                                                                          Create visually engaging stories with Zoho Show.

                                                                                          Get Started Now









                                                                                                              • Related Articles

                                                                                                              • Understanding QR/Barcode field

                                                                                                                1. In a nutshell The QR/Barcode field in Creator allows seamless code generation by converting field data into scannable QR or Barcodes. This page explains its key features and customization options to enhance your app's functionality and user ...
                                                                                                              • 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 fields

                                                                                                                Understand fields Note: Ensure to not enter sensitive terms while naming your form fields or collect confidential information in them. A field is the basic unit or building block of a form. In your Zoho Creator app, you collect and store data using ...
                                                                                                              • 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 ...
                                                                                                                Wherever you are is as good as
                                                                                                                your workplace

                                                                                                                  Resources

                                                                                                                  Videos

                                                                                                                  Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                                  eBooks

                                                                                                                  Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                                  Webinars

                                                                                                                  Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                                  CRM Tips

                                                                                                                  Make the most of Zoho CRM with these useful tips.



                                                                                                                    Zoho Show Resources