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.