Emulating the Tab key

Giganews Newsgroups
Subject: Emulating the Tab key
Posted by:  John Dann (ne…@prodata.co.uk)
Date: Wed, 28 Apr 2004

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

Replies