The HTML Group Box

RELATED: "HTML5 for the ASP.NET Developer" and "Introduction to HTML5 for Mobile App Development."

One of my favorite UI tools in Windows Forms has alwaysbeen the Group Box. When you are displaying large amounts of data on the screenit s nice to be able to visually group the data into logical, smaller portions fora user. This, however, is not obvious to do in ASP.NET. Some developers avoidgrouping information; others have done such workarounds as using tables, borders,and absolutely positioning labels. Although these solutions work, they areoften less than ideal.

The answer to this problem lies in the HTML 4.01 spec andthe

element. Because the element is in the 4.01 spec, it haslimited functionality in older browsers (but works perfectly in common browserslike Internet Explorer 4.0 and higher and Netscape 6.0 and above). Whileworking with a wide assortment of browsers you will not find the fieldsetelement in Visual Studio's toolbox or popping up in IntellaSense.

The fieldset tag is used to group multiple elementstogether on a page and provide a caption for the grouping. The caption issupplied with the tag inside the fieldset.

To provide a simple grouping for data entry you can usethe following HTML snippet:

  Please Enter Your Name 
     First Name:        Last Name:                

The resulting output in the browser looks very similar toa Windows Forms application (see below): 

The fieldset element also provides a wide range ofclient-side events that you can listen for and handle. These include mouseoverevents and, on some browsers, drag and drop events. Handling these events withsome JavaScript allows for the creation of extremely powerful and robustinterface designs for browser-based applications. For a complete list of eventsand 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 forASP.NET, and the fieldset element is not in the Visual Studio toolbox, youmight 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. Nowif you highlight this text and drag it to your toolbox, you can create a newHTML element (see below):

When you drop the text into the toolbox it will be namedMarkup Fragment by default. You can right-mouse click on this text and selectRename Item to rename this Group Box, Fieldset, or any other meaningful name. Youcan not only drag and drop HTML onto any panel in the toolbox, but any selectedtext. Using this same process, you can create prewritten code snippets forreuse at any time. This is a great time saver for common, repeated code, suchas database or login procedures.

Now that you have added the fieldset to the toolbox, inthe future, simply grab from the toolbox the element that you just created anddrop it onto your form. You are now free to drag and drop any additional HTMLelement or ASP.NET server control into the fieldset to provide a visuallyattractive grouping for your users.

Brad McCabe is aconsultant with Ajilon Consulting, a leading solutions provider. Brad also hasbeen a systems architect and consultant for several Fortune 500 companies andhas been a featured speaker at numerous Microsoft events around the world. Hisprimary interests include ASP.NET, Tablet PC, .NET Compact Framework, andMicrosoft s networking technologies. E-mail him at [email protected].