 while they may not be that pretty forms are one of the most important parts of a web site i have already written an article on css forms that was over a year ago and i have developed much better techniques there are other great resources for information about form design and i will take this information into account when i am showing the flexibility of my method of marking up and styling forms the markup after previously using a definition list to mark up my forms i have switched to using an ordered list now i switched for two main reasons the list item of the ordered list provides a containing clearing element that the definition list does not provide semantically it just makes more sense a form is really just a list of form fields to fill out forms are typically meant to be filled out in order hence the ordered list instead of un ordered list i think this could be debated but in the long run either one is more semantic than anything else i have decided to create just a simple un styled form to use as an example here is what the markup of the page is ol class= forms lilabel for= name name labelinput type= text name= name id= name li lilabel for= email email labelinput type= text name= email id= email li lilabel for= city city labelinput type= text name= city id= city li lilabel for= state state labelinput type= text name= state id= state li lilabel for= zip zip labelinput type= text name= zip id= zip li li class= grouping labelsign up for the following label ul liinput type= checkbox name= info1 id= info1 label for= info1 information 1 label li liinput type= checkbox name= info2 id= info2 label for= info2 information 2 label li liinput type= checkbox name= info3 id= info3 label for= info3 information 3 label li ul li lilabel for= message message labeltextarea name= message id= message textarea li li class= buttons button type= submit name= submit id= submit submit button li ol even without any style applied the form is still completely usable styling the forms there are really 3 main styles of laying out forms labels above the form field labels to the side of the form field jagged right labels to the side of the form field jagged left again like i said i am not going to go through the pros and cons of each method i am going to show how easy it is to switch between the methods using my markup labels above the form field this is by far the easiest method here is the css used to style my example form ol forms float left list style none width 100% ol forms li clear both float left margin 0 0 10px width 100% ol forms label cursor pointer display block font weight bold ol forms input ol forms textarea font inherit padding 2px width 300px ol forms textarea height 250px ol forms li grouping margin bottom 0 ol forms li grouping ul list style none ol forms li grouping ul label display inline font weight normal margin 0 0 0 10px ol forms li grouping ul input width auto really nothing too complicated in my opinion i dont like stacking the label over the form field i think it just makes the form too long labels to the side of the form field jagged right i like this layout of forms the best i think it presents the form in a clear way so that you can just scan right through the form fields with just a few changes to the css you can float the labels to the left of the form fields the changes are marked in bold ol forms float left list style none width 100% ol forms li clear both float left margin 0 0 10px width 100% ol forms label cursor pointer display block strongfloat left strong font weight bold strongmargin 0 10px 0 0 width 90px strong ol forms input ol forms textarea font inherit padding 2px width 300px ol forms textarea height 250px strongol forms li grouping label margin 0 width auto strong ol forms li grouping margin bottom 0 ol forms li grouping ul list style none strongmargin left 100px strong ol forms li grouping ul label display inline strongfloat none strong font weight normal margin 0 0 0 10px strongwidth auto strong ol forms li grouping ul input width auto strongol forms li buttons float none margin left 100px width auto strong take a look at the example with the fields on the left depending upon your label length you may need to increase the width of the labels so that it does not span more than one line but that is an easy enough change labels to the side of the form field jagged left now with two changes to the css you can easily switch to having the labels jagged left which puts them closer to the form input the changes needed are highlighted in bold ol forms label cursor pointer display block float left font weight bold margin 0 10px 0 0 strongtext align right strong width 90px ol forms li grouping label margin 0 strongtext align left strong width auto here is the example of the form with the labels jagged left taking it a step further with more css and a little jquery since i like the form layout with labels to the side and jagged right i am going to use this one to customize the display a little and then add in some jquery functionality improving the display when looking at the form it may be confusing to have all form fields be the same width it is helpful to the user to modify the width to suit the data that will be entered for example there is no reason that the zip code city and state fields should be so long so lets add a class to each one to shorten it to the length of the data that will probably be entered here is the modified markup li label for= city city label input type= text name= city id= city class= medium li li label for= state state label input type= text name= state id= state class= small li li label for= zip zip label input type= text name= zip id= zip class= extrasmall li then we just have to add those 3 classes to the css ol forms extrasmall width 50px ol forms small width 100px ol forms medium width 150px here is what the form looks like with that little bit of extra style i also added in some help text a notation for required fields and the associated css so take a look at the code to see that adding a little jquery obviously you have read my article about ajax forms with jquery which discusses how to add ajax functionality to a form in a degradable way so the following code assumes that you are going to be doing server side validation of the form as well since there are required fields in this form i add a class of required to the form and to each parent list item of required input fields first we want our javascript to execute when the form with a class of required is submitted $ document ready function $ form required submit function hellip if there are any error messages still displaying from before we want to hide them also lets disable the submit button so just in case the form cannot be submitted twice i am also creating a variable that i will be using later to determine if there is an error or not $ document ready function $ form required submit function strong$ form required span error remove $ form required li buttons button attr disabled disabled var haserror = false strong now we want to check each form field that has a parent list item with a class of required $ document ready function $ form required submit function $ form required span error remove $ form required li buttons button attr disabled disabled var haserror = false strongjquery each $ form required ol forms li required function hellip strong there are a lot of other jquery plugins that validate forms but most of the time it will just alert the user that the field is required instead of doing that i am going to grab the text from the label element and display that in the error message $ document ready function $ form required submit function $ form required span error remove $ form required li buttons button attr disabled disabled var haserror = false jquery each $ form required ol forms li required function strongvar labeltext = $ this children label text labeltext = labeltext replace strong now we have two different structures of form fields for each list item a single form field and a grouping of checkboxes or radio buttons we have to do things a little bit different for each one $ document ready function $ form required submit function $ form required span error remove $ form required li buttons button attr disabled disabled var haserror = false jquery each $ form required ol forms li required function var labeltext = $ this children label text labeltext = labeltext replace strongif $ this hasclass grouping hellip else hellip strong first lets focus on the case when there is a grouping we want to loop through each input and see if it is checked if it is we just increment a counter then if the counter equals zero meaning we have no fields checked we display an error message $ document ready function $ form required submit function $ form required span error remove $ form required li buttons button attr disabled disabled var haserror = false jquery each $ form required ol forms li required function var labeltext = $ this children label text labeltext = labeltext replace if $ this hasclass grouping strongvar numselected = 0 jquery each $ this find input function if $ this attr checked == true numselected if numselected == 0 $ this append span class= error you must select from labeltext span haserror = true strong else hellip that seems easy enough and its even easier for the single input fields we just check to see if the value is empty and if it is display the error message $ document ready function $ form required submit function $ form required span error remove $ form required li buttons button attr disabled disabled var haserror = false jquery each $ form required ol forms li required function var labeltext = $ this children label text labeltext = labeltext replace if $ this hasclass grouping var numselected = 0 jquery each $ this find input function if $ this attr checked == true numselected if numselected == 0 $ this append span class= error you must select from labeltext span haserror = true else strongif jquery trim $ this children input textarea val == $ this append span class= error please enter your labeltext span haserror = true strong to finish up we just check to see if the haserror variable is true since this is just a demo form i just add an alert if the form would submit successfully $ document ready function $ form required submit function $ form required span error remove $ form required li buttons button attr disabled disabled var haserror = false jquery each $ form required ol forms li required function var labeltext = $ this children label text labeltext = labeltext replace if $ this hasclass grouping var numselected = 0 jquery each $ this find input function if $ this attr checked == true numselected if numselected == 0 $ this append span class= error you must select from labeltext span haserror = true else if jquery trim $ this children input textarea val == $ this append span class= error please enter your labeltext span haserror = true strongif haserror $ form required li buttons button removeattr disabled return false else alert the form would submit now $ form required li buttons button removeattr disabled remove this line if using for real return false change this to true when using it for real strong go ahead and take a look at the demo form to see it in action conclusion with a well structured form you can easily customize it to your liking with just a little bit of css then by using some custom jquery code you can easily customize how you would like to have the form validation appear with a little more work you could easily add in validation for things like form elements expecting an email address zip codes phone numbers etc i will have to save that for another post since this one is quite long what do you all think how do you structure your forms which layout of forms do you prefer and why 