Setting up any form to be accessible - we are already half way to a good online form. To tie in the form with the site's visual design - we can now use various approaches to style it's layout and presentation.
Opinions are somewhat divided whether it is appropriate to return to the old demons of using a table structure - or whether to use CSS to control positioning of the form elements. Here, we will look at avoiding the table layout in favour of the more clean CSS techniques.

Have another look at the sample feedback form from the accessibility section and make yourself aware of its presentation. Then take a look at its source code and its specific CSS.
[note: this is merely the css to control the form itself, not the overall page settings]

As you can see - the stylesheet controls the different elements via the form tags themselves as well as standard HTML tags such as <h2> </h2> and the <br /> tag - as well as additional <div> </div> tags, including ids and classes, added to the HTML document.
In the case if this feedback form - standard HTML tags and custom DIVs have been added to gain control over the positoning of the individual elements in the same way we would format the any other page content. Even though this approach does allow control over each element it can be a little tricky to troubleshoot due to the usual browser discrepancies, again forcing us into a corner having to decide whether to compromise our planned form presentation or to employ hacks.

form demo

There are a lot of different approaches to the visual style of form presentation - have a look at the links below for inspiration and help. The sample form shown below is not the most attractive of forms - it has been set up to demonstrate a few specific techniques which can be used for visual styling.

CSS rules used [note: links yet inactive, more soon...]

• header graphic for overall form
• customised legend with background image
• checkbox selection with thumbnail image [float]
• radio buttons and drop down selection in right column
• text areas at set size for column width
• reset / submit buttons customised with image

header graphic

depending on the purpose and placement of the form - it might be suitable to tie in the visual style of the form with the site's design via graphic elements within the form.
In our sample here - you can see that header graphic has been added.

html script |focus: header|

Taking a look at the HTML code you can see that the form is contained within a specific <div> </div> tag which controls its appearance within the page and that a header has been added - using the standard <h1> </h1> tag - as highlighted here.

<div id="form_container">
<form id="[identifying name]" action="[url]" method="post">
     <h1>how do you browse...?</h1>
     <fieldset id="[identifying name]">
     <legend><!-- legend title for first form section --></legend>
        ......

        <!-- form elements to go in here -->
        ......

     </fieldset>
</form>
</div>

css script |focus: header|

The style sheet controls first the overall form layout and appearance with its #form_container ID and sets specific rules for the form itself by trageting the form tag. You can target any of the given form's elements with CSS.
For the header graphic - the style sheet specifies rules for the <h1> </h1> tag, adding the graphic as background image.

#form_container {
	background: #fff;
	margin: 1em 0;
	color: #003;
	font: 1em/1.3em Arial;
	letter-spacing: 0.1em;
	padding: 0.6em;
	display: block;
}
#form_container form { 
	margin: 0; 
	padding: 0; 
	text-transform: lowercase;
	background: #fff;
} 
/* header graphic */
#form_container form  h1 {
	display: block;
	height: 160px;
	margin: 0 0 20px 0;
	padding: 50px 0 0 220px;
	font: 2.4em Arial;
	letter-spacing: -0.09em;
	text-transform: uppercase;
	font-weight: bold;
	color: #000;
	background: url(../images/formheader.jpg) top left no-repeat;
}

legend with background image

to maintain the continuity - you can now add suitable graphic elements to the legend of each form section. In our sample here - the arrow graphic from the header has been modified to be repeated for each section's title.

html script |focus: legend|

Taking a look at the HTML code you can see that the form is contained within a specific <div> </div> tag which controls its appearance within the page and that a header has been added - using the standard <h1> </h1> tag - as highlighted here.

<div id="form_container">
<form id="[identifying name]" action="[url]" method="post">
     <fieldset id="[identifying name]">
     <legend><!-- legend title for first form section --></legend>
        ......

        <!-- form elements to go in here -->
        ......

     </fieldset>
</form>
</div>

css script |focus: legend|

The style sheet now targets the fieldset controlling its appearance within the form. For our sample here - the border has been set to none to get rid of the default frame applied otherwise. To add the graphic to the form section - a background image has been added to the legend tag, a text-indent set to position the legend text next to graphic.

/* getting rid of default border */
#form_container fieldset { 
	display: block;
	margin: 1em 0; 
	border: none;
	background: #fff;
}
/* adding graphic, controlling text positioning */
#form_container legend { 
	font: 0.9em Arial;
	letter-spacing: -0.05em;
	text-transform: uppercase;	
	font-weight: bold;
	text-indent: 2em;
	background: #fff url(../images/legend.jpg) top left no-repeat;
	padding: 1.6em 2em;
}

checkboxes with thumbail images

in order to control the layout of a checkbox selection you can use several different methods: using a table set up, giving the label and the input element each a unique ID - and many more. In my opinion, one of the best set ups is the method of using a definition list and controlling its appearance via CSS - as discussed in this post on clagnut.com.

