The HTML Group Box

Provide Visually Attractive Grouping for Your Users

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 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

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 tag inside the fieldset.

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

Please Enter Your Name
First Name:
Last Name:

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 [email protected].

 

 

 

 

Hide comments

Comments

  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Publish