Difference between "maxlength" & "size" attribute in html?

Question

I am little bit confused about the difference between the maxlength and the size attribute.

<input type="text" name="telephone" maxlength="30" size="34">

I know that maxlength is used to control the input data. So what is the reason for using both attributes at once?

Solution 1

The maxlength (not max-length) attribute specifies the maximum length of the input string in characters or, more exactly, in code units. The browser is expected to enforce this, by refusing to accept more characters. However, this is not meant to act as a security measure, since it can be overridden trivially. Rather, it tells the user that no more characters will be accepted in processing the data. This is useful when you have to set an upper limit, e.g. your database can store only a fixed number of characters fpr some information, and also when there is a logical limit on the length (e.g., if the data is a two-letter code for a US state, it has the logical upper limit of 2).

The maxlength attribute is thus logical, and it is expected to work even in non-visual user interface. It is not meant to affect the visual appearance of the input field in any way.

The size attribute, in contrast, is for visual rendering only. It suggests a visible width for the field, in terms of “average” characters. This vague concept has not been clarified in specifications, and browsers implement it inconsistently. It works best when a monospace font is used. This attribute does not limit the amount of characters entered, but it affects usability: it is difficult to enter, say, a 30 characters long string in a field that lets you see only 10 characters at a time. The width of a field is also a signal to the user: it indicates the expected maximum width of the input.

It is often suitable to use both attributes, often with the same value. For example, if the field is for a 5-digit postal code, size=5 maxlength=5 is suitable, especially if you also set font-family: monospace, so that the actual width is more or less exactly five digits.

However, the values may differ. E.g., when asking for a line in a postal address, you might set size=30, since this is normally sufficient for a line, but maxlength=80, if this corresponds to the limitations set by your database or data processing and you have no particular reason not to allow such long lines.

The size attribute can in principle be replaced by CSS, since it deals with visual rendering only. However, the width is usually best set in characters, and there is no universally supported unit for the average width of a character in CSS; the new ch unit comes close, but isn’t quite the same and isn’t supported by old browsers.

Solution 2

max-length is used to indicate the number of characters that can be entered in the input field regardless of how large the fields appears on the screen. The size attribute determines how wide the field will be on the screen.

E.g., I generally use this for things like entering an email address where it can be fairly long, but for aesthetic reasons (good web design) you want the input field to be a certain length.

<input type="text" name="email" maxlength="50" size="20">

Once a user put in more than 20 characters for their email address, the field begins to scroll as they type.