I’m trying to figure out what the difference is with text input’s size vs. witdh. I know that width controls the actual width of the textbox in either pixels or % but I don’t understand visually what size does.
And should size be an optional attribute in lets say a custom OOP control?
I did a quick experiment on my machine. I created a HTML 4 document and placed a INPUT element inside a P element. I then experimented with size and width attributes. Size changed the visible width of the input element (measured in characters). Width was an invalid attribute and did nothing.
It is also possible to use CSS to set the width of an input element. Size is the HTML way to set the width, while width is the CSS way to set the width. Either can be used, but CSS is generally easier to maintain.
Also, size is an optional attribute.
The size attribute is mainly presentational, and I avoid it unless it’s really important to set a width for non-CSS browsers like Lynx. The exception is for select elements, where it’s needed to create a list box instead of a drop-down list.
The widths of text fields etc should be specified with the width property in CSS. It has the advantage of letting you specify the width in em, as well.
For textarea elements the rows and cols attributes are required, but I still think the dimensions should be overridden with CSS.
I actually found that size did nothing and width changed the physical width of the textbox
width=“100px”
of course I was looking at this page:
http://www.blooberry.com/indexdot/html/tagpages/i/inputtext.htm
looks like at the top this is only HTML 2.0 compliant?
this is a better link:
I take that back size=“20px” does physically change the texbox size
Isn’t size supposed to limit the number of characters the user can insert in the text field?
size
(Number) This attribute tells the Web browser the initial width of the control. The width is given in pixels except when the type attribute has the value text or password. In such cases, its value is the number of characters.
(from http://xhtml.com/en/xhtml/reference/input/)
Width is the one that I think shouldn’t be used here.
That’s actually the purpose of the maxlength attribute.
width has been retired. Use size.
You have that backwards.
You should always set the width of the field by specifying a width in the stylesheet. For example:
width:100px
If you were to specify the width in a stylesheet then you could end up with hundreds of styles defined in your .css
I don’t think that’s practical. And you definitely would not want inline styles in your Mark-up period.
It is perfectly practical - for most forms you would only ever want the fields to display in a very small number of widths and so would need at most three or four classes to be defined for it.
Defining it via the HTML is completely impractical since different browsers interpret size differently and so what might be big enough to display 3 of a given character in one browser will be big enough for 6 of that character in a different browser and therefore can’t look right in both.
It isn’t like you are defining how much can be entered into the field or even how much will fit in the display since how much can be entered comes from the maxlength attribute and how much will display depends on what characters are entered and how much width each of them uses - so a lot of iiiiii will fit in the same space as very few MM.
what’s practical and what’s reality depends on how complex your site is, especially if it’s an ecommerce site. On our site, every product has a dynamic set of fields spit out from a custom control. Those textboxes vary and we have about 100 variances because each product has different configurations for it…it’s a configurator.
The size attribute doesn’t allow you to specify a unit, only a number. According to the specification,
This attribute tells the user agent the initial width of the control. The width is given in pixels except when type attribute has the value “text” or “password”. In that case, its value refers to the (integer) number of characters.
Sounds like bad design and poor usability to me. As Stephen said, a handful of classes should do it. It’s often a good idea to make text fields span the whole width of the form, unless it’s really important to point out that a particual field only accepts a small number of characters.