HTML5对表单相关的内容做了很多扩展，新增了很多输入类型和实用的功能，让开发者不需要写大量JavaScript代码就能实现很多常见的表单需求，同时也提升了用户填写表单的体验。
HTML5新增的输入类型
HTML5新增了很多input的type属性值，这些类型在支持的浏览器中会有对应的原生交互效果，比如移动端会自动弹出对应的键盘类型。
常见新增输入类型列表
| 输入类型 | 说明 | 使用场景 |
|---|---|---|
| 用于输入邮箱地址，浏览器会自动验证格式 | 邮箱填写输入框 | |
| url | 用于输入网址，浏览器会验证格式 | 个人主页、链接填写 |
| number | 用于输入数字，可设置最大最小值和步长 | 年龄、数量填写 |
| range | 显示为滑块，用于选择范围内的数值 | 音量、亮度调节 |
| date | 用于选择日期，弹出日期选择器 | 生日、预约日期选择 |
| search | 用于搜索框，部分浏览器会显示清除按钮 | 页面搜索输入框 |
| tel | 用于输入电话号码，移动端会弹出数字键盘 | 手机号、联系电话填写 |
新增输入类型示例代码
<form> <p>邮箱：<input type="email" name="user_email" required></p> <p>年龄：<input type="number" name="user_age" min="1" max="120" step="1"></p> <p>预约日期：<input type="date" name="order_date"></p> <p>调节亮度：<input type="range" name="light" min="0" max="100" value="50"></p> <p><input type="submit" value="提交"></p> </form>
HTML5表单新增的功能特性
除了新的输入类型，HTML5还为表单和输入元素新增了很多实用的属性功能，覆盖了很多常见的表单需求。
占位提示placeholder
placeholder属性可以在输入框未输入内容时显示提示文字，用户点击输入框后提示文字消失，不需要额外的JavaScript控制。
<input type="text" name="username" placeholder="请输入用户名，长度为6-12位">
原生表单验证
HTML5提供了原生的表单验证能力，不需要写JavaScript验证代码，常见的验证属性如下：
- required：标记输入框为必填项，提交时如果为空会提示用户填写
- pattern：通过正则表达式验证输入内容，比如验证手机号格式
- min/max：用于number、range、date等类型，限制输入值的范围
<!-- 验证手机号格式 -->
<input type="tel" name="phone" required pattern="^1[3-9]d{9}$" placeholder="请输入11位手机号">
自动聚焦autofocus
页面加载完成后，带有autofocus属性的输入框会自动获得焦点，不需要JavaScript调用focus()方法。
<input type="text" name="search_key" autofocus placeholder="页面加载后自动聚焦">
自动补全datalist
datalist标签可以为输入框提供预定义的选项列表，用户既可以输入自定义内容，也可以从下拉列表中选择。
<input type="text" name="city" list="city_list" placeholder="选择或输入城市"> <datalist id="city_list"> <option value="北京"> <option value="上海"> <option value="广州"> <option value="深圳"> </datalist>
禁用自动补全autocomplete
如果不想让浏览器自动填充表单内容，可以给form或者单个输入框设置autocomplete="off"。
<form action="" autocomplete="off"> <input type="text" name="password" placeholder="密码不会自动填充"> </form>
兼容性说明
虽然HTML5表单新特性已经得到了大部分现代浏览器的支持，但在一些老旧浏览器中可能无法正常显示对应的交互效果，比如不支持date类型的浏览器会将其渲染为普通文本框。如果需要兼容老旧浏览器，可以搭配对应的polyfill库来实现兼容效果，保证所有用户都能正常使用表单功能。
HTML5表单input_type表单验证placeholder修改时间：2026-06-23 11:24:29