This technique encloses the checkbox selections in a definition list, each label set up as definition term and each checkbox set as description. This allows control over each element and ensures consistency for all checkbox selection options.
The sample form shown above uses this set up to control both the checkbox and radio button selection. Focusing on the checkbox selection (see below) - each option has been given a visual reference as well as a label by the addition of thumbnail icons of the given browsers.

html script |focus: checkbox|

In our example here, the HTML code for the checkbox selection has been edited to use a defintion list as mentioned previously. The <dl> </dl> tag encloses the overall checkbox selections, <dt> </dt> tag holding the label, ie the text label for the checkbox, and the thumbnail image - and the<dd> </dd> tag contains the checkbox itself.

<form id="[identifying name]" action="[url]" method="post">
<!-- browsers -->
  <fieldset id="[identifying name]">
  <legend>your favourite browser</legend>
  <dl>
   <dt>
     <img src="../images/firefox.jpg" width="50" height="50" alt="firefox icon" />
     <label for="firefox">firefox</label>
   </dt>
   <dd><input name="fav_firefox" id="firefox" type="checkbox" value="firefox" /></dd>
   <dt>
     <img src="../images/mozilla.jpg" width="50" height="50" alt="mozilla icon" />
     <label for="mozilla">mozilla</label>
   </dt>
   <dd><input name="fav_mozilla" id="mozilla" type="checkbox" value="mozilla" /></dd>
   <dt>
     <img src="../images/camino.jpg" width="50" height="50" alt="camino icon" />
     <label for="ie">camino</label>
   </dt>
   <dd><input name="fav_camino" id="ie" type="checkbox" value="camino" /></dd>
   <dt>
     <img src="../images/opera.jpg" width="50" height="50" alt="opera icon" />
     <label for="opera">opera</label>
   </dt>
   <dd><input name="fav_opera" id="opera" type="checkbox" value="opera" /></dd>
   <dt>
     <img src="../images/netscape.jpg" width="50" height="50" alt="netscape icon" />
     <label for="netscape">netscape</label>
   </dt>
   <dd><input name="fav_netscape" id="netscape" type="checkbox" value="netscape" /></dd>
   <dt>
     <img src="../images/ie.jpg" width="50" height="50" alt="explorer icon" />
     <label for="ie">explorer</label>
   </dt>
   <dd><input name="fav_ie" id="ie" type="checkbox" value="ie" /></dd>
  </dl>
</fieldset>
</form>
</div>

css script |focus: checkbox|

The style sheet initially sets the <dl> </dl> rules to control size and positioning of the checkbox selection within the overall form.

Using float: left; on the <dt> </dt> tag allows the positioning of the text including the thumbnail image to the left of the checkbox. Notice that the padding set to position the text vertically - the thumbnail image then uses negative margin for alignment with the text.

Again float: left; is used for the checkbox within the <dd> </dd> tag, the set margin controlling the alignment of the checkbox with its text label.

/* controlling layout of checkbox selection */
#form_container fieldset dl { 
	display: block;
	margin: 1em 1em 50px 0;
}
#form_container fieldset dt { 
	display: block;
	width: 65%;
	clear: both;
	float: left;
	padding: 2em 0 0 0;
	text-align: right;
}
#form_container fieldset dt img{ 
	float: left;
	margin: -1em 1em 0 1em;
}
#form_container fieldset dd{ 
	float: left;
	margin: 2em 0.6em 0 0.6em;
}

radio buttons and drop down selection in right column

Depending on the length of the form and the amount of input elements required it may be suitable to layout the form in 2 columns. This will present the form in a less lengthy appearance - let's face it... who likes filling in seemingly endless forms?!?

In our sample form - both the browsing and surfing sections have been displayed on the right hand side of the browser section, forming a second column. By assigning each column a separate DIV - we can float the form secion next to each other, making it easier to complete.

html script |focus: right side column|

The right side column is contained within the <div id="float"> </div> tag and contains both the connection and surfing section of the form.

<form id="[identifying name]" action="[url]" method="post">
<!-- left side column -->
  <fieldset id="[identifying name]">
      <legend><!-- left side legend --></legend>
      ...
	<!-- left side elements -->
	...
      </fieldset>
    </div>
<!-- right side column -->
<div id="float">
<!-- right column, first section -->
  <fieldset id="[identifying name]">
      <legend>connection speed</legend>
      <p>what is your usual connection type?</p>
      <dl>
         <dt><label for="wireless">wireless : </label></dt>
         <dd><input name="connect" id="wireless" type="radio" value="wireless" /></dd>
         <dt><label for="lan">LAN : </label></dt>
         <dd><input name="connect" id="lan" type="radio" value="lan" /></dd>
         <dt><label for="dsl">DSL : </label></dt>
         <dd><input name="connect" id="dsl" type="radio" value="dsl" /></dd>
         <dt><label for="dialup">dialup : </label></dt>
         <dd><input name="connect" id="dialup" type="radio" value="dialup" /></dd>
      </dl>
   </fieldset>
