Input Fields and Size

HTML & CSS
1

Does setting the “Size” of an Input Field in an HTML form truly restrict how much data you can type in it?

I need to send data to another system, and I am wondering if I should use “Size” to define how big the field could be?

For example…


<form action="form_action.php" method="post">
  Zipcode: <input type="text" name="zipcode" size="5" />
</form>

Thanks,

Debbie

2

Does setting the “Size” of an Input Field in an HTML form truly restrict how much data you can type in it?

No. (niether does maxlength)
Not if someone wants to be all clever.

I use “size” (and when sensible “maxlength”) in my HTML as attributes of the inputs which suggest to the user the type of data I’m expecting… and also that way is a bit of a usability plus (otherwise, I would use CSS to “style” the size). Since I have convinced myself that setting size and maxlength are part of the content of that form regardless of whether styles are present, I usually don’t use CSS to set input size.

So using size, together with maxlength (make the size always a bit bigger than your maxlength, for Safari and other fat-fonted browsers) you can give a bit of easy feedback to a user that you are looking for a small amount of data in that input.

But the back-end validation must be the one to enforce the limit.

3

So HTML’s “size” just sets the physical width of the Input box?

And am I understanding you correctly, that if I need to be certain that people on enter a 5-digit Zipcode, then I would need to use something like PHP check that?

Thanks,

Debbie

4

So HTML’s “size” just sets the physical width of the Input box?

Yes. It might also stop my typing in a browser, but people can change the front-end code in their browsers or in a text editor and still send a large amount of data if your form accepts it.

And am I understanding you correctly, that if I need to be certain that people on enter a 5-digit Zipcode, then I would need to use something like PHP check that?

Yes.

Anything you use for validation on the client-side is purely for the benefit of the user (make it easier for them to put in the RIGHT data in the RIGHT place in the RIGHT form the FIRST time). This includes Javascript.
The back end should always check the data being sent it. Programmers call user input “tainted” no matter the intentions of the user. Always taint-check your data.

Plus, while you’re at it in PHP, not only are you going to check that they inputted no more than 5 characters, but you might as well check that they are all numbers and match actual valid ZIP codes. Unless you’re using Javascript (and users like me don’t have scripts on anyway), your form with a 5-character input would allow
qwert
and
99999
and
*&^%$
whereas the back end, when checking, can flag all of those.

5

Okay, good thing I asked!!

Thanks!!!

Debbie