Stylesheets - Emulating the Tab key

Author

Emulating the Tab key

John Dann

2004-04-28, 5:35 pm

I appreciate this is probably a fairly basic CSS question, but if
anyone is feeling charitable, maybe they would point me in the right
direction:

I'm trying to create a form on a web page and want to have a series of
text boxes for input with an appropriate label to the left of each
box. For a neater appearance, I'd like the left hand edge of each of
the input boxes to line up. If I was doing this in a word processor,
probably I'd just use the Tab key - several times if necessary - to
separate the label from its input box and have the left edge of all
the input boxes aligned.

But I can't readily see how to do this in CSS - at least not without
using say a 2 column or maybe table layout, which is not necessarily
very efficient for presenting and editing paired items on the same
line.

What I had been trying to do was eg:

<p>Name<span class="formbody2"><input type="text" name="Name"
size="50"></span></p>
<p>Address<span class="formbody2"><input type="text" name="Address1"
size="50"></span></p>

and setting a wider left margin in "formbody2", but this seems in
practice to start counting the margin from the end of the label text,
which is obviously on a different position on each line - in IE6 at
least. So this approach fails.

Hmmm, a long explanation for what is actually a very simple
requirement, but hopefully it makes sense. If anyone can help I'd be
much obliged.

JGD

Neal

2004-04-28, 5:35 pm

On Wed, 28 Apr 2004 15:32:14 +0100, John Dann <news@prodata.co.uk> wrote:

> I appreciate this is probably a fairly basic CSS question, but if
> anyone is feeling charitable, maybe they would point me in the right
> direction:
>
> I'm trying to create a form on a web page and want to have a series of
> text boxes for input with an appropriate label to the left of each
> box. For a neater appearance, I'd like the left hand edge of each of
> the input boxes to line up. If I was doing this in a word processor,
> probably I'd just use the Tab key - several times if necessary - to
> separate the label from its input box and have the left edge of all
> the input boxes aligned.
>
> But I can't readily see how to do this in CSS - at least not without
> using say a 2 column or maybe table layout, which is not necessarily
> very efficient for presenting and editing paired items on the same
> line.
>
> What I had been trying to do was eg:
>
> <p>Name<span class="formbody2"><input type="text" name="Name"
> size="50"></span></p>
> <p>Address<span class="formbody2"><input type="text" name="Address1"
> size="50"></span></p>

This HTML won't do well for your needs. I have no time to test this this
morning, but this may work.

<div><label for="name">Name</label><input type="text" name="name"
id="name"></div>
<div><label for="add">Address</label><input type="text" name="add"
id="add"></div>

div {
clear: left;
}

div label {
float: left;
width: 10em;
}

Brian

2004-04-28, 5:35 pm

John Dann wrote:

> I'm trying to create a form on a web page and want to have a series of
> text boxes for input with an appropriate label to the left of each
> box. For a neater appearance, I'd like the left hand edge of each of
> the input boxes to line up.

> I can't readily see how to do this in CSS

Float the label left, and give it an assigned width. Example here:

http://www.julietremblay.com/contact/

> - at least not without
> using say a 2 column or maybe table layout

What you're doing is arguably a table: one column for label, the other
for input. Example of that approach here:

http://www.tsmchughs.com/contact/

Note that on that page, I have a 3rd column for editing messages,
available when js is enabled. You can skip that 3rd column.

> What I had been trying to do was eg:
>
> <p>Name<span class="formbody2"><input type="text" name="Name"
> size="50"></span></p>
> <p>Address<span class="formbody2"><input type="text" name="Address1"
> size="50"></span></p>

Well, don't use inappropriate markup. It isn't a paragraph, so don't use
<p> markup.

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