Question

What’s the best practice and the most portable way for vertically aligning a field label(free text) and a form element(e.g. <input>) in the same <tr> within a form?

Do I align the base of the label and the content of the <input> or do I align the base of the label and the base of the <input> tag itself? Could you include some examples, too?

There’s no specific requirement from my client, so I just want to follow the industry standard.

Thanks.

Answer 1

@Oded is right, there is no industry standard for that. In fact in the design area any standard is highly subjective.

There are some common patterns (at least these two I’ve seen frequently) of such aligning:

1). On one row, label left and input (or other element) on the right. Based on the design, it can be vice-versa. It’s convinient to use vertical-align css rule in such case. I prefer baseline or middle vertical aligning.

2). label on top of the corresponding form element. In this case the simpliest is to use display:block on labels. Vice-versa (label lower than form element) is usually considered not user-friendly (at least I truly think so).

Important: dont’t forget to use for attribute in label tag with corresponding id attribute on form element. That is in fact kinda industry standard.