Html html中“maxlength”和“size”属性之间的区别？

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

提问by Hashan Kanchana

I am little bit confused about the difference between the maxlengthand the sizeattribute.

我maxlength对size属性和属性之间的区别有点困惑。

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

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

我知道maxlength是用来控制输入数据的。那么同时使用这两个属性的原因是什么？

回答by Jukka K. Korpela

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

的maxlength（未max-length）属性指定字符的输入字符串的最大长度，或更确切地说，在代码单元。浏览器应该通过拒绝接受更多字符来强制执行此操作。然而，这并不意味着作为一种安全措施，因为它可以被简单地覆盖。相反，它告诉用户在处理数据时不再接受字符。这在您必须设置上限时很有用，例如您的数据库只能存储固定数量的字符 fpr 某些信息，以及当长度有逻辑限制时（例如，如果数据是两个字母的代码）对于美国州，它的逻辑上限为 2)。

The maxlengthattribute 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.

maxlength因此，该属性是合乎逻辑的，即使在非可视用户界面中也能正常工作。它无意以任何方式影响输入字段的视觉外观。

The sizeattribute, 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.

size相反，该属性仅用于视觉渲染。它建议字段的可见宽度，以“平均”字符表示。这个模糊的概念在规范中没有明确，浏览器实现也不一致。使用等宽字体时效果最佳。此属性不限制输入的字符数，但会影响可用性：很难在一次只能看到 10 个字符的字段中输入 30 个字符的字符串。字段的宽度也是用户的信号：它表示输入的预期最大宽度。

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=5is suitable, especially if you also set font-family: monospace, so that the actual width is more or less exactly five digits.

通常适合使用这两个属性，通常具有相同的值。例如，如果该字段用于 5 位邮政编码，size=5 maxlength=5则适用，特别是如果您还设置了font-family: monospace，以便实际宽度或多或少正好是 5 位数字。

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 allo such long lines.

但是，这些值可能会有所不同。例如，当要求在邮政地址中输入一行时，您可以设置size=30，因为这对于一行来说通常是足够的，但是maxlength=80，如果这符合您的数据库或数据处理设置的限制并且您没有特别的理由不分配这样的排长龙。

The sizeattribute 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 chunit comes close, but isn't quite the same and isn't supported by old browsers.

该size属性原则上可以由 CSS 替换，因为它只处理视觉渲染。但是，宽度通常最好以字符为单位设置，CSS 中没有普遍支持的字符平均宽度单位；新ch单元很接近，但并不完全相同，旧浏览器不支持。

回答by nelswadycki

max-lengthis 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 sizeattribute determines how wide the field will be on the screen.

max-length用于表示无论字段在屏幕上显示多大，都可以在输入字段中输入的字符数。该size属性决定了字段在屏幕上的宽度。

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">

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

一旦用户为他们的电子邮件地址输入了 20 个以上的字符，该字段就会在他们键入时开始滚动。

回答by The Head Rush

Max length refers to the maximum possible length of the input string. Size refers to the size of the input itself.

最大长度是指输入字符串的最大可能长度。大小是指输入本身的大小。

回答by Marc B

sizeis "how big" it should be on screen. max-lengthis the maximum number of characters the browser should allow to be entered into a field. They're not at all related. You could have have size = 50 kajillion, max-length=1if you wanted to be a sadistic page designer.

size是屏幕上应该有“多大”。max-length是浏览器应允许在字段中输入的最大字符数。他们一点关系也没有。size = 50 kajillion, max-length=1如果你想成为一个虐待狂的页面设计师，你可以拥有。