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

Question

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

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

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

原文由 Hashan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

maxlength 属性因此是合乎逻辑的，它甚至可以在非可视用户界面中工作。它并不意味着以任何方式影响输入字段的视觉外观。

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

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

但是，这些值可能不同。例如，当请求邮政地址中的一行时，您可以设置 size=30 ，因为这通常足以满足一行，但是 maxlength=80 ，如果这符合您设置的限制数据库或数据处理，你没有特别的理由不允许这么长的线。

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

原文由 Jukka K. Korpela 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

maxlength 用于指示可以在输入字段中输入的字符数，而不管屏幕上显示的字段有多大。 size 属性决定了字段在屏幕上的宽度。

例如，我通常将其用于输入可能相当长的电子邮件地址之类的事情，但出于审美原因（良好的网页设计），您希望输入字段具有一定的长度。

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

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

原文由 nelswadycki 发布，翻译遵循 CC BY-SA 4.0 许可协议