RE: *Complex* Tables, Forms, Labeling, I'm still confused

Leanne,

Im not sure if the form found at: http://www.hicksinsurance.ca/auto.html is
a *complex* as yours, but you might want to look at the source code there
for pointers.

> My understanding of
> <label> is
> that it is displayed as text on the screen for visual users, and
> is supposed
> to be read as the prompt for a given element.  If I'm right about
> that, then
> I can't use the label idea, I think.

The label and ID element/attribute combination does not affect display but
rather associates the two items to each other.  For example:

<label for="foobar">Foo:</label> <input type="" name="bar" id="foobar"
[other attributes as required]>.

This will achieve two things; in most screen reading technologies it
provides the association between the Label (Foo)and the input (bar) via the
id attribute's association with the label tag (foobar).  JAWs Forms Mode
does this well, as does IBM HPR.  Also, in some of the more current user
agents such as IE 5.5+ and/or Mozilla if you "click" on the Label (Foo) it
puts the focus on the input element.  For example, in the form noted above
if you look in the first "box" (<fieldset>) near the bottom the request is
for birth date information.  Using either of the browsers noted, click on
the word "Month" and notice the focus shift to the month <select> input.  If
you click on the word "Year", it puts the focus on the text input.

>
> So, I have the two-logical-column-headers problem, and am doing all the
> right
> stuff with scope/id+headers, because it's a table.

Again, check out the form above.  Be very careful that the Header/id
association of the table is used for understanding "where" you are in the
form, whereas the <label> and it's id refers to the actual inputs:

<tbody title="Driver Information">
	<tr class="hidden">
		<th id="driver_question">Driver - Question</th>
		<th id="driver_response">Driver - Answer</th>
		<th></th>
		<th></th>
	</tr>
	<tr>
		<td headers="driver_question" valign="top" align="right"><label
for="principle">Will you be the <strong>principle</strong>
driver?</label></td>
		<td headers="driver_response" valign="top">
			<select name="principledriver" id="principle">
				<option value="Yes">Yes</option>
				<option value="No">No</option>
			</select>
		</td>
		<td headers="driver_question" valign="top" align="right"><label
for="anotherdriver">Is there <strong>another Driver</strong> in your
Household?</label></td>
		<td headers="driver_response" valign="top">
			<select name="anotherdriver" id="anotherdriver">
				<option value="Yes">Yes</option>
				<option value="No">No</option>
			</select>
		</td>
	</tr>

One of the trickiest things to be aware of (and remember) is that there can
only ever be one instance of an id on any given page; in other words each id
defined on your page must have a unique value (name or id string).

>
> If I haven't described my table problem clearly enough, let me
> know and I'll
> try to provide useful clarification.  It seems that the major problem is
> that
> most forms-in-tables are in tables for layout only, not for data, and thus
> can be handled thoroughly different from tables-for-data.
>

Well, I hope this helps.  If I am way off, post some code to view and I can
offer some other suggestions.

JF

Received on Thursday, 14 November 2002 08:58:44 UTC