Demo step 05 — 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 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
Products This entire section can usually be left with default values, so it is skipped when tabbing.
Row Product Quantity
0 Basic product, nothing extra
1 Product insurance
Dynamically adds a field that is usually skipped, but running .focus()to enable faster edits.
Invoice 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 entersaves the order. Orders are usually invoiced/delivered to Ontario, which is why the drop down list is skipped.
Delivery address

Is the delivery address the same as the invoice 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 entersaves the order. Orders are usually invoiced/delivered to Toronto, which is why the drop down list is skipped.
Delivery options
shift- tabto 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 entercan be used at some point before this textarea.