Fieldsets & Legends

You can use <fieldset> and <legend> to help separate information on a form. See the example below where different form elements are placed inside of these tags. The fieldset is the outer wrapper. You can style the color of the border, the type of border and the thickness of the border. The legend is where you place a title for the category of information. You can also style this section by setting the color of the fonts and font-family style.

Join our mailing list


Select your preference:

Select your favorite web site:

CODE for fieldset & legends:


<fieldset>
    <legend>Join our mailing list </legend>
    <label for="name">your name</label>
    <input id="Text1" name="name" type="text" size="20"
    onblur="if (this.value==''){this.value='enter your name'}"
        onfocus="this.select()"   value="enter your name" />
    

     <label for="email">your email < /label>
     <input id="Text2" name="email" type="text" size="20"
     onblur="if (this.value==''){this.value='enter your email address'}"
        onfocus="this.select()" value="enter your email address" />
    

     <label for="postalcode">
        postal code
     </label>
     <input id="Text3" name="postalcode" size="20"
     onblur="if (this.value==''){this.value='enter your postal code'}"
        onfocus="this.select()" value="enter your postal code" />
    

     <label for="favmag1">Select your favorite magazine </label>
     <select id="Select1" name="favmag1">
         <option selected="selected" value="0">
         - - Select your favorite magazine - -</ option >
         <optgroup label="Computer">
             <option value="1">MSDN </option>
             <option value="2">CODE </option>
             <option value="3">BYTE </option>
        </optgroup>
         <optgroup label="Lifestyle">
            <option value="5">GQ</option>
            <option value="6">Home and Garden</option>
            <option value="7">US</option>
        </optgroup>
         <optgroup label="News">
         <option value="8">Time</option>
         <option value="9">The Week</option>
         <option value="9">People</option>
         </optgroup>
     </select>
            

    
< fieldset>
   <legend>Select your preference:</legend>
   <label for="radioformat1">
   <input id="radio1" checked="checked" name="radioformat" 
       title="html format" type="radio" value="" />
            HTML format</label>
    <label for="radioformat2">
    <input id="radio2" name="radioformat" title="text format" 
       type="radio" value="" />
            Plain text format</label>
     </fieldset>
    

     <fieldset>
         <legend>Select your favorite web site: </legend>
    <label for="radiosite1">
    <input id="radio3" checked="checked" name="radiosite"
     title="Microsoft.com" type="radio" />
            Microsoft.com</label>
     <label for="radiosite2">
     <input id="radio4" name="radiosite" title="MSDN.com"
      type="radio" />
            MSDN.com</label>
    <label for="radiosite3">
    <input id="radio5" name="radiosite" title="ASP.net" type="radio" />
            ASP.NET</label>
     </fieldset>
    <label for="check1">
    <input id="Checkbox1" name="check1" title="Subscribe" 
    type="checkbox" value="" />
        Subscribe to our mailing list</label>
 <input name="Join" style="width: 75px" type="button" value="Join" />
 </fieldset>

Cascading Style Sheets


Style Types