Demo step 01 — Improving user experience in HTML forms by Joel Purra

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 Phone number Input always starts here

Products This entire section can usually be left with default values, so it is skipped when tabbing. If a new row is added, the numpad plus key or the enter key can be used to skip to the next field.

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.

Even though this button is in a container with data-plus-as-tab="true", and enter is a tab key, the enter key is made to work on the button by setting data-plus-as-tab="false".

Invoice address Name Address line 1 Address line 2 (optional) (optional) Since the second address line is optional, it makes sense to skip it. Zip code City Most of the time, entering details ends here; just pressing entersaves the order. State/province 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? The delivery address is often the same as the invoice address, but not always. Selecting "no" shows new address fields as follow ups.

Yes No

Name Address line 1 Address line 2 (optional) (optional) Since the second address line is optional, it makes sense to skip it. Zip code City Most of the time, entering details ends here; just pressing entersaves the order. State/province Orders are usually invoiced/delivered to Toronto, which is why the drop down list is skipped.

Delivery options Gift wrap

Normal delivery (5-6 days)
Express delivery (2-3 days)
Overnight delivery (1 day)

shift- tabto radio buttons work as usual.

Internal information Order notes (optional) (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.