Dealing with narrow form fields

When I put a form into a main content area, I often find it looks awkward. In a typical content area of between 600-700px (like on this site), how wide should your form fields be? Contact forms or forms like this site do well with 100% width because they are expecting a fair amount of content, but for forms like login or registration, 100% width seems far too wide. Who is going to have a password that requires an input 700px wide? However, when I make narrower inputs, the remaining 200-300px gap to the right just feels awkward, especially when there is full-width content either above or below it.

Imagine that the following form is part of StackExchange with the current layout and width:

sample form

This gap feels awkward———————————————————-^

Does anyone else encounter this? How do you solve it elegantly?

Answer

The layout feels uncomfortable because it is unbalanced, like putting a filing cabinet on one end of a see-saw and nothing on the other.

Probably the simplest solution to this is to put the labels in line with their respective fields, instead of above them. Since we’re not in a sidebar, there’s no reason to be parsimonious with horizontals. Left-align the fields but right-align the labels, creating a strong vertical to tie the elements together.

Form Layout

Place the implied or actual (if you provide a differently-colored background to that div) rectangle in the horizontal space so as to achieve visual balance, and you have something that lives in the space without seeming lost in a sea of pixels.

Attribution
Source : Link , Question Author : Virtuosi Media , Answer Author : Alan Gilbertson

Leave a Comment