CSS and FORM's.

I've actuall never liked tables, but having been critisized for not using them
has gotten me into the bad habit of using tables too much. (I like using
the H* tags)

Now I'm trying to get back to non-tables using CSS, the issue of lining
up form fields has cropped up.

Where I do this in tables:

<TABLE>
<TR><TH COLSPAN="2">My title</TH</TD>
<TR><TH>Field Name</TH><TD><INPUT ...></TD></TR>
<TR><TH>Field Longer Name</TH><TD><INPUT ...></TD></TR>
</TABLE>

I want to do this:

<DIV CLASS="form">
<H2 CLASS="formTitle">My title</H2>
<DIV CLASS="formField"><LABEL>Field Name</LABEL><INPUT ..></DIV>
<DIV CLASS="formField"><LABEL>Field Longer Name</LABEL><INPUT ..></DIV>
</DIV>

So far, so good, but "Field Name" and "Field Longer Name" are jagged and
don't line up with the INPUT/SELECT/TEXTAREA very well. I've tried margins
and padding, but it seems to be very fragile, depending on the longest field
label.

Whats more, in some cases, I don't know the field label lengths or the
type of input element in advance. (They are dynamically generated and
can be multi-line textareas or select boxes.)

Is there a modern CSS way that's as stable as a table when the fields
aren't revealed until the page is displayed?

Jamie
--
http://www.geniegate.com Custom web programming
User Management Solutions Perl / PHP / Java / UNIX

Once upon a time, far far away, the king summoned nospam@geniegate.com
who replied:

>
>Is there a modern CSS way that's as stable as a table when the fields
>aren't revealed until the page is displayed?

I don't think so, but Grey or Brucie may interject and prove me wrong.

Matt

--
The Probert Encyclopaedia - Beyond Britannica
http://www.probertencyclopaedia.com

On Mon, 20 Dec 2004 07:58:24 GMT, Matt Probert
<comments@probertencyclopaedia.com> wrote:

> Once upon a time, far far away, the king summoned nospam@geniegate.com
> who replied:
>
>>
>> Is there a modern CSS way that's as stable as a table when the fields
>> aren't revealed until the page is displayed?
>
> I don't think so, but Grey or Brucie may interject and prove me wrong.

Forms can be tables if laid out properly. Field label in one column and
input element in the next column. It makes sense. I use it for the input
form for my Forum and Blog scripts:

http://www.greywyvern.com/forum.php#of_postform
http://www.greywyvern.com/blog.php?msg=4#ob_postform

The trouble comes when you start using table cells to place input elements
and field labels in arbitrary locations that only "look" nice and have no
logical order in the source.

Grey

--
The technical axiom that nothing is impossible sinisterly implies the
pitfall corollory that nothing is ridiculous.
- http://www.greywyvern.com - Orca Knowledgebase: Completely CSS styleable
Knowledgebase/FAQ system

Matt Probert <comments@probertencyclopaedia.com> wrote:
> Once upon a time, far far away, the king summoned nospam@geniegate.com
> who replied:
>
>>
>>Is there a modern CSS way that's as stable as a table when the fields
>>aren't revealed until the page is displayed?
>
> I don't think so, but Grey or Brucie may interject and prove me wrong.

So far, the best I've found is:

<H2>Form title</H2>
<DL>
<DT>Label</DT>
<DD><INPUT|SELECT|TEXTAREA .. ></DD>
</DL>

I kind of like that style, it's what I used to use before tables. Is that
(combined with CSS) something thats comming back into style?

Jamie
--
http://www.geniegate.com Custom web programming
User Management Solutions Perl / PHP / Java / UNIX

GreyWyvern <spam@greywyvern.com> wrote:
> The trouble comes when you start using table cells to place input elements
> and field labels in arbitrary locations that only "look" nice and have no
> logical order in the source.

Thats the second trouble, it's possible to do forms w/out tables.
Found this article, among others:

http://www.alistapart.com/articles/practicalcss/

It sort of works, assuming it's OK to wrap longer field names. (I believe
it is in this case)

However, when you want to get a little fancier, such as

Action: <SELECT ... /> Id: <INPUT ... /> <INPUT TYPE="SUBMIT" ../>

All on one line, the CSS stuff starts to get mangled, requiring more
cruft in your style sheet to deal with it. (I'd like to make all forms
belong to the same class when possible, otherwise there'll be dozens
of classes to keep track of, making changes difficult)


Jamie
--
http://www.geniegate.com Custom web programming
User Management Solutions Perl / PHP / Java / UNIX