What is the point of "size" for HTML input text?

Question

For the size element of an input, which type is "text", we expect it (as the MDN's documentation states) to correspond to the number of characters:

unsigned long: Returns / Sets the element's size attribute, containing visual size of the control. This value is in pixels unless the value of type is text or password, in which case, it is an integer number of characters. Applies only when type is set to text, search, tel, url, email, or password; otherwise it is ignored.

Here below is W3C's definition:

The size attribute gives the number of characters that, in a visual rendering, the user agent is to allow the user to see while editing the element's value.

However, in this sample we see that that rule is not respected at all:

1 <input type="text" size="1" value="123456789"><br/>
2 <input type="text" size="2" value="123456789"><br/>
3 <input type="text" size="3" value="123456789"><br/>
4 <input type="text" size="4" value="123456789"><br/>

Is the documentation wrong and if it is, what is the purpose of that size attribute of the input HTML element?

Answer 1

Passing the value of size as an integer seems to work fine:

20 <input type="text" size=20 value="123456789"><br/>
02 <input type="text" size=2  value="123456789"><br/>
05 <input type="text" size=5  value="123456789"><br/>

---

Visual output on Chrome 101.0.4951.64 on macOS v12.0.1 (Monterey):

---

The 2 and 5 more look like 2.5. Please see the quote from MDN describing why.

Quote from MDN:

Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).

Answer 2

Lets break this down a little bit. What does size really do?

The size attribute specifies the visible width,...
Tip: To specify the maximum number of characters allowed in the element, use the maxlength attribute.

Source: https://www.w3schools.com/tags/att_input_size.asp

So lets go for the specification:

• 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.

Source: https://www.w3.org/TR/html401/interact/forms.html#adef-size-INPUT

Since, why, whatever not all browsers seems to work the same way in terms of sizes etc, there will be some difference from client to client.

If you want to limit the input you have to go for:

maxlenght="8" 

But there are way more options to handle your inputs in html, link patterns & types:

 <input type="text" id="pattern_of_3" name="pattern_of_3" pattern="[A-Za-z]{3}" />

Like this the input must be as the pattern expect its, we could add maxlength but it's not really needed at this point.

And we can go on with types:

type="email" pattern=".+@domain\.com"
type="url" name="url" id="url" pattern="https://.*"

Since we can use patterns and maxlength to make it work, we can use CSS to adjust what the inputs will look like.

How to style an input with CSS:

input[type=text] {
width : 20px;
more: css;
}

It is possible to do this with any type of input. https://www.w3schools.com/css/css_form.asp

Let's go a bit derper into the definition:

Definition of size

If the attribute is present, then its value must be parsed using the rules for parsing non-negative integers, and if the result is a number greater than zero, then the user agent should ensure that at least that many characters are visible.

Then we can find the first thing that can be a source of the different outputs:

ensure that at least

It states that the user agent/client (browser) has to show at least that many characters, not that it has to show that number of characters.

Let's go a bit more through everything as you can read here:

Size attribute for an input field not being honored

That problem exists for years. So if size = x is not defined in px it will vary, even fonts can than influence the result.

Now lets go back to the client/user agent/browser:

If they still handle the size="2" in em instead of px,

most web browsers have settled on using the number of em every font used will influence the out put.

So smaller font means = you see more characters;

Bigger font means = you see less characters;

At this point neither the definition or the usage is wrong, it´s just missing the point that the visual output can be influenced by other factors like font and font-size.

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.

Answer 3

'Size' is used for the size of the input element itself, not for the maximum allowed length of input. If you want to limit your input for size, you can use:

<input type="text" size="4" maxlength="4" value="123456789">