: 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
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:
This gap feels awkward----------------------------------------------------------^
Does anyone else encounter this? How do you solve it elegantly?
More posts by @Goswami567
2 Comments
Sorted by latest first Latest Oldest Best
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.
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.
Double them up.
Name [ ] Username [ ]
Company [ ] Email [ ]
Password [ ] Password Again [ ]
If form fields don't work at 100% width I always double up the fields so that they fill the content and are still aesthetically pleasing.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.