HTML and CSS Reference
Tab Indexing and Autofocus
Typically, users navigate through a Web form using the Tab key, which moves the cursor
from one field to another in the order that the field tags are entered into the HTML file.
You can specify an alternate order by adding the tabindex attribute to any control
element in your form. When each element is assigned a tab index number, the cursor
moves through the fields from the lowest index number to the highest. For example, to
assign the tab index number 1 to the name field from the survey form, you would enter
the following tabindex attribute to the control element:
<input name=”name” tabindex=”1” />
This code would ensure that the cursor is in the name field when the form is first
opened. (Fields with 0 or negative tab indexes are omitted from the tab order entirely.)
Another way to ensure that a particular field is selected when a Web form is initially
opened is to use the autofocus attribute. The HTML code
<input name=”name” autofocus=”autofocus” />
automatically places the cursor in the input box for the name field when the form is
loaded by a browser. The autofocus attribute was introduced in HTML5 and thus might
not be supported by older browsers.
Older browsers that do not support tab indexing or the autofocus attribute simply
ignore them and open a file without giving the focus to any control element. When a user
tabs through the form, the tab order will reflect the order of the items in the HTML file.
Creating Check Boxes
A survey form like the one you're creating for Red Ball Pizza serves two purposes. One,
of course, is to receive customer feedback; the other is to remain in contact with the
consumer base. Red Ball Pizza has an e-mail newsletter that it sends out to subscribers,
detailing the latest news about the restaurant and informing patrons about upcoming
events and special deals. Alice wants to give customers filling out the survey form a way
of subscribing to the newsletter. This can be done using a check box.
You use a check box control in situations where you are verifying the presence or
absence of something; in this case, whether or not a customer is interested in receiving
e-mail from the restaurant. Check boxes are created using the input element with the
type attribute set to checkbox , as follows:
<input type=”checkbox” name=” name ” value=” value ” />
The value attribute contains the value of the field when the check box is checked. If
no value is provided, the value On is used by default. For example, the following code
creates a check box for determining whether a user is a member of the Democratic party:
<input type=”checkbox” name=”dem” id=”dem” value=”yes” />
If the check box is selected, the browser will submit a name-value pair of dem-yes to
the script running on the Web server. A name-value pair is sent to the server only when
the check box is checked by the user. If it is not checked, then nothing is sent to the server.
By default, check boxes are not selected. To preselect a check box, add the checked
attribute to the input element as follows:
As with the multiple and selected attributes, you also can use the checked attri-
bute without an attribute value.