在HTML5表单开发中，input元素的type="text"是最常用的文本录入控件。很多朋友想让这个输入框“变长”，第一时间会去改size或者maxlength，但实际上这两个属性干的活完全不一样。size决定的是输入框在页面上能一眼看到几个字符宽，maxlength限制的是用户最多能往里敲多少个字符。搞清楚它们各自的职责，才能避免样式和校验逻辑的错位。
一、size属性的作用与写法
size是input标签的一个原生属性，用来设置文本框的可视宽度，单位是“字符宽度”而不是像素。比如size="20"表示大约能并显示20个英文字符的宽度，中文字符由于全角占用，通常显示数量会少一些。它属于很早期的HTML特性，在HTML5里依然有效，但容易被CSS样式覆盖。
下面是一段基础用法，我们给文本框设了size为30，页面上它就会比默认的输入框长出一截：
<form action="https://ipipp.com/submit" method="post"> <label>用户名：</label> <input type="text" name="username" size="30" /> <input type="submit" value="提交" /> </form>
需要注意的是，size只影响“看起来多长”，不影响能输入多少。如果用户输了一百个字，框还是那么宽，内容会左右滚动。另外，一旦你用CSS写了width，比如input{width:300px}，那么size基本就失效了，浏览器优先采用CSS给出的宽度。
二、maxlength属性的限制逻辑
maxlength才是真正卡住输入量的属性。它接收一个非负整数，表示这个文本框最多接收的字符数。无论是英文、中文还是标点，通常都按一个字符算（少数代理对字符除外）。设了maxlength之后，用户再多敲也不会进到框里，这是前端第一道数据长度防线。
示例里我们允许姓名最多输10个字，超出部分键盘敲了也没反应：
<form action="https://ipipp.com/save" method="post"> <label>昵称（最多10字）：</label> <input type="text" name="nickname" maxlength="10" /> </form>
maxlength和size经常配合着用：size管“框给多宽”，maxlength管“字给多少”。如果只写maxlength不写size，框还是默认那么短，但用户能输很多，只是输到上限就停；如果只写size不写maxlength，框拉得很长，用户却能写一本小说进去，后端若没校验就容易出事。
三、用CSS进一步控制宽度
在现在的前端项目里，更多时候我们不用size，而是直接用CSS控制input的宽度，这样能适配各种屏幕。比如用百分比让输入框随容器伸缩：
<style>
.long-input{
width: 100%;
box-sizing: border-box;
padding: 6px 10px;
}
</style>
<form action="https://ipipp.com/search" method="get">
<input type="text" class="long-input" name="q" maxlength="50" placeholder="请输入搜索词" />
</form>
上面这段代码里，输入框宽度撑满父容器，同时maxlength锁死50字。这种做法比单纯写size更灵活，也更符合HTML5推荐的实践。size可以作为降级方案存在，但布局层面交给CSS更稳妥。
还有一点，maxlength在HTML5里对部分类型（如email、url）也生效，但对color、range等不选字型的类型无意义。写text的时候它永远好使，记得后端还要再校验一次，前端限制只是体验优化。
四、常见误区与对比总结
有人以为size和maxlength名字像，功能也差不多，其实差异明显。我们用一张表看清区别：
| 属性 | 控制目标 | 是否被CSS覆盖 | 超量表现 |
|---|---|---|---|
| size | 可见字符宽度 | 是（width优先） | 内容滚动 |
| maxlength | 最大输入字符数 | 否 | 无法继续输入 |
所以回答“input type=text怎么加长”这个问题：想让框在页面上显长，用size或CSS的width；想让允许输入的内容多，用maxlength。两者一个管眼睛，一个管数据，搭着用才完整。实际项目推荐CSS定宽加maxlength限长，清晰也好维护。
HTML5input_type_textsize_maxlength修改时间：2026-07-31 19:00:30