Chapter 10: Advanced Form Design
Disabled and Read-Only Elements
231
The tabindex and accesskey attributes can be quite valuable in Web site design. By contrast, I am not at all sure why two more attributes, disabled and readonly, have been added. The disabled attribute enables you to display form elements that cannot be changed by the user and are intended to be displayed in a grayed out or in some other fashion that makes the disabled status obvious. The readonly attribute is very similar but shouldn’t be visually different from the other fields, just unchangeable. Here’s how you might use these two in your own form: <form method=”post” action=”#”> <table border=”0” cellpadding=”3”> <tr> <td align=”right”>Name:</td> <td><input type=”text” name=”yourname” /></td>
</tr><tr>
<td align=”right”>Login:</td> <td><input type=”text” name=”login” /></td>
</tr><tr>
<td align=”right”>Host:</td>
<td><input type=”text” name=”host” value=”hostname.com”
readonly=”readonly” /></td>
</tr><tr>
<td align=”right”>Date:</td> <td><input type=”text” value=”3 August, 2004” disabled=”disabled” /></td>
</tr>
</table>
</form>
In this example, I’ve already filled in the value of host for the visitor. (This is probably based on the user’s remote_host CGI environment variable. See Chapter 9 for more details on how you can get this value dynamically.) I’ve also filled in the current date, but it’s a disabled field because I’m not letting the user change the date.
note
To ensure XHTML compliance, the attributes are in the odd form of disabled= ”disabled” and readonly=”readonly”. Non-XHTML–compliant sites might well use disabled and readonly instead.
Take a close look at Figure 10-7, and you can see how Internet Explorer renders these two special form elements.