0

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.

  • If Label 1 [.....value1] Long Label 2 [....value2] Very Long Label 3 [....value3] is what you mean by "horizontal form" them I don't immediately see why "they must be equal width". Can you add an example or mock-up to clarify this? – TripeHound Aug 3 '18 at 13:03
  • Can you provide an example or screenshot to make the question clearer? I find it a little bit difficult to understand the alignment issues with a horizontal form that is not also a potential issue for a vertical form. I think this applies when there is a responsive design and the form has multiple columns, but I just want to make sure this is the context of your question. – Michael Lai Aug 4 '18 at 0:22
3

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

mockup

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.

  • I've edited my question to clarify what a horizontal form is. I think the grid system is the same as the first option I listed above. When I need to add a new form item, I have to consider if I need to change how many columns the labels span. – jddxf Aug 4 '18 at 7:07
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.