The first thing to know about accessible forms is that most form elements need
label tags. Label tags are used on the prompt (the text preceding the form element) and the form element itself. The prompt consists of a label tag with a for attribute in it that matches an id attribute in the form tag. Here are a few sample text fields, each followed by its code:
<p><label for="name">Full Name</label>:
<input type="text" name="fullname" id="name" size="12"></p>
<p><label for="remarks">Suggestions</label>:<br />
<textarea name="remarks" id="remarks" cols="30" rows="5">
Type your suggestions here.
Sometimes a field is presented by itself with no text to provide a cue. Such is the case with this Search box, similar to that found on the CSULB home page, in which a field is displayed with only a button after it in the page flow, as if it was a sort of retroactive description. Naturally this doesn't count as being accessible, as labels are supposed to come immediately before the field. The recommended solution is to use the title attribute in the field definition.
<input type="text" name="q" title="Search CSULB" />
<input type="image" src="LB_btn_srch.gif" alt="Search" />
Title attributes are also used to provide cues for fields in table-based forms. The difference is that the title for a field must include the row and column heading labels (see Tables). For example,