HTML 表单属性实战：autocomplete、form、约束与提交行为

HTML 表单属性会改变浏览器填充、校验、提交地址和方法。它们能减少脚本并提升可访问性，但不能代替服务器校验。旧资料中的输入类型兼容矩阵也会随浏览器更新，应以当前标准、MDN 兼容数据和项目目标环境为准。

autocomplete 是给浏览器和用户的提示

autocomplete 可设置 on / off，也可用标准 token 描述字段用途，例如 name、email、current-password、new-password、one-time-code。具体值应和字段语义匹配，帮助浏览器填充和密码管理器工作；不要为了“安全”给所有字段都写 off，浏览器也可能忽略登录字段上的关闭建议。

<label for='email'>邮箱</label>
<input id='email' name='email' type='email' autocomplete='email' required>
<label for='password'>密码</label>
<input id='password' name='password' type='password' autocomplete='current-password' required>

form 属性关联控件，覆盖属性只改变本次提交

form='form-id' 可把表单关联控件放在 form 元素之外，适合复杂布局；每个需要关联的控件都要有自己的属性，且 ID 必须唯一。与某个表单关联不代表该元素一定会被提交，仍要看它是否是可提交控件以及是否有 name。

提交按钮上的 formaction、formmethod、formenctype、formtarget、formnovalidate 可为该按钮触发的提交覆盖表单默认值。把覆盖范围写清楚，避免页面上多个按钮让用户不确定数据将发往哪里。敏感信息不要放入 GET query；TLS、身份认证、CSRF 防护和服务端授权仍须正确配置。

约束验证：提示有用，边界仍在服务端

required、min、max、step、minlength、maxlength 和 pattern 可表达常见约束。浏览器会依据控件类型进行格式检查，例如 email 只检查基本格式，并不证明地址存在或用户能收信。日期、数字和文件控件的原生 UI 会因平台而异。

默认提交会触发交互式约束验证。novalidate 会关闭这次表单提交的原生交互校验，可用于自定义错误展示；若用 JS 接管，需明确调用校验 API 并把错误反馈关联到字段。直接调用 form.submit() 不会触发约束校验，程序化提交应谨慎选择行为。

const form = document.querySelector('#profile-form');

form.addEventListener('submit', (event) => {
  if (!form.reportValidity()) {
    event.preventDefault();
    return;
  }

  // 请求仍需由服务端进行认证、授权和字段校验。
});

服务器端必须对每个请求重新验证类型、范围、长度、格式、业务状态和用户权限。前端 HTML 可被开发者工具改写，客户端校验只是用户体验，不是安全控制。

autofocus、list、multiple 等细节

autofocus 应谨慎使用：页面加载后强制移动焦点会打断阅读，也可能在手机上拉起键盘；通常只为明确的短流程选择一个初始焦点。list 连接 datalist 建议值而非固定选项；multiple 在 email/file 等适用控件上允许多个值；min / max / step 的语义依控件类型而定。

迁移属性清单时不要从旧文章中照搬“支持/不支持浏览器”表。先查看 WHATWG 与 MDN 当前说明，再在项目支持的桌面/手机浏览器实测：键盘、错误文案、自动填充、焦点、复制粘贴、自动化测试以及服务端错误响应。

发布前检查

1. 每个控件有可见 label、稳定 name/id 和符合用途的 autocomplete token。
2. 用户能理解约束、修正错误；错误信息与控件关联，键盘焦点不会丢失。
3. form 外控件的 form owner 与按钮覆盖属性都已逐项确认。
4. GET 不承载密码、验证码、访问令牌等敏感字段。
5. 后端对输入与权限重新校验；不要把 novalidate 或前端脚本当作安全措施。

参考：MDN autocomplete、MDN form attribute、MDN input、MDN constraint validation、MDN form validation tutorial、OWASP Input Validation Cheat Sheet。