<!-- right column, second section -->
   <fieldset id="[identifying name]">
      <legend>surfing habits</legend>
      <p>what kind of topics do you look at?</p>
      <select name="surf">
         <option selected="selected" label="none" value="none">none</option>
         <optgroup label="research">
            <option label="r_general" value="r_gen">general</option>
            <option label="r_specific" value="r_spec">specific</option>
            <option label="r_random" value="r_ran">random</option>
         </optgroup>
         <optgroup label="entertainment">
            <option label="e_music" value="e_mus">music</option>
            <option label="e_films" value="e_fil">films</option>
            <option label="e_theatre" value="e_the">theatre</option>
         </optgroup>
         <optgroup label="shopping">
            <option label="s_groceries" value="s_gro">groceries</option>
            <option label="s_books" value="s_boo">books</option>
            <option label="s_digital" value="s_dig">digital media [CD/DVD]</option>
         </optgroup>
   </select>
   </fieldset>
</form>
</div>

css script |focus: right column|

Using float: left; on the DIV tag allows the positioning of contained elements on the right hand side in a second column within the page.

/* setting up right side column  */
#float {
  float: left;
  width: 33%;
  margin: 0 80px 20px 0;
}

text areas at set size for column width

As any input text box (single line or textarea) will be by default be displayed at a width of 20 characters by any browser - it might not fit into your clean and tidy layout. To adjust the size and display of any textbox used within our form - we can take control of its appearance via CSS.

html script |focus: text input - area and single line|

Again, the left side column is contained within the <div id="float"> </div> tag with the right side column contained within the <div id="contact"> </div> tag.

To set both text inputs, the textarea on the left and the single-line textboxes on the right, to the same width of 300px - an additional class has been set up. The textarea size is set by trageting the textarea form element directly - whereas each input box has been assigned a specific class: class="singleline". Both methods are equally valid.

<form id="browser+promo" action="..." method="post">
<!-- personal -->
<div id="float">
   <fieldset id="comment">
      <legend>anything else...?</legend>
      <p>anything you'd like to comment on...</p>
      <textarea name="comment" cols="40" rows="10">  </textarea>
   </fieldset>
</div>
<div id="contact">
   <fieldset id="personal">
      <legend>keep in touch...?</legend>
      <p>let us know who you are :) [*optional]</p>
      <label for="firstname">first name*</label>
      <input name="firstname" id="firstname" type="text" class="singleline" />
      <br class="clear" />
      <label for="lastname">last name*</label>
      <input name="lastname" id="lastname" type="text" class="singleline" />
      <br class="clear" />
      <label for="url">url*</label>
      <input name="url" id="url" type="text" class="singleline" />
      <br class="clear" />
      <label for="email">email*</label>
      <input name="email" id="email" type="text" class="singleline" />
   </fieldset>
</div>
</form>

css script |focus: text input - area and single line|

By using float: left; on the DIV tags for both the left and right hand side - the 2 columns are again created, displaying both form sections side by side.

The width of the textarea has been set by setting new rules trageted at the form element itself. Make sure to be specific and write the code correctly - as shown below: #form_container fieldset textarea.
To control the width of the input boxes (single line) - a new class has been set up and applied to each text box.

/* setting up right side column  */
#float {
  float: left;
  width: 33%;
  margin: 0 80px 20px 0;
}
#form_container fieldset textarea{
  width: 300px;
  font: 1em Arial;
}
#contact {
  float: left;
  width: 40%;
  text-align: left;
}
#contact label { 
  font: 0.8em Verdana, sans-serif;
  text-transform: uppercase;	
  letter-spacing: -0.05em;
  display: block;
  width: 220px;
  border: none;
  clear: both;
  float: left;
  text-align: left;
}
.singleline {
  width:300px;
}

reset / submit buttons customised with image

And why stop here....!? - We can now also style the reset and submit buttons by changing their default appearance. You could experiment with different colours and border styles as well as adding a background image as shown here.

html script |focus: reset / submit buttons|

Each button has now been given a new class - class="butt" which can then be used to control the buttons' display and appearance within the form.

<form id="browser+promo" action="..." method="post">
<!-- submit/reset -->
<div id="float">
	<input id="button1" type="submit" value="Send" class="butt" />
</div>
<div id="float">
	<input id="button2" type="reset" class="butt" />
</div>		
</form>

css script |focus: reset / submit buttons|

Here the buttons have been re-styled to suit the overall design of the form. The .butt rules set the size width of 300px as the textboxes previously, set the font styling, customise the borders and add a background image.

/* setting up right side column  */
.butt {
  width:300px;
  display: block;
  float: left;
  font: 1em Arial;
  letter-spacing: -0.05em;
  font-weight: bold;
  text-transform: uppercase;
  background: #fff url(../images/form2_bits/butt.jpg) top left no-repeat;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #333;
  border-right: 1px solid #333;
}

Now you should know some techniques on how to design user-friendly as well as stylish form for your websites.
Admittedlly, not all of these methods will suit all forms - but you will now have a better understanding of what can be done...

reference links

for articles and more in-depth infomration - have a look at the links below: