Skip some fields in order form —SkipOnTab

SkipOnTab is open source software by Joel Purra, back end engineer cv pdf remote.


Some fields in this form are prefilled with sensible defaults, other are just not as common to fill in (ie "empty" is a sensible default). These fields are skipped when the user navigates the fields using the tab key. To reach the normally skipped fields using keyboard navigation, just tab past them and shift-tab back. Mouse or touch navigation is unaffected.

Skipping fields is most useful when the users are familiar with the form, and uses it regularly. Casual users may not feel as comfortable - then again, if they are already using the tab button, they might see it as an optimization.

Both static html fields and dynamically added fields are skipped in this example. The static html fields have, or are contained within elements that have, the attribute data-skip-on-tab="true". The dynamically added fields are children of a container that is marked to be skipped, so explicitly enabling skipping is not necessary.

Register phone order into order administration system

This annotated example form is used only by sales staff. They enter order details received by phone all day long, which is why they don't want to tab through all fields every time.

Customer contact information Input always starts here
ProductsThis entire section can usually be left with default values, so it is skipped when tabbing.
Product Quantity
Standard kit of our most popular product
Extra expensive add-on kit
Dynamically adds a field that is usually skipped, but running .focus() to enable faster edits.
Delivery address (optional) Since the second address line is optional, it makes sense to skip it. Most of the time, entering details ends here; just pressing enter saves the order. Orders are usually delivered to Sweden, which is why the drop down list is skipped.
Delivery options
shift-tab to radio buttons work as usual.
Internal information (optional) Notes are optional, but not skipped. It doesn't make sense to skip to the submit button when enter can be used.