Of course, you could write a generic routine to focus the first field of the first form using something like this:
<<form name="myform" id="myform" action="#" method="get">> <<label onclick="document.myform.firstname.focus();">> First Name: <<input type="text" name="firstname" id="firstname" />> <</label>> <</form>>
You could, of course, also write a very generic function to focus the first <<button>>, <<input>>, <<select>>, <<textarea>> within a <<label>>, or the value of its htmlFor property.
Besides using tool tips as defined by an element’s title attribute, it may be useful to utilize the status bar to provide information to the user about the meaning and use of various form fields. While the status bar may not be in the primary area of focus for the user, unlike the tool tip it is not transitory and can be set to display a message as long as the field is in focus. We can use the status property of the Window object to set the status message when a field is focused—for example:
<<input type="text" name="fullName" id="fullName" size="40" maxlength="80" title="Enter your full name (Required field)" onfocus="window.status='Enter your full name (required)';" onblur="window.status='';" />>
A disabled form field should not accept input from the user, is not part of the tabbing order of a page, and is not submitted with the rest of the form contents. The presence of the HTML 4 attribute disabled, as shown here,
<<input type="text" value="Can't Touch This" name="field1" id="field1" disabled="true" />>
would be all that’s necessary to disable a field under an XHTML 1.0 or HTML 4.0–compliant browser. The browser usually renders a disabled field as “grayed out.”
<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">> <<html>> <<head>> <<title>>Disabled Field Demo<</title>> <<meta http-equiv="content-type" content="text/html; charset=utf-8" />> <</head>> <<body>> <<form name="myform" id="myform" action="#" method="get">> Color your robot? Yes <<input type="radio" name="colorrobot" id="colorrobot" value="yes" checked="true" onclick="myform.robotcolor.disabled=false;robotcolorlabel.style.color= 'black';" />> No <<input type="radio" name="colorrobot" id="colorrobot" value="no" onclick="myform.robotcolor.disabled=true;robotcolorlabel.style.color='gray'; " />> <<br />><<br />> <<label id="robotcolorlabel">> Color: <<select name="robotcolor" id="robotcolor">> <<option selected>>Silver<</option>> <<option selected>>Green<</option>> <<option selected>>Red<</option>> <<option selected>>Blue<</option>> <<option selected>>Orange<</option>> <</select>> <</label>> <</form>> <</body>> <</html>>
Unfortunately, the previous example does not work in much older browsers like Netscape 4 that lack full HTML 4 support. However, note that it is possible to simulate disabled fields in even very old browsers with a continual use of the blur() method for the “pseudo-disabled” fields as a user tries to focus them. Obviously, such a technique is best left for the history books, but it is possible if extreme backward compatibility is your goal.