What is the recomended method for Laying out HTML forms?

[Owen Brunker]

DIVs decidedly makes life easier in most layouts. But laying out forms is
still time consuming. I'm currently using the following technique to layout
the labels

<div style="clear: both;">
<div style="float: left; etc">
<label> ...</label>
</div>
<div style="float: left; etc">
<input>
</div>
</div>

I dont see any real difference between what I have done above when compared
with the following

<table>
<tr>
<td><label>...</label></td>
<td><input></td>
</tr>
</table>

Am I on the right track with this?

What are others doing in this area?

Thanks
Owen Brunker

 

[Els]

DIVs decidedly makes life easier in most layouts. But laying out forms is
still time consuming.

When trying to do it with divs and floats, yes.

What are others doing in this area?

For forms, I use tables.

 

[Travis Newbury]

For forms, I use tables.

BLASPHEMY!!!!

 

[Els]

BLASPHEMY!!!!

I can do worse than that: I've recently built a site that had...
Flash in it!

 

[C A Upsdell]

I dont see any real difference between what I have done above when compared
with the following

<table>
<tr>
<td><label>...</label></td>
<td><input></td>
</tr>
</table>

Am I on the right track with this?

I would go with the table in this case, but change the first column to
TH instead of TD.

 

[place57]

I can do worse than that: I've recently built a site that had...
Flash in it!

Flash is the Saviour of the internet... (o_0)

 

[Adrienne Boswell]

DIVs decidedly makes life easier in most layouts. But laying out
forms is still time consuming. I'm currently using the following
technique to layout the labels

<div style="clear: both;">
<div style="float: left; etc">
<label> ...</label>
</div>
<div style="float: left; etc">
<input>
</div>
</div>

Too complicated, IMHO. See below.

I dont see any real difference between what I have done above when
compared with the following

<table>
<tr>
<td><label>...</label></td>
<td><input></td>
</tr>
</table>

You _could_ do that, but ...

Am I on the right track with this?

See below.

What are others doing in this area?

<form method="post" action="whatever">
<fieldset><legend>Section or form title</legend>
<label for="field1" id="field11">Field1 </label> <input type="text"
name="field1" id="field1"><br>
<label for="field2" id="field21">Field2 </label> <input type="text"
name="field2" id="field2"><br>
<input type="submit" value="Submit">
</fieldset>
</form>

CSS:
label {display:block; float:left; width: 7em; text-align: right; margin-
right:1em;}
form br {clear:left}

With scripting, you can give the user a visual indication that a
required field is missing, like so:

CSS (if field1 were is missing perhaps)
#field11 {background-color:#ffff00; color: #ff0000} /*red on yellow*/
#field1 {background-color: #ffc0cb; color: #000} /*black on pink */

Have a look at [http://intraproducts.com/usenet/requiredfields.asp].
It's in ASP Classic but can easily be used by any other scripting
language.

 

[mrcakey]

I can do worse than that: I've recently built a site that had...
Flash in it!

Let's start a breakaway group: alt.html.heretics!!!

+mrcakey

 

[Els]

Let's start a breakaway group: alt.html.heretics!!!

Sure you don't mean alt.html.erratics ? ;-)

 

[mrcakey]

Sure you don't mean alt.html.erratics ? ;-)

Let's do that too!

+mrcakey

 

[Jonathan N. Little]

DIVs decidedly makes life easier in most layouts. But laying out forms is
still time consuming. I'm currently using the following technique to layout
the labels

<div style="clear: both;">
<div style="float: left; etc">
<label> ...</label>
</div>
<div style="float: left; etc">
<input>
</div>
</div>

First of all you do know that label & input elements are inline by
default so there is no need float...

<div>
<label for="fn">First Name:</label>
<input id="fn" name="fn" type="text">
</div>
<div>
<label for="ln">Last Name:</label>

I dont see any real difference between what I have done above when compared
with the following

<table>
<tr>
<td><label>...</label></td>
<td><input></td>
</tr>
</table>

But then again form data is usually name-value pairs so you can make
that case that the relationship of the label to the input field is
tabular. A two column table, label (name) column and an input (value)
column.

Lets straighten out a common misconception, using CSS stylesheets does
*not* mean tables are no longer valid. If it's tabular then use a table
for heavens sake! What you should not do is use a table (and nested
tables) as a framework to 'hang' a webpage, i.e., place a logo here and
a menu there...

 

[Els]

First of all you do know that label & input elements are inline by
default so there is no need float...

Unless you want the input elements to line up nicely.

Lets straighten out a common misconception, using CSS stylesheets does
*not* mean tables are no longer valid. If it's tabular then use a table
for heavens sake! What you should not do is use a table (and nested
tables) as a framework to 'hang' a webpage, i.e., place a logo here and
a menu there...

Exactly.

 

[mrcakey]

Owen Brunker wrote:

Lets straighten out a common misconception, using CSS stylesheets does
*not* mean tables are no longer valid. If it's tabular then use a table

Hear hear!

+mrcakey

 

[Jonathan N. Little]

Hear hear!

Just been a bit frustrating seeing noobs go through all kinds of
gyrations to avoid tables. They're either doing that or the other
extreme of nested tables, colspan and rowspan monsters! Why always
either|or? Where are they getting these ideas?

 

[Beauregard T. Shagnasty]

Where are they getting these ideas?

They never heard the words "tabular data" before?

Or saw Dr. Codd at a conference?

 

[Chris F.A. Johnson]

Flash is the Saviour of the internet... (o_0)

...and should be crucified?

 

[Jonathan N. Little]

They never heard the words "tabular data" before?

Or saw Dr. Codd at a conference?

Must be dense today--not sure what you mean?

 

[Beauregard T. Shagnasty]

Must be dense today--not sure what you mean?

http://en.wikipedia.org/wiki/Edgar_F._Codd

He is the gentleman usually considered the "Father of Relational
Database Theory." See other links there as well: the 12 Rules, Database
Normalization, etc. My databases are always 3NF.

 

[Neredbojias]

...and should be crucified?

Nope, quartered and cremated. You wouldn't want to take a chance on a
resurrection, would you? <g>

 

[Owen Brunker]

Just been a bit frustrating seeing noobs go through all kinds of gyrations
to avoid tables. They're either doing that or the other extreme of nested
tables, colspan and rowspan monsters! Why always either|or? Where are they
getting these ideas?

Thankyou for clearing this up Jonathan.

By the way, where did I get the ideas from? From mis-interpreting the flack
that others get when they use tables instead of divs. ;-))

Seriously though, this has cleared up a misconception that I have had.

Cheers
Owen Brunker