June 2009 Archives

A friend of mine recently asked me about creating forms with XHTML/CSS and since I've been recycling some simple form code for a while now I thought I'd share it.  I've also seen a lot of sites that are standards-compliant that still use tables to layout their forms when it's not all that difficult to do it with some CSS... so here's a basic demo.

First off, we'll have some HTML for our form... Basically what we're going to do is wrap our form fields and labels (because all fields need associated labels) in some div and span tags which we'll then style with CSS.

    

        

            First Name:
            
        
        

            Last Name:
            
        
        

            Email:
            
        
        

            Zip:
            
        
        

            
            
                I would like to be contacted periodically to receive more information.
            
        
        

             
            
                
            
        
    

Next we'll use some CSS to float the labels and form fields next to each other and give them a simple background color.

div.formRow { width: 550px; overflow: hidden; clear: both; margin: 0 0 3px 0; padding: 5px 0; font-size: 12px; background: #efefef; }
	div.formRow span.formLabel { width: 125px; font-weight: bold; text-align: right; float: left; }
	div.formRow span.formControl { width: 405px; text-align: left; float: right;  } 
	div.formRow textarea { width: 300px; height: 120px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
	div.formRow input.formButton { background: #666; font-weight: bold; color: #fff; }
	div.formRow label { display: inline !important; }
	.currentRow { background: #ffc !important; }

Lastly, we'll use a simple jQuery function to highlight the row of the form field you're in. This works by applying/removing a CSS class when you click in/out of form elements. I use a class of "focusable" on the form field itself as the selector for jQuery to find and apply the function.

	$(function(){
		$('.form .focusable').focus(function(){
			$(this).parents('.formRow').addClass("currentRow");
		}).blur(function(){
			$(this).parents('.formRow').removeClass("currentRow");
		});
	});

That's it. Note that this is a pretty simple example. It doesn't include any validation or tooltip descriptors of form fields and certainly isn't meant to be the definitive guide on CSS forms. It's just some simple code that you can use a starting point to get a nice looking form up very very quickly.

See a demo of this CSS form code in action.

I've blogged before about services such as BrowserCam which you can use to test your websites across browsers and platforms. Screen capture services are increasingly hard to use since many websites these days rely on JavaScript and AJAX functionality which can't be tested by a screenshot. Remote access solves that problem but that can often be time consuming and tedious. Wouldn't it be great if you could just run the browser on your machine?

Thanks to Xenocode's browser sandbox you can do just that. Xenocode is an application virtualization system that allows developers to make their applications available in virtual executables that can be deployed pretty much anywhere, such as via the web or on a USB key. It's pretty cool technology and as a showcase, they currently have a browser area where you can run multiple browsers simultaneously without having to install them on your machine.

This browser sandbox doesn't have the myriad of browser/platform combinations that BrowserCam offers but let's face facts... most of us developers spend the majority of our time trying to make sure that our sites and apps work in IE6. Xencode will let you open IE6 (as well as 7 and 8) right on your desktop so that you can easily test, tweak, and troubleshoot your code. It's a great asset to any developer's toolbox.

Visit the Xenocode Browser Sandbox