ProblemYou want to break up a large form into smaller groupings of elements. SolutionUse the HTML fieldset property to separate the different sections of a form (see Figure 7-25): <form name="msgform" method="post" action="/"> <fieldset> <legend>Contact Information</legend> <label for="fmtitle">Title</label> <select name="fmtitle" > <option value="ms">Ms.</option> <option value="mrs">Mrs.</option> <option value="miss">Miss</option> <option value="mr">Mr.</option> </select> <label for="fmname">Name</label> <input type="text" name="fmname" /> <label for="fmemail">Email</label> <input type="text" name="fmemail" /> </fieldset> <fieldset> <legend>Your Message</legend> <label for="fmstate">Subject</label> <input type="text" name="fmcountry" /> <label for="fmmsg">Message</label> <textarea name="fmmsg" accesskey="m" rows="5" cols="14"></textarea> </fieldset> <input type="submit" name="submit" value="send" /> </form> Figure 7-25. A field separated by fieldsetsDiscussionThe HTML element fieldset and the legend properties allow an easy way to group common elements. You can also apply CSS rules to the fieldset and legend properties to modify the look as you see in Figure 7-26: fieldset { margin-bottom: 1em; border: 1px solid #888; border-right: 1px solid #666; border-bottom: 1px solid #666; } legend { font-weight: bold; border: 1px solid #888; border-right: 1px solid #666; border-bottom: 1px solid #666; padding: .5em; background-color: #ccc; } Figure 7-26. Modified fieldset and legendsSee AlsoThe HTML 4.01 specification for fieldset elements and legend properties at http://www.w3.org/TR/html4/interact/forms.html#h-17.10. |