0

enter image description here

Hi All,

I would like to get inputs on form label aligment. I am keeping the input field width to 40PX and and Detail input field to 75PX. I wanted to understand should I keep right aligned labels aligned to top or it would be better if I keep it in middle aligned.

Please check the attached image

Regards, RUX

2 Answers 2

1

Agree with the Hossein. Go for the labels on top of the textfields.

  1. It looks logic: label is a header, textfield is a paragraph.
  2. The developers will love it: universal solution for all screen widths. enter image description here
4
  • Thank you folks, but as the forms are pretty lengthy it will eat lots of space (read scroll). And it it will majorly used on desktop so thought of keeping right align to text fields. I was not sure if to keep it top align or middle align the text labels
    – RUX
    Nov 13, 2019 at 6:47
  • If your main screen is desktop, you can go for your first option. Nevertheless, it's important to keep in mind that very long text blocks are hard to read, "for the single column text the ideal witdh is 45-75 characters per line" webtypography.net/2.1.2
    – Anton T
    Nov 13, 2019 at 8:35
  • Noted - thank Anton!
    – RUX
    Nov 13, 2019 at 10:35
  • P.S I just exaggerated the text fields to get the idea!
    – RUX
    Nov 13, 2019 at 10:46
1

between these 2 options I choose top one(aligned to top). But I suggest you to give up inline labels and use vertical top aligned label for fields. Checkout this link about designing good forms

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