Label width in horizontal forms

Question

In a horizontal form, each label and its corresponding form item are in one line. To make these labels aligned properly, they must be of equal width. Then what width should we choose? There're at least three options:

1. Specify a proportion to the width of the line.
2. Specify a fixed width.
3. Let the width be determined by the longest label automatically.

I like the third option best as we don't need to specify anything. Also, we wouldn't bother with adjusting anything(like the proportion or the fixed width) to ensure label text not overflowed when we add another form line.

What do you think?

Edit: If each line of a form contains only one label and one form control and the label and the form control are arranged horizontally, I call it a horizontal form. Here's an example.

Answer 1

You could also consider using a grid system¹. Each element can take up a standard width—wrapping labels and element contents as necessary—unless you decide it needs to be wider², and span multiple columns. If there's an obvious vertical organization, it shouldn't appear disorganized.

^{download bmml source – Wireframes created with Balsamiq Mockups}

^{1: For further reading, I'd consider taking a look at the very popular Bootstrap framework, if only just to get an idea of how grid systems work.}

^{2: Generally, I like to create my forms with a grid system. To determine how many columns they should span, I consider the length of the expected input. For example, a "First name" will often be shorter than a "Street address", so the form should reflect that.}

Answer 2

I usually turn this around: I decide on the width of the inputs, and then use whatever is left over for the labels.

I then float the inputs to the right of each row, and the labels to the left.

Bonus: this is automatically responsive, although you may want to ‘unfloat’ everything for smaller screens to make it a vertical form.