【表单设计】input的size和maxlength属性

一、示例代码：

<!--用户名长度限制为最多8位-->
<p>用户名：<input  type="text" maxlength="8"placeholder="密码/邮箱"></p>
<p>用户名：<input  type="text" size="8" placeholder="用户名/邮箱"></p>

二、区别：

maxlength="8"：input输入框中只可以输入8个字符，输入8个字符后再不能输入，即最大输入字符长度（中文也算一个字符长度）；

size="8"：表示input输入框只显示8个可见的字符，但能够输入无数多字符内容，即size属性规定输入字段的宽度。

size 属性规定输入字段的宽度。

对于 <input type="text"> 和 <input type="password">，size 属性定义的是可见的字符数。而对于其余类型，size 属性定义的是以像素为单位的输入字段宽度。

三、总结：

从文档结构语义化与样式分离原则来看，因为 size 属性是一个可视化的设计属性，所以咱们应建议使用 css中的width来代替它。

css 语法：

<input style="width:100px">