Size of text fields in a form

Question

I know that the size of text fields should be based on the expected which user will type but what if in web there are dropdowns (which are along with text field in a form) requires more space and changing its size breaks symmetry of the form shouldn't text box field size be wider on wider screen as otherwise the screen has lot of blank space in a single column long form.

I have seen many websites have wide text fields so how should the size of text fields be decided ?

To my knowledge, it is expected that the size of a text field should be based on the approximate length of text that can go in it. But in a form that has a mixture of text and dropdown fields, what should be the convention?

Do I stretch/squeeze all the fields to be of the same size to maintain "symmetry"?

On that note, how do I handle such a form for wide screen outputs? Do I still maintain a single column and leave blank space or stretch it out to fill the screen

Answer 1

There is really no one size fits all approach. But generally setting a maximum width for your text fields will generally be better than extending the width for wide screen outputs.

I'm currently typing this answer in a 726 px width text area:

And no matter how much I try to widen my screen, it doesn't grow beyond that:

It sincerely will be very painful if you have a 1500px text field, as keeping track of long entries will be difficult for the users.

Summarily: Keep a maximum width based on breakpoints.e.g 320px for mobile. 720px for tablet and above.