Stylesheets - how to layout forms with css

Author

how to layout forms with css

Roderik

2004-08-26, 12:28 pm

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

Harlan Messinger

2004-08-26, 12:28 pm

"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>
....

Neal

2004-08-26, 12:28 pm

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;}

Neal

2004-08-26, 12:28 pm

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.

Els

2004-08-26, 12:28 pm

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 -

Neal

2004-08-26, 12:28 pm

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.

Neal

2004-08-26, 12:28 pm

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;}

kchayka

2004-08-26, 12:28 pm

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.

Els

2004-08-26, 12:28 pm

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)
[color=darkred]
> 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 -

Brian

2004-08-26, 12:28 pm

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/

Brian

2004-08-26, 12:28 pm

Neal wrote:

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

What a simple idea. I've always floated the label, but given all the css
float bugs, I wonder if this isn't a better solution.

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

Brian

2004-08-26, 12:28 pm

Neal wrote:

> On Wed, 25 Aug 2004 17:44:13, Neal wrote:
>
>
> Until you change text size in IE, dammit.

Second time this has come up tonight.

> This fixes that.
>
> form div {position: relative; font-size: 100%;}

Yep. If you're going to do anything fancy layout-wise, you're best
off setting font-size: 100% in body.

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

Harlan Messinger

2004-08-26, 12:28 pm

Neal <neal413@yahoo.com> 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
>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.

Neal

2004-08-26, 12:28 pm

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

> Neal <neal413@yahoo.com> wrote:
>
>
> 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. :D

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

Harlan Messinger

2004-08-26, 12:28 pm

Neal <neal413@yahoo.com> wrote:

>On Thu, 26 Aug 2004 01:20:53 -0400, Harlan Messinger
><hmessinger.removethis@comcast.net> wrote:
>
>
>I was just thinking about Barry Pearson too. ;) In his honor, I'll start
> from the start. :D
>
>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.

I agree with all of that, and it's fully applicable to the arrangement
of data labels and entry fields.

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

I see no need to add that requirement to the definition of a table.
We're talking about a set of ordered pairs, (label, entry field), and
if you don't want to think of the fields as data, then the information
that the user will enter into them *is* data. Why would table-ness
depend on *who* enters the data into each cell?

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

Data is data, no matter who plugs it 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!

I don't see this as a consequence of using tables to arrange a form as
we have been discussing..

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

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