Size attribute for an input field not being honored

Issue

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 ?

Solution

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.

Answered By – Gaurav

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published