Bill Hughey on Monday, September 08, 2003 5:46 PM said:
: In reply to a question about forms and css I got several replies
: that showed how you would layout something like
:: <div> <label/> <input/> <span/> <input/> <span/> >/div>
:: This involved 'floating' the first label to the left and
: specifying its width. This made the rest line up nicely,
: however, my more difficult forms are of the form below.
:: header
: input label input label
: input label input label
: .....
: input label input label
:<snip />
Bill,
I think I was one of the folks who pointed you at the ALA method
for laying out forms with CSS... that said, I have to agree with
Dan, tables are *not* bad. For complicated forms, I still use tables
and still think it's a proper semantic usage. The goal of CSS is to
separate design from content, which in this case the tables don't
hinder, they can even help in the employment of CSS on forms. A well
marked up table offers low level structured (albeit somewhat rigid)
presentation whose high level presentation can be readily affected by
CSS. Take the following example:
<form method="post" action="#" id="contact">
<table>
<thead>
<tr>
<th colspan="4">Contact Our Company</th>
</tr>
</thead>
<tbody>
<tr>
<td>First Name: </td>
<td><input type="text" name="fname" /></td>
<td>Last Name: </td>
<td><input type="text" name="lname" /></td>
</tr>
<tr>
<td>Other Stuff: </td>
<td><input type="text" name="fname" /></td>
<td>More Stuff: </td>
<td><input type="text" name="lname" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<input type="reset" value="Reset" />
<input type="submit" value="Submit" />
</td>
</tr>
</tfoot>
</table>
</form>
A layout like this actually takes less hooks in your code than its
equivalent using divs, spans, ids and classes to successfully employ
CSS on a form. Set something like that as your standard coding
practice and you even get around IE gotchas with CSS for forms like
its lack of attribute selectors... thus if all of your submit
buttons are always in the <tfoot>, you don't have to apply a separate
style to have a different look for text inputs than your buttons.
e.g.:
table#contact input{
border:1px inset;
color: #003399;
background: #dedede;
}
table#contact tfoot input{
border: 1px outset;
}
I went through a fairly long period of being caught up in the hype
and trying not to use tables for anything, before I realized that the
same argument against /over/ use of tables is an argument *for* proper
use of well marked up tables where appropriate.
Anyway, I hope this helps,
Stephen Caudill
http://www.mechavox.com/