Laying out your HTML Forms

Aligning form elements can be very tricky. You might think CSS would make life easier, but it doesn't. You can use the CSS position property with the values static, relative, absolute, and fixed. But even then, after long hours of frustration, you'd find that not all browsers render your form correctly.
To position form elements, then, a Table is often used. Take a look at the web page we've created called form_layout.html. This is in the extra_files/layouts folder that came with this book.

When you open up the above page, you'll see a form that looks like this:

The form elements are nicely lined up on the left, and the right (except for the last name text box).
Open up the HTML code for the page and you'll see this:

The TABLE tags are the ones to concentrate on. We've used COLSPAN a lot, here, to get the layout we wanted. We've also added CSS style with class name like "R1C1". (This just means Row 1, Column1.)
Essentially, though, we had a table that had 4 columns and 5 rows. To get the Email row we have two TD tags inside a pair of TR tags. The first TD is just the text "EMAIL", with some styling applied. The second one uses COLSPAN=3. If we didn't do this then the email text box would be squashed into the second cell of the second row. So we "SPAN" this cell across 3 columns. The rest of the table uses the same COLSPAN manipulation.
The Stylesheet for the HTML is called form_layout_1.css. Take a look at the CSS code and see if you can figure out what's going on (it's in the extra_files/css folder. It might help to make a copy of this file, and the experiment with it by changing the values to see what happens.
For some more ideas and help with your form design, these pages are worth a look:

http://designshack.co.uk/articles/10-css-form-examples
http://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/
http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
http://skyje.com/2010/05/web-form-design/

In the next section, we'll move on to the HTML 5 VIDEO tag.

Posted in: Tips,Trick,Tutorial,Web Design,Web Design 9 (HTML5 and Forms)