表单是网页与用户打交道最频繁的入口，登录、注册、搜索、下单都离不开它。HTML5在原有表单基础上扩充了一大批新元素、新类型和新属性，很多以前必须靠JavaScript才能实现的交互，现在一行标签就能搞定。但不少开发者对这些新特性的理解停留在表面，要么重复造轮子，要么踩进隐蔽的坑里。这篇文章就把HTML5表单元素的核心内容系统梳理一遍，并集中指出常见误区。
HTML5表单的基础结构与新增input类型
先回顾一下表单的基本骨架。一个完整的表单由<form>元素包裹，内部放置输入控件和提交按钮。<form>的几个关键属性值得注意：action指定提交地址，method决定GET还是POST，enctype在文件上传时必须写成multipart/form-data，否则服务端拿不到文件内容。
HTML5最大的变化在于<input>的type属性大幅扩容。以前只有text、password、radio、checkbox等少数几种，现在新增了email、url、tel、number、range、date、color、search等十多种类型。这些类型不只是外观不同，浏览器会根据类型自动做格式校验，还会在移动端调起对应的软键盘。例如type为email时，输入非法邮箱格式直接提交，浏览器会弹出提示并阻止提交，完全不需要自己写正则。
<form action="/register" method="post"> <label>邮箱：<input type="email" name="email" required></label> <label>个人主页：<input type="url" name="homepage"></label> <label>年龄：<input type="number" name="age" min="1" max="120"></label> <label>生日：<input type="date" name="birthday"></label> <label>满意度：<input type="range" name="score" min="0" max="100"></label> <button type="submit">提交</button> </form>
这些类型的兼容性在主流浏览器上已经没有问题，可以放心使用。需要注意的一点是，type为number的输入框允许输入小数和负数，如果只想收正整数，要配合min、step属性一起限制，或者在提交前用JavaScript再做一层判断。
常用校验属性与交互增强
除了类型自带校验，HTML5还提供了一组验证属性。required声明字段必填，pattern接受一个正则表达式约束格式，minlength和maxlength限制长度，min、max、step约束数值范围。这些属性配合type使用，基本覆盖了绝大多数校验场景，代码量比手写JS校验少一大截。
还有一类属性负责提升输入体验。placeholder给出输入提示，autofocus让页面加载后光标自动落在某个输入框，autocomplete提示浏览器记住并自动填充历史输入，list配合<datalist>元素可以实现原生下拉建议，用户既能选又能自己输入，比select灵活得多。
<input type="text" name="city" list="cityList" placeholder="请输入或选择城市">
<datalist id="cityList">
<option value="北京">
<option value="上海">
<option value="广州">
</datalist>
<input type="text" name="phone" pattern="1[3-9][0-9]{9}"
title="请输入11位手机号" required>校验状态还可以用CSS伪类来美化。:required、:optional、:valid、:invalid这几个伪类会根据字段当前状态自动生效，配合边框颜色变化，用户一眼就能看出哪个字段填错了。值得注意的是，:invalid在页面刚加载、用户还没输入时就会匹配，容易造成满屏红色，建议加上:focus限定，或者配合form标签的novalidate属性自己控制校验时机。
input:required {
border-left: 3px solid #f0ad4e;
}
input:focus:invalid {
border-color: #d9534f;
}
input:valid {
border-color: #5cb85c;
}容易踩的坑与正确做法
第一个常见的坑是以为客户端校验能替代服务端校验。浏览器校验只是体验优化，用户关掉JavaScript或者直接用工具构造请求，就能绕过一切前端检查。服务端必须对每个字段重新校验一遍，这是安全底线，任何时候都不能省。
第二个坑是滥用type="number"。它无法用maxlength限制位数，而且输入框右侧会出现上下调节的小箭头，在手机号、身份证这类场景反而不合适。这种长数字串建议用type="text"配合inputmode="numeric"和pattern，既能调起数字键盘，又能控制长度。
第三个坑是autocomplete的误用。登录表单里正确设置autocomplete能让密码管理器正常工作，比如用户名字段设为autocomplete="username"，密码字段设为autocomplete="current-password"。但公共电脑上如果乱设成on，可能导致敏感信息被自动填入，敏感字段应该显式设为autocomplete="off"。
第四个坑涉及required和hidden的交互。<input type="hidden">设置required是无效的，浏览器会忽略它；同样，被display:none隐藏的必填字段在某些浏览器上会导致表单无法提交且没有任何提示，用户会莫名其妙卡住。动态显隐字段时，记得同步移除required属性。另外，button不写type时默认是submit，放在form里随手一点就触发了提交，养成显式写type="button"的习惯能避免很多诡异问题。
最后提醒一点，自定义错误提示可以用setCustomValidity方法，配合form的novalidate属性，就能实现完全自定义的校验流程：既保留原生的校验规则计算，又能用自己的UI展示错误信息，是目前兼顾效率与灵活性的推荐方案。掌握这些要点后，HTML5表单元素才能真正发挥价值，让代码更简洁、体验更顺畅。