Input size in HTML and CSS

I’ve struggled over the past couple years with including size=”xx” in input tags. My right brain says, “it’s presentational, nooooo!” My left brain says “but it makes the forms more predictable.”

Well, lo and behold, there’s a reason behind the madness. Bite Sized Standards has a new post that describes why the size attribute isn’t just a presentational element.

However, unlike the size attribute of the infamous <font> tag, size of <input> specifies a functional property. The length of an input field is a programmatical decision because it provides an important cue as to the type of input expected: a cue that should be preserved even when the page is not styled.

The advantage of using size becomes apparent when working with web applications that make extensive use of forms, often with different layouts. Instead of having a plethora of CSS classes for different input field sizes, we could simply set their widths using size.
Bite Sized Standards

So, let both sides of your brain feel good. Use the size on input elements and have a happy day after all.

Posted

April 24, 2006

Form Input, HTML Elements, Online Resource

Ted

Tags:

Comments

3 responses to “Input size in HTML and CSS”

Bill

December 31, 2007

The issue I have is that it is presentational: and every browser seems to interpret the size differently.

If you have 3 input and set all to the same size, they all are the same.

If you have 3 inputs, set 2 to a value like 40 and the third to say 60, it will look perfect… until you use a different browser… it might bleed out of the or do some other unpredictable thing.

w3c compliant sites are hard enough, then when you have to make them work in IE it’s harder, but then to add this third x-factor, it’s killing me…

Or, am I the only one with this problem?

When don’t they let us to size=xx%

Then it would all just “look” right?

Anyways, I hope someone posts a reply. I could use some help.
Segfault

November 11, 2008

I think the original author (and his source, though it is down now) are mistaking the ‘size’ attribute with the ‘maxlength’ attribute. ‘size’ does little more than allow for a certain number of characters to be typed into it before it starts scrolling. maxlength hard-limits the number of characters the form field will accept. The latter is FAR more useful than the former from a coding standpoint.

That being said, size IS still more a coding helper than styling element, so it wouldn’t make much sense to apply common styling conventions to it. Instead, browsers should support something like the ‘width’ and ‘height’ attributes.
Jason Robb

December 11, 2008

Segfault, actually I think the quoted author is talking about size, and not maxlength. When he says “it provides an important cue” this is a cue to the user.

If the field is really long, (e.g. 50) and the field label is for “ID number” then it’s going to be a long ID number. On the other hand, if the ID number input is short, (e.g. 4) then the user knows it’s a really short number they’re supposed to enter.

If they don’t have enough digits to fill the input, then they know something is wrong, or at least are cued in to know they’re missing something.

So, use the size field. Override it with CSS.

Good post, thank you! Found through Google search for “html input size required” and was looking for exactly this. =)

Input size in HTML and CSS

Comments

3 responses to “Input size in HTML and CSS”

Leave a Reply