Best way to layout in HTML forms?

Question

I want to display an HTML form containing labelled text fields, like this:

      First Name:  [_____________]
       Last Name:  [_____________]
   Date of Birth:  [________]

My obvious approach is to use a <TABLE> and simply place the labels and text fields in its cells, but is there a better way, e.g. a CSS-based approach?

EDIT:

1. I'm looking for a way that reduces the verbosity in the HTML file.
2. And yes, I'm looking for auto-sizing of the labels. See a related question about wrapping labels

Answer 1

If you need the labels to the left of the fields like that, just go ahead and use a table. Not only do tables degrade nicely on older browsers, but they auto-size the column of labels to the text in them (assuming you use white-space: no-wrap on the cells containing the labels, and/or — and this is true heresy — the trusty old nowrap attribute on the th tag), they handle being made fairly narrow well, and they're easy. Make each label cell a header and each field cell a normal cell. And it's a pain, but make sure the labels really are labels and link to their fields, because accessibility matters, even if (perhaps especially if) you're using a table non-semantically.

I'd love to hear about CSS solutions that auto-size the label columns, handle being narrow well, and don't involve 18 hacks to deal with inconsistencies across browsers. I'd be thrilled to see them. But every time I've looked (and that's several), it's still been a gap. A gap that needs filling, IMV, so we can stop doing this without wearing hairshirts.

For anyone reading who doesn't need the labels to the left like that, check out jball's answer for a good-looking, semantic alternative.

Answer 2

I'd like to use definition lists (<dl>) they tends to be semantically correct. A label is defined by an user input. It has sense to me. <dl> expresses semantic contents more accurately than a table.

<dl>
    <dt><label for="name>Name</label></dt>
    <dd><input type="text" id="name" /></dd>

    <dt><label for="email>Email</label></dt>
    <dd><input type="text" id="email" /></dd>
</dl>

Here is an example

By the way they degrade gracefully in all browser, even text-based.

Answer 3

One problem with tables is the space bug. When you don't use tables you can write your label and input like this:

<label for="foo">Blah <input id="foo" type="text"/></label>

which properly encapsulates the input and the label.

In a table, on the other hand, you get those separated:

<td><label for="foo">Blah</label></td><td><input id="foo" type="text"/></td>

That means the area between the </label> and the <input/> does not respond to mouse clicks.

It's not too bad with plain fields, it's really annoying with radio buttons and checkboxes though (or maybe I'm just being super picky.)

Now, to answer your question: I don't think there is a good way to do formatting of a column in CSS (unless the column width is known--you could obtain that feat with JavaScript...) So T.J. Crowder certainly has an excellent answer.

However, there's one argument for CSS (and forced widths) as in one case I created a very large form that covered the whole screen. All the fields would appear in one screen (As the customer wanted) and the CMS did not output a table. But even though, a table would have been a nightmare simply because all the fields were for many placed in non-aligned columns. That would be quite difficult with a table (lots of rowspan using the table as a grid which would be a table for layout!).

---

Update:

As per comment below, singe31 says that <input/> cannot be defined within the <label> tag. This is wrong. The HTML 4.01 DTD is easy to read and we see that:

<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- form field label text -->
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

So in other words an <input/> can appear in a <label> tag. It is perfectly legal.

HTML 5 clearly shows that this is legal in the documentation on w3c here:

http://www.w3.org/html/wg/drafts/html/master/forms.html#the-label-element

Scroll down a bit up to the "Code Example" and you see:

Code Example

For example, on platforms where clicking or pressing a checkbox label checks the checkbox, clicking or pressing the label in the following snippet could trigger the user agent to run synthetic click activation steps on the input element, as if the element itself had been triggered by the user:

<label><input type=checkbox name=lost> Lost</label>

On other platforms, the behavior might be just to focus the control, or do nothing.