Recipe 7.17. Grouping Common Form Elements


Problem

You want to break up a large form into smaller groupings of elements.

Solution

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


Discussion

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


See Also

The HTML 4.01 specification for fieldset elements and legend properties at http://www.w3.org/TR/html4/interact/forms.html#h-17.10.




CSS Cookbook
CSS Cookbook, 2nd Edition
ISBN: 0596527411
EAN: 2147483647
Year: 2006
Pages: 235

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net