支持 max 属性的表单元素包括 input 的 number、range、date、time、datetime-local、month、week 类型，以及 meter 元素；其他类型如 text、email、textarea 不支持。
哪些表单元素支持 max 属性
max 是 HTML5 原生属性，只对特定类型生效：它仅作用于 <input> 的 number、range、date、time、datetime-local、month、week 类型，以及 <meter></meter> 元素。其他类型如 text、email、textarea 完全忽略该属性。
常见错误现象：<input type="number" max="100"> 能正常限制；但写成 <input type="text" max="100"> 或 <input type="number" max="abc">（值非法）时，浏览器静默忽略，不报错也不生效。
-
max必须配合min使用才构成完整范围校验，但单独使用max也合法（此时下限默认为负无穷或类型最小值） -
date类型的max值必须是YYYY-MM-DD格式，如max="2026-12-31"；time类型则为HH:MM或HH:MM:SS - Firefox 旧版本（≤115）和 IE9– 不支持
max，表单验证会跳过，需 JS 回退校验
max 和 maxlength 容易混淆的点
max 控制的是“数值或时间的上限”，maxlength 控制的是“字符串字符数上限”，两者语义完全不同，不能混用。
典型误用：<input type="number" maxlength="3"> —— 这里 maxlength 被浏览器完全无视，用户仍可输入 9999；真正起作用的应是 max="999"。
-
number类型中，max="10"允许输入10.0、9.999，但拒绝10.01；而maxlength="3"对它无效 -
textarea支持maxlength，但不支持max；写max="100"属于无效 HTML 属性，无任何效果 - 移动端 iOS Safari 对
max的日期/时间控件支持较好；Android Chrome 部分版本在datetime-local中可能忽略max，建议真机测试
如何让 max 生效并触发校验
仅设置 max 属性不足以确保用户感知限制——必须配合表单提交行为或显式调用 checkValidity() 才能触发原生提示。
- 用户手动输入超限值后失焦（
blur），或点击<input type="submit">，浏览器会高亮字段并显示类似“值必须小于或等于 XX”的提示 - JS 中可主动校验：
inputEl.checkValidity()返回false，inputEl.validationMessage可读取提示文案 - 样式上可利用
:out-of-range伪类定制超限状态，例如input:out-of-range { border-color: #d32f2f; } - 注意：若同时设了
required，空值会优先触发“请填写此字段”，掩盖out-of-range状态，逻辑顺序需留意
后端必须重新校验 max 限制
前端 max 是纯体验层防护，删掉属性、禁用 JS、用 curl 发请求，都能绕过。服务端收到数据后，必须独立解析并比对业务规则。
- PHP 示例：
if ((int)$age > 120) { die('年龄超出允许范围'); }，不能只信$_POST['age']没超 HTML 的max="120" - Node.js 示例：对
req.body.date，需用new Date(value) 判断，而非依赖客户端传来的字符串 - 数据库层面也要设约束，如 MySQL 的
CHECK (age BETWEEN 0 AND 120)，避免脏数据入库 - 特别注意时区：
datetime-local不带时区，但服务端解析时若按 UTC 处理，可能导致逻辑偏差，建议统一转为 ISO 字符串再校验
真正容易被忽略的是：当 max 与 step 同时存在时，合法值必须同时满足两者。比如 <input type="number" min="0" max="10" step="3">，用户只能输入 0、3、6、9 —— 10 虽然 ≤ max，但不符合 step 步长，仍会被拒绝。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
