Bite Size Standards offers concise web development tutorials, tips, and tricks written by designers and developers who are passionate about web standards. More about us
Using size to size inputs
The size html attribute specifies the length of input fields in forms.
<input type="text" id="user" name="user" size="15" />
Due to its seemingly presentational nature not many designers use it, opting to set the width using CSS instead.
'Size' is not presentational
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.
Using CSS with size
If a value for size is not given, and the width is not set with CSS, the input field will have the default width set by the browser. We could change this default size using the following style rule, which uses the :not negation pseudo-class in CSS3 (not supported in IE):
input[type="text"]:not([size]) {
width: 15em; /* Desired width of input field */
}
Thanks to Mats Lindblad who suggested the above snippet at the Forms Markup and CSS discussion.
9 Comments
Commenting is closed for this article.
© Copyright 2006 Bite Size Standards and Authors
Martin
: http://
23 April 2006, 14:09 : Permanent link to comment
In several browsers (Firefox being one, although interestingly, not Opera) notoriously hard-to-style file upload-type
inputfields (those which have the valuefilefor theirtypeattributes) can’t be tamed by CSS width declarations of any kind. Only thesizeattribute can affect the width of these fields.Thanks for providing a broader rationale for using
size. Good bite-sized article. :)Danilo Laurindo
: http://donestudio.com.br/danilo
24 April 2006, 03:33 : Permanent link to comment
Well, very nice. I think I have never went very deep into input parameters and now I know it is easier to take advantage of size. :)
Keep up the good work!
Anne van Kesteren
: http://annevankesteren.nl/
24 April 2006, 07:52 : Permanent link to comment
It’s deprecated in the next version of HTML forms actually…
Prabhath Sirisena
: http://nidahas.com
24 April 2006, 08:34 : Permanent link to comment
Anne,
The size attribute of the input element is deprecated in favor of using CSS to specify the layout of the form.
I guess this was done on the basis that
sizewas presentational? If so, I tend to disagree, as you may understand from the content of this post.Thomas Higginbotham
: http://thomashigginbotham.com/
24 April 2006, 09:17 : Permanent link to comment
I agree that the size attribute can be considered non-presentational due its nature. However, the problem I have with using it is that it’s not consistent on all browsers. Specifying size=”15” in IE is not the same as size=”15” in Firefox and if your layout depends on exact pixel measurements, then CSS is the better choice.
Since we’re on the topic, what are your feelings on the maxlength attribute?
Prabhath Sirisena
: http://nidahas.com
24 April 2006, 10:02 : Permanent link to comment
Thomas, in instances where pixel-perfect layouts are required, I use both
sizeas well as CSS to set the width. That way we get the best of both worlds: the width set through CSS will override that set bysize.My feelings on
maxlengthare similar to those onsize– it’s a functional property which has little to do with presentation. Also, it doesn’t have a potential CSS alternative so we don’t have too many options anyway.rtimoshenko
: http://www.eingko.net/
25 April 2006, 06:21 : Permanent link to comment
I don’t think that there are really any qualms over maxlength because it’s use is to limit the amount of characters that a give website’s users may inject into form fields. If a form requires a postal code, the web author may choose to limit the amount of potential characters (via maxlength) so that “malicious” users won’t spam the form with useless garbage.Using the maxlength attribute, which is built-in to (X)HTML, is probably something that is often forgotten, or over-looked. In some cases, it can even help against particular SQL injection strings, which will help web authors avoid future headaches from “malicious” users, et al.Anyway, those are just my thoughts on the matter…
david
: http://climaxdesigns.com
25 April 2006, 15:34 : Permanent link to comment
(not supported in IE)
while understand the point about the size attribute, i can’t go along with the css because once again our favorite browser doesnt support it.
somthing about it still having at the very least 50% market share makes that part usless to most of us.
good to know that you can do that eventually though.
Lakshan
: http://laktek.blogspot.com
25 April 2006, 19:44 : Permanent link to comment
It bit confusing to me how size attribute becomes a programmtical logic, since size is determined propotional to the font size (em) it becomes more a presentational. I think we cannot give the same value to maxlength and size attribute….