使用maxlength属性可限制HTML表单输入字符数,适用于文本框、密码框、邮箱及textarea等元素。例如设置maxlength="10"即最多输入10个字符,浏览器会自动阻止超长输入。结合minlength可规定最小长度,用于表单验证;size控制显示宽度不影响输入限制。textarea中同样用maxlength限制内容长度,cols仅影响外观。前端限制易被绕过,必须在服务器端二次验证以确保安全。可配合JavaScript实时显示剩余字数,提升用户体验。总之,maxlength简单有效,配合minlength和后端验证,能可靠控制输入长度,但需注意安全性细节。

在HTML表单中限制输入内容的长度,主要通过 maxlength 属性实现。这个属性可以应用在文本框(input[type="text"])、密码框、电话号码、邮箱等单行输入框,以及多行文本框(textarea)上,用来控制用户最多能输入多少个字符。
使用 maxlength 属性限制字符数
maxlength 是最常用的限制输入长度的属性。设置后,用户无法输入超过指定数量的字符。
示例:
上面代码中,用户名最多输入10个字符,留言内容最多100个字符。浏览器会自动阻止超出长度的输入。
立即学习“前端免费学习笔记(深入)”;
结合 size 与 minlength 实现更完整的控制
除了 maxlength,还可以使用以下两个相关属性:
- minlength:规定输入内容的最小长度,常用于表单验证。如果输入字符少于该值,提交时会提示错误。
- size:控制输入框的显示宽度(以字符为单位),不影响实际输入长度限制,仅影响外观。
示例:
word" name="pwd" minlength="6" maxlength="16" required>此密码框要求输入至少6位,最多16位,否则无法提交表单。
对 textarea 和其他输入类型的应用
maxlength 同样适用于 textarea,非常适合限制评论、留言等内容长度。
示例:
注意:虽然 cols 控制显示列数,但真正限制输入量的还是 maxlength。
前端限制的局限性与补充建议
HTML 的 maxlength 属于前端限制,用户可通过修改HTML或使用开发者工具绕过。因此:
- 必须在服务器端再次验证输入长度,确保数据安全。
- 可配合JavaScript实时显示剩余字数,提升用户体验。
JavaScript 示例(显示剩余字符):
还可输入50字
基本上就这些。使用 maxlength 简单有效,搭配 minlength 和服务端验证,能很好地控制表单输入长度。不复杂但容易忽略细节,尤其是安全性方面要格外注意。











