在HTML表单开发中，我们经常需要限制用户在输入框中能够输入的最大字符数量，比如手机号输入框最多只能输入11位，验证码输入框最多只能输入6位。这时候不需要额外编写JavaScript校验逻辑，直接使用HTML原生的maxlength属性就能实现需求。
maxlength属性基本说明
maxlength是HTML中用于限制可输入元素最大字符数的属性，取值为非负整数，单位是字符。当给元素设置这个属性后，用户无法输入超过指定数量的字符，超过的部分会被自动忽略。
需要注意的是，maxlength属性仅对以下元素生效：
- <input>元素（除type为number、range、color、checkbox、radio、file、hidden、image、submit、reset、button的类型外）
- <textarea>元素
常见输入框maxlength设置示例
文本输入框设置最大长度
普通的文本输入框设置maxlength非常简单，直接在<input>标签中添加maxlength属性并指定数值即可：
<!-- 用户名输入框最多允许输入10个字符 --> <label for="username">用户名：</label> <input type="text" id="username" name="username" maxlength="10" placeholder="最多输入10个字符">
密码输入框设置最大长度
密码输入框同样支持maxlength属性，设置方式和文本输入框一致：
<!-- 密码输入框最多允许输入16个字符 --> <label for="password">密码：</label> <input type="password" id="password" name="password" maxlength="16" placeholder="最多输入16个字符">
多行文本域设置最大长度
<textarea>元素也支持maxlength属性，设置后用户无法输入超过指定数量的字符：
<!-- 备注文本域最多允许输入200个字符 --> <label for="remark">备注：</label> <textarea id="remark" name="remark" maxlength="200" placeholder="最多输入200个字符"></textarea>
特殊场景注意事项
type为number的输入框
当<input>的type为number时，maxlength属性不会生效，这时候需要使用max属性来限制数值的最大值，而不是字符长度：
<!-- 年龄输入框，限制最大值为120 --> <label for="age">年龄：</label> <input type="number" id="age" name="age" min="1" max="120">
maxlength与value的默认值
如果给输入框设置了默认的value值，且value的长度超过了maxlength的设置，那么超过的部分会被自动截断，只保留前maxlength个字符：
<!-- 默认值为12345678901，maxlength为10，实际显示1234567890 --> <input type="text" maxlength="10" value="12345678901">
粘贴内容的长度限制
maxlength属性不仅限制用户输入，也会限制粘贴的内容，如果粘贴的内容长度超过maxlength，只会保留前maxlength个字符。
常见问题解答
maxlength能限制中文吗
可以，maxlength统计的是字符数，一个中文、一个英文、一个符号都算一个字符，所以设置maxlength="5"的话，最多可以输入5个中文，或者5个英文，或者两者的组合总字符数为5。
maxlength是前端限制还是后端限制
maxlength只是前端层面的限制，用户可以通过修改HTML代码绕过这个限制，所以后端接口也需要做对应的长度校验，避免非法数据提交。
注意：maxlength属性不会限制通过JavaScript直接设置value值的情况，如果需要严格限制，前端还需要结合额外的校验逻辑。
总结
HTML的maxlength属性是实现输入框最大长度限制最简单的方式，适用于大多数文本类的输入框和文本域场景。使用时需要注意它只对部分元素生效，且type为number的输入框不支持该属性。同时前端限制不能替代后端校验，两者结合才能保证数据的合法性。