Hi,

Since the good support of CSS we shouldn't use tables for layout. And I
am quite far in using divs and styling elements to position them without
the use of tables.
I was wondering how we could layout forms without tables so we would
have each input text field below each other.

for example:
NAME:     INPUT FIELD
PASSWORD: INPUT FIELD

Any suggestions?

--
http://www.archytas.nl/
webdesign, internet applicaties, internetgestuurde elektronica

"Roderik" <mail@roderik.net> wrote in message
news:412cfe13$0$62368$5fc3050@dreader2.news.tiscali.nl...
> Hi,
>
> Since the good support of CSS we shouldn't use tables for layout. And I
> am quite far in using divs and styling elements to position them without
> the use of tables.
> I was wondering how we could layout forms without tables so we would
> have each input text field below each other.
>
> for example:
> NAME:     INPUT FIELD
> PASSWORD: INPUT FIELD

I'm of the camp that says that this is a tabular arrangement: labels in one
column, user input in another. So go ahead a use a table if you want.

Otherwise, float the labels to the left using CSS. (Code below is untested.)

label { float: left; width: 20em; padding-right: 1em; }
...
<div><label for="userName">User name:</label><input type="text"
name="userName" value=""></div>
...

On Wed, 25 Aug 2004 23:01:06 +0200, Roderik <mail@roderik.net> wrote:

> Hi,
>
> Since the good support of CSS we shouldn't use tables for layout. And I
> am quite far in using divs and styling elements to position them without
> the use of tables.
> I was wondering how we could layout forms without tables so we would
> have each input text field below each other.
>
> for example:
> NAME:     INPUT FIELD
> PASSWORD: INPUT FIELD
>
> Any suggestions?

No CSS needed to do this.

<div><label for="realname">Your Name (required):</label><input type="text"
name="realname" id="realname"></div>
<div><label for="email">Email Address (required):</label><input
type="text" name="email" id="email"></div>

If you want to put the input field over to a specific spot, try this CSS
on the above HTML.

form div {position: relative;}
form div label {width: 12em;}
form div input {position: absolute; left: 13em;}

On Wed, 25 Aug 2004 17:17:27 -0400, Harlan Messinger
<h.messinger@comcast.net> wrote:

 
>
> I'm of the camp that says that this is a tabular arrangement: labels in
> one
> column, user input in another.

But isn't the purpose of a table to offer a comparison amongst the data? I
think a table needs columns and rows which compare similar data, but this
isn't for that purpose really.

Of course, I won't shoot you.

Neal wrote:

[form layout]

> No CSS needed to do this.
>
> <div><label for="realname">Your Name
> (required):</label><input type="text" name="realname"
> id="realname"></div> <div><label for="email">Email Address
> (required):</label><input type="text" name="email"
> id="email"></div>
>
> If you want to put the input field over to a specific spot,
> try this CSS on the above HTML.
>
> form div {position: relative;}
> form div label {width: 12em;}
> form div input {position: absolute; left: 13em;}

Here's me thinking: "this sounds so easy, but I'm sure it was a
heck of a lot more complicated when I tried it once" ...
Then I realised that was cause I wanted the labels right
aligned... :-)

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

On 25 Aug 2004 21:38:47 GMT, Els <els.aNOSPAM@tiscali.nl> wrote:

> Neal wrote:
>
> [form layout]
> 
>
> Here's me thinking: "this sounds so easy, but I'm sure it was a
> heck of a lot more complicated when I tried it once" ...
> Then I realised that was cause I wanted the labels right
> aligned... :-)
>

form div {position: relative;}
form div label {display: block; width: 10em; text-align: right;}
form div input {position: absolute; top: 0; left: 13em;}

Works in Opera and IE.

On Wed, 25 Aug 2004 17:44:13 -0400, Neal <neal413@yahoo.com> wrote:

> On 25 Aug 2004 21:38:47 GMT, Els <els.aNOSPAM@tiscali.nl> wrote: 
>
> form div {position: relative;}
> form div label {display: block; width: 10em; text-align: right;}
> form div input {position: absolute; top: 0; left: 13em;}
>
> Works in Opera and IE.

Until you change text size in IE, dammit.

This fixes that.

form div {position: relative; font-size: 100%;}
form div label {display: block; width: 10em; text-align: right;}
form div input {font-size: 100%; position: absolute; top: 0; left: 13em
;}

Neal wrote:

> On Wed, 25 Aug 2004 17:17:27 -0400, Harlan Messinger
> <h.messinger@comcast.net> wrote:
> 
>
> But isn't the purpose of a table to offer a comparison amongst the data?

I believe it's more intended to show a relationship between data in
associated cells, which is not the same thing. In this case, the left
column might even be considered a header (<th scope="row"> ) and the
input field the corresponding data.

WFM, YMMV

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

Neal wrote:

> On Wed, 25 Aug 2004 17:44:13 -0400, Neal
> <neal413@yahoo.com> wrote:
> 

What does it do in other browsers?
(too lazy to try - I'm happy with my little tabled form)

> Until you change text size in IE, dammit.

<g>

> This fixes that.
>
> form div {position: relative; font-size: 100%;}
> form div label {display: block; width: 10em; text-align:
> right;} form div input {font-size: 100%; position:
> absolute; top: 0; left: 13em;}

Looks easy, and looks like it could work, but I'm sure I've
seen a far more complicated version, not sure if that had a
good reason or was just plain over the top. I think every row
had a div around it, then both the label and the input had a
div each, and there was floating somewhere too.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Neal wrote:
> Harlan Messinger wrote:
> 
>
>
> But isn't the purpose of a table to offer a comparison amongst the
> data?

It can be. But I think your definition is a tad too narrow.

> I think a table needs columns and rows which compare similar data,

A table should present information that can be related. My test: if the
data is rearranged, can the user still make sense of the data? With
layout tables, yes. With form data, the answer is no. To me, that says a
table is appropriate for a form.

> Of course, I won't shoot you.

Well, that's good!  :-)

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/