Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Dreamweaver

This chapter is from the book

ZIPPY FORM ORGANIZATION WITH THE FIELDSET TAG

One of the keys to good design is proximity: Grouping related elements together makes it easier on the eye and the brain, especially when it comes to lengthy forms. The <fieldset> tag is a handy tool to keep in any form designer's palette. Supported by most modern browsers (Internet Explorer 5.0 and later and Netscape Navigator 6.0 and above), the <fieldset> tag groups elements by drawing a thin-lined box around them all and adding a legend in the top-left corner of the box. Address info—such as Street, City, State, Zip—is a likely target for a <fieldset> tag. It's a cool look and easy to do. To group existing form elements, go into Code view and select all the desired form elements. (When I've tried to do this in Design view, I've found Dreamweaver didn't always get all the necessary tags.) Then, from the Forms category of the Insert bar, choose the Fieldset object; you can either click it or drop it on the selection, and a small dialog prompts you for the fieldset legend. Both a <fieldset> and a <legend> tag are inserted, like this:

The legend appears in Design view, but the box outline doesn't. Browser support does vary so be sure to preview in your favorite browser to see the results. Truly zippy.

Figure7.8Figure 7.8

  • + Share This
  • 🔖 Save To Your Account