CSS Form Design Using the Fieldset Tag

  • By: rcable
  • On: 11/22/2009 18:46:28
  • In: CSS
  • Comments: 0

I was working on a new advanced search function for the real estate and apartment section of my free classifieds site, finditclassifieds.com, and decided I was going to use CSS to format the search form.

It always easier to just do what you already know to knock out a project quickly but sometimes it is better to slow down and take some extra time to learn something new.  This was case with this project. I've been building form for quite some time but want to use some advanced CSS techniques for this form layout.

Considerations:
  • The style of this form can't interfere with the style and layout of all the other existing forms on the site
  •  Will use only CSS for the layout, no table allowed

Below are the two parts of the code. To try this code in your page.
  1. Copy and paste the style sheet code below in to your web page. You can actually paste this code anywhere before the HTML and it will work but it is always best
    to put your style tags nested inside the <head> </head> tag.
  2. Copy and past the HTML code anywhere between the opening and closing <body></body> Tag.

The Form

The Style Sheet

	  <style>
 	  #advanced legend {
 	  	font: 24px arial;
 	  }
 	  #advanced input {
 	  	display: block;
 	  	float: left;
 		width:150px;
 		margin-bottom: 3px;	
 	  }
 	  #advanced select {
 	  	display: block;
 	  	float: left;
 		width:150px;
 		margin-bottom: 3px;	
 	  }
 	  
 	  #advanced label {
 	  	display: block;
 	  	float: left;
 		width:150px;
 		margin-bottom: 3px;	
 	  }
 	  
 	  .smal {
 	  	font: 10px arial;
 		text-align: right;
 	  }
 	  #adv_button {
 	  	clear:both;
 		margin-left: 5px;
 		margin-top: 5px;
 		width: 125px;
 	  }	  
 	  </style>



The HTML Sheet

<div id="advanced" align="left" style="position: relative; margin-top:15px; width:290px;"> 
     <form name="adv_search" id="adv_search" method="post" action="advanced-search.asp">
       <fieldset title="Zip" style="width:350px;">
       <legend>Advanced Search</legend>
       <label for="zip">Zip Code <span class="smal">Enter a zip code</span> </label>
       <input type="text" name="zip" id="zip" value="95126">
       <label for="c">Category <span class="smal">Select a Category</span> </label>
       <select id="c" name="c">
         <option value="All">All</option>
         
         <option value="Apartments for Rent">Apartments for Rent</option>
         
         <option value="Commercial / Industrial">Commercial / Industrial</option>
         
         <option value="Condominiums for Rent">Condominiums for Rent</option>
         
         <option value="Condominiums for Sale">Condominiums for Sale</option>
         
         <option value="Foreclosures">Foreclosures</option>
         
         <option value="Hi Rise">Hi Rise</option>
         
         <option value="Homes for Rent">Homes for Rent</option>
         
         <option value="Homes for Sale">Homes for Sale</option>
         
         <option value="Investment Properties">Investment Properties</option>
         
         <option value="Land for Sale">Land for Sale</option>
         
         <option value="Mobile Homes">Mobile Homes</option>
         
         <option value="Office Space for Rent">Office Space for Rent</option>
         
         <option value="Roommates Wanted">Roommates Wanted</option>
         
         <option value="Rooms for Rent">Rooms for Rent</option>
         
         <option value="Timeshares">Timeshares</option>
         
         <option value="Townhomes">Townhomes</option>
         
         <option value="Vacation Rentals">Vacation Rentals</option>
         
         <option value="Want Ads">Want Ads</option>
         
       </select>
       <input id="adv_button" type="submit" name="Submit" value="Search">
       </fieldset>
     </form>
   </div>

Comments

There have been no comments made on this article. Why not be the first and add your own comment using the form below.

Leave a comment

Commenting is restricted to registered users only. Please register or login now to submit a comment.