Handling Larger Text Inputs

HTML & CSS
1

I need some help handling the sizing of Text Inputs on my “Add an Article” form.

All of my fields are at least 100 characters in length.

If I even make them 70em, they fill up most of the screen width on my form/laptop.

How should I handle these?

1.) Make them skinnier, but let people still enter 100 characters in a 60em wide Input field?

2.) Somehow make the Input field 2 Rows high? (Almost like a mini Text Area?!)

3.) Other?

Also, hat is the best way to handle fields that are “MediumText” in MySQL (i.e. BIG fields that could hold a book!!)??

Any “best practices” for using Text Areas?

Thanks,

Debbie

2

characters and ems are not the same thing. 70em is very wide. Just set the inputs to a width that suits your design, and if there are more characters that can fit visually, the user can just scroll a bit.

3

2.) Somehow make the Input field 2 Rows high? (Almost like a mini Text Area?!)

text inputs are one-liners, so that’s out. You can’t use/set rows, and it sounds like you really do want text inputs here instead of actual textareas.

I make sure my inputs have some padding inside, and you can type 100 characters into your inputs in a few browsers and get a feel for how wide you want to set your inputs, if you really want all 100 characters to show onscreen without the default scrolling (browsers let the text inside a text input scroll as the user types… nothing wrong with this). Though if this is wider than your page or box width then I’d let the input just not get any wider than that.

4

You are correct, except that to fit 100 characters into an Input field, it is a good portion of my laptop screen and makes the form look weird.

(see attached screen-shot)

I make sure my inputs have some padding inside, and you can type 100 characters into your inputs in a few browsers and get a feel for how wide you want to set your inputs, if you really want all 100 characters to show onscreen without the default scrolling (browsers let the text inside a text input scroll as the user types… nothing wrong with this). Though if this is wider than your page or box width then I’d let the input just not get any wider than that.

After I have some actual data, maybe I’ll find I don’t need 100 characters, but for now I’m being safe, and that is pretty darn wide.

Debbie

5