UI Tips
LANGUAGES: HTML
ASP.NET VERSIONS:
ALL
The HTML Group Box
Provide Visually Attractive Grouping for Your Users
By Brad McCabe
One of my favorite UI tools in Windows Forms has always
been the Group Box. When you are displaying large amounts of data on the screen
it s nice to be able to visually group the data into logical, smaller portions for
a user. This, however, is not obvious to do in ASP.NET. Some developers avoid
grouping information; others have done such workarounds as using tables, borders,
and absolutely positioning labels. Although these solutions work, they are
often less than ideal.
The answer to this problem lies in the HTML 4.01 spec and
the <fieldset> element. Because the element is in the 4.01 spec, it has
limited functionality in older browsers (but works perfectly in common browsers
like Internet Explorer 4.0 and higher and Netscape 6.0 and above). While
working with a wide assortment of browsers you will not find the fieldset
element in Visual Studio s toolbox or popping up in IntellaSense.
The fieldset tag is used to group multiple elements
together on a page and provide a caption for the grouping. The caption is
supplied with the <legend> tag inside the fieldset.
To provide a simple grouping for data entry you can use
the following HTML snippet:
<fieldset>
<legend>
Please Enter Your Name</legend>
<br>
<table>
<tr>
<td><asp:Label
ID= label1 Runat= server >First Name:</asp:Label></td>
<td><asp:TextBox
ID= textbox1 Runat= server ></asp:TextBox></td>
</tr>
<tr>
<td><asp:Label
ID= Label2 Runat= server >Last Name:</asp:Label></td>
<td><asp:TextBox
ID= Textbox2 Runat= server ></asp:TextBox></td>
</tr>
<tr>
<td colspan= 2 >
<asp:Button ID= button1
Runat= server Text= Submit ></asp:Button>
</td>
</tr>
</table>
</fieldset>
The resulting output in the browser looks very similar to
a Windows Forms application (see below):
The fieldset element also provides a wide range of
client-side events that you can listen for and handle. These include mouseover
events and, on some browsers, drag and drop events. Handling these events with
some JavaScript allows for the creation of extremely powerful and robust
interface designs for browser-based applications. For a complete list of events
and properties in Internet Explorer check out http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/fieldset.asp.
Although there are no server-side Group Box controls for
ASP.NET, and the fieldset element is not in the Visual Studio toolbox, you
might think you have to remember the tags and type them every time. This,
however, is not the case thanks to the extensibility of Visual Studio.NET.
Create a blank fieldset and legend tag in Visual Studio. Now
if you highlight this text and drag it to your toolbox, you can create a new
HTML element (see below):
When you drop the text into the toolbox it will be named
Markup Fragment by default. You can right-mouse click on this text and select
Rename Item to rename this Group Box, Fieldset, or any other meaningful name. You
can not only drag and drop HTML onto any panel in the toolbox, but any selected
text. Using this same process, you can create prewritten code snippets for
reuse at any time. This is a great time saver for common, repeated code, such
as database or login procedures.
Now that you have added the fieldset to the toolbox, in
the future, simply grab from the toolbox the element that you just created and
drop it onto your form. You are now free to drag and drop any additional HTML
element or ASP.NET server control into the fieldset to provide a visually
attractive grouping for your users.
Brad McCabe is a
consultant with Ajilon Consulting, a leading solutions provider. Brad also has
been a systems architect and consultant for several Fortune 500 companies and
has been a featured speaker at numerous Microsoft events around the world. His
primary interests include ASP.NET, Tablet PC, .NET Compact Framework, and
Microsoft s networking technologies. E-mail him at mailto:editors@devproconnections.com.