HTML5 表单属性

HTML5 给 <form> 与 <input> 增加了一大批属性，让"必填校验、格式限制、自动聚焦、跨表单提交"等能力不需要写一行 JS 就能实现。学习它们是写出规范、健壮表单的第一步。

form 上的新属性

autocomplete="on|off" 控制表单自动填充；novalidate 让提交时跳过校验。

<form action="/submit" autocomplete="on">
    用户名：<input type="text" name="user"><br>
    <input type="submit" value="提交">
</form>

input 上的校验类属性

属性	作用
required	必填，为空无法提交
placeholder	输入提示占位文字
pattern	正则校验，如 pattern="[0-9]{11}"
min / max / step	数字范围与步长
multiple	允许 email/file 多值
autofocus	页面加载即聚焦

<form>
    手机号：<input type="tel" name="phone" required
             pattern="[0-9]{11}" placeholder="11 位手机号"><br>
    <input type="submit" value="提交">
</form>

在浏览器中显示为：不填或格式不对时直接点提交，浏览器会提示"请填写此字段/请与所请求的格式保持一致"，阻止提交。

摆脱表单的 form 属性

form 属性可以把 input 放到 <form> 外面，只要它的值等于表单的 id 就仍属于该表单并参与提交。

<form id="f1" action="/save">
    <input type="submit" value="提交">
</form>
<!-- 下面的输入框虽然在表单外，但仍属于 f1 -->
<input type="text" name="nickname" form="f1">

提交方式相关属性

formaction 覆盖 form 的 action，formmethod 覆盖 method（post/get），formenctype 覆盖编码，formnovalidate 让该按钮提交时跳过校验，formtarget 指定打开提交结果的窗口。

<form action="/save" method="get">
    <input type="submit" value="普通保存">
    <input type="submit" formaction="/save2"
           formmethod="post" value="另存为(post)">
</form>

autocomplete 细节与易错点

autocomplete 也可单独写在控件上：<input name="email" autocomplete="email">，浏览器能借此做智能填充（用户名、邮箱、地址等有标准取值）。

易错点：① required/pattern 只在提交时拦截，不是数据安全的保证，服务端必须二次校验；② pattern 用的是完整匹配的正则，想要部分匹配记得加 .*；③ min/max 对 date、number、range 生效，对普通文本框无效；④ autofocus 一个页面最好只用一次，以免干扰读屏用户。

小结：required/pattern/min/max 提供零 JS 的客户端校验，formaction/formmethod/form 属性让提交更灵活，服务端校验始终不可省略。