Demo step 03 — Improving user experience in HTML forms

Explanation

Explanation

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 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
Products
Row Product Quantity
0 Basic product, nothing extra
1 Product insurance

Invoice address (optional)
Delivery address

Is the delivery address the same as the invoice address?

Delivery options
Internal information (optional)