We've now looked at several form features that apply
to textual inputs from the user. Often, though, our forms are primarily
numeric in content. There are several more form enhancements we can make
when we are dealing with numbers as form values.

In our bookstore site, a prime
candidate for a numeric form is the shopping cart. We need to allow the
user to update quantities of items being purchased, and we also need to
present numeric data back to the user for prices and totals.

Shopping cart table structure

The HTML for the shopping cart will describe one of the more involved table structures we have seen so far:

This table introduces another element rarely seen in the wild, <tfoot>. Like <thead>,
this element groups a set of table rows. Note that though the element
comes before the table body, it is presented after the body when the
page is rendered:

This source code ordering,
while non-intuitive to designers thinking visually about the table
rendering, is useful to those with visual impairments. When the table is
read aloud by assistive devices, the footer is read before the
potentially long content, allowing the user to get a summary of what is
to come.

We've also placed a class on
each cell of the table, identifying which column of the table contains
that cell. We demonstrated some ways to find
cells in a column by looking at the index of the cell within its row.
Here, we'll make a tradeoff and allow the JavaScript code to be simpler
by making the HTML source a bit more complex. With a class identifying
the column of each cell, our selectors can become a bit more
straightforward.

Before we proceed
with manipulating the form fields, we will apply a standard line of row
striping code to spruce up the table's appearance:﻿