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
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
web page we've created called form_layout.html. This is in
folder that came with this book. (If you haven't got the extra files
download location is here, under the heading Web Design - New
: Download the Extra Files needed for
this course (You don't need the downloads for the old course.)
When you open up the above page, you'll see a form that looks like
The form elements are nicely lined up on the left, and the right
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
to get the layout we wanted. We've also added CSS style with class
"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
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
cell of the second row. So we "SPAN" this cell across 3
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