Sometimes it's the little things that make the difference between a good Web page and a great Web page. For example, most of the Web pages I've seen do not include keyboard shortcuts for the controls on those pages. Also, most pages do not include support for associating labels with controls. This functionality allows the user to click the label next to a control, such as an option button, and that control will receive focus. A truly keyboard-friendly Web page will allow the user to tab from control to control in a sequence that makes sense.
Many Windows applications contain elements that draw a box line around a related group of controls and provide a caption at the top of that box. These elements are called FRAMES when used in Windows applications but are not the same as the FRAMES used in HTML documents. These small but important user-interface elements usually do not make their way into Web pages. However, these types of user interface elements are all but expected in Windows dialog boxes. Many Web builders have not heard of these elements and do not know how to implement them. In Web pages, these border and caption combinations are known as FIELDSETS. They define a 3D-looking border that surrounds other controls on the Web page and are used for grouping.
Here are some handy user-interface tricks. The point to keep in mind is that these features are HTML 4.0-specific. If your browser does not support HTML 4.0, these tricks will not work. To implement a shortcut key, use the accesskey attribute:
<INPUT id=txtFName name=txtFName tabindex=1 accesskey=F></P><p>
To associate a label with a control, use the FOR attribute. Be sure to use the <u></u> tag pair to show the user which key is the shortcut key, if there is one.
<LABEL FOR="txtFName"><u>F</u>irst Name</LABEL><br>
To create a visible, but disabled textbox, use the DISABLED attribute
<INPUT id=txtAddress name=txtAddress disabled value="123 Oak Lane">
To create a specific TAB order for controls on a Web page, include the TABINDEX attribute on each control. Give a unique TABINDEX value for each control in the order that you want tabbing to occur.
<INPUT id=txtLName name=txtLName tabindex=2><p>
To surround a group of controls with a box and caption, use the FIELDSET tag:
<FIELDSET>
<LEGEND align=bottom>Frame Caption is here</LEGEND>
This is surrounded by a box and the caption appears at the top of the frame.
</FIELDSET>
Now you can implement these handy user-interface elements into your own Web pages. Click here for a complete page that demonstrates all of these examples.
Charles Caison is an instructor with DBBasics Corporation (http://www.dbbasics.com). He has written for Visual Basic Programmer's Journal, Windows NT Magazine, Microsoft Interactive Developer, and other industry publications. He is the co-author of Professional ADO and RDS with ASP from Wrox Press. He also speaks at Microsoft Developer Days and other industry events. You can reach him at charlesc@dbbasics.com.
