Size attribute for an input field not being honored

Question

Taken directly from W3Schools:

Definition and Usage The size attribute specifies the width of an input field.

For <input type="text"> and <input type="password">, the size attribute defines the number of characters that should be visible. For all other input types, size defines the width of the input field in pixels.

So..

If that is true why is my field <input type="text" size="2"/> wide enough to display 5 CAPTIAL MMMMM's ?

Answer 1

The other/outer css class may affect the size or inline CSS.

My case is:

when using an outer div with a class "input-group", the size or inline style will not work at all. Removing this class of "input-group" if possible will make it work.

<div class="input-group">
    <input type="text" class="form-control" required style="width:20px">
</div>

Answer 2

The same "erroneous" information is specified in the HTML4 Spec, the HTML5 spec, Sitepoint, Mozilla Developer Network, and Microsoft's MSDN library. So it isn't just W3Schools' fault.

Anyway, while the specs say that the size attribute should be the number of characters visible, most web browsers have settled on using the number of em units, meaning the width of the character of the capital M.

To specify the width precisely in pixels, or any unit of your choice, use the CSS width property.

To answer your updated question: it's the width of the capital M in the default font size as applied by CSS styling to the text box, but the font size of the text inside the text box is usually smaller.

Want to make a set number of characters fit inside the box? You'll have to switch to a fixed width font.

Answer 3

You can't take that literally, as that is not possible.

The width of the element is based on the size attribute and the font size used, but it won't fit that number of characters exactly, because that is not possible.

All characters doesn't have the same width, so the characters llll will easily fit in an input with size="4", but the characters mmmm won't.

Also, there is some extra space added, so an input with size="2" will not be twice as wide as an input with size="1".

What's used as an average character width might depend on the browser. I tested in Firefox, and I haven't found any character that matches exactly, but the character * matches that average width pretty well.

Answer 4

The answer is that, unless using a fixed width font, the browser can't accurately determine the width of two characters. I think your two character field would probably fit two "m"s side-by-side.

As far as the correctness of w3schools, the following is from the W3C:

size = cdata [CN] 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.

http://www.w3.org/TR/html4/interact/forms.html#edef-INPUT

Answer 5

The problem is that the size = x attribute isn't in pixels... rather, it denotes the very approximate size that the <input /> element must be to hold x characters. So, for example, <input size=2 /> should display a input box that can hold 2 characters.

Unfortunately, this varies from font to font (esp. variable width fonts), and so you will likely observe that setting the size attribute to 2 will in fact render an input box with the size of 5 or something like that. If you use a monospace font, though, size=2 should render a text field that can hold exactly 2 characters... or at least get close.

However, to set the width of an <input> element in pixels, ems, etc., try using the width CSS property instead:

<input type="text" style="width:20px" />

The above example will make the input width exactly 20 pixels wide, excluding borders and/or padding.