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?
The size attribute specifies the visible width, in characters, of an <input> element. Note: The size attribute works with the following input types: text, search, tel, url, email, and password. Tip: To specify the maximum number of characters allowed in the <input> element, use the maxlength attribute.
There is no native max-length attribute for textareas.
The HTML <Textarea>maxlength attribute is used to specify the maximum number of characters enters into the Textarea element. Attribute Value: number: It contains single value number which allows the maximum number of character in Textarea element. Its default value is 524288.
The HTML <input> tag is used to get user input in HTML. To give a limit to the input field, use the min and max attributes, which is to specify a maximum and minimum value for an input field respectively. To limit the number of characters, use the maxlength attribute.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With