how to layout forms with css

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 (AT) roderik (DOT) 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

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 (AT) roderik (DOT) 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 (AT) comcast (DOT) net> wrote:

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.

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 (AT) tiscali (DOT) nl> wrote:

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... :-)

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 (AT) yahoo (DOT) com> wrote:

On 25 Aug 2004 21:38:47 GMT, Els <els.aNOSPAM (AT) tiscali (DOT) nl> wrote:
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.

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:44:13 -0400, Neal
neal413 (AT) yahoo (DOT) com> wrote:

On 25 Aug 2004 21:38:47 GMT, Els <els.aNOSPAM (AT) tiscali (DOT) nl
wrote:
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.

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 <neal413 (AT) yahoo (DOT) com> wrote:

On Wed, 25 Aug 2004 17:17:27 -0400, Harlan Messinger
h.messinger (AT) comcast (DOT) net> wrote:


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.

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.

The purpose of a TABLE is to present tabular data. "Data" can be
anything, including user-entered data or places for them to enter it.
The first paragraph of the Tables section of the spec:

"The HTML table model allows authors to arrange data -- text,
preformatted text, images, links, forms, form fields, other tables,
etc. -- into rows and columns of cells."


--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

On Thu, 26 Aug 2004 01:20:53 -0400, Harlan Messinger
<hmessinger.removethis (AT) comcast (DOT) net> wrote:

Neal <neal413 (AT) yahoo (DOT) com> wrote:

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.

The purpose of a TABLE is to present tabular data. "Data" can be
anything, including user-entered data or places for them to enter it.
The first paragraph of the Tables section of the spec:

"The HTML table model allows authors to arrange data -- text,
preformatted text, images, links, forms, form fields, other tables,
etc. -- into rows and columns of cells."

I was just thinking about Barry Pearson too. In his honor, I'll start
from the start.

The definition describes damn near anything. Even tabular layout. The
definition isn't that good. The only way to make sense of it is to look at
the element's name, table.

Clearly, img is meant to deliver an image, not some other object. And form
is obviously for a form. Their descriptions in the W3C documentation
reflect these roles.

Therefore, it's sensible to deduce that it "allows authors to arrange data
.... into rows and columns of cells" only if it's a table. And so we must
look at what tables are in real life.

Most definitions I see describe a table as a "relational database system"
- which is to say, all the row items have something unique in common, and
all the columns have something - the same thing - in common with each row.
And, it implies that it's meant for providing a relationship to the viewer.

Now, is the form we've been discussing a table? Some have argued basically
that it's a chart of rows relating to specific input content, comparing
the author's queries and the user's responses. I guess I am seeing tables
as being meant to communicate this relationship to the user, not as merely
a relationship that develops through the user's interaction. An HTML
table's purpose is to deliver information based in relations of data to a
curious user, not to simply act as an egg carton, holding whatever data
relationships we or a random user chooses to plug in. The table element no
longer seems to have a semantic approach, but becomes simply a rendering
device to align stuff we have a hard time with otherwise - which is
exactly the slippery slope we all want to avoid!

Maybe my view is in error, I'll have to ponder it. Never really gave it
much thought before now. But then again, maybe it's not...