HTML5 表单新特性：input 类型/属性/验证/placeholder
Introduction
HTML5 为 Web 表单带来了革命性的升级，新增了大量 input 类型、属性和内置验证机制，让开发者无需依赖 JavaScript 即可实现丰富的表单交互和即时校验。从邮箱、日期到滑块和颜色选择器，HTML5 表单极大地提升了用户体验和开发效率。本指南系统梳理所有新特性、属性语法、验证 API 以及实际应用中的注意事项，助你构建现代化表单。
基础语法
1. 新型 input 类型
<!-- 邮箱 -->
<input type="email" name="email" required>
<!-- URL -->
<input type="url" name="website">
<!-- 电话（移动端调起数字键盘） -->
<input type="tel" name="phone">
<!-- 数字 -->
<input type="number" name="age" min="0" max="120">
<!-- 范围滑块 -->
<input type="range" name="volume" min="0" max="100" step="5">
<!-- 日期时间 -->
<input type="date"> <!-- 日期 -->
<input type="time"> <!-- 时间 -->
<input type="datetime-local"> <!-- 本地日期时间 -->
<input type="month"> <!-- 月份 -->
<input type="week"> <!-- 周 -->
<!-- 颜色选择器 -->
<input type="color" name="bg-color">
<!-- 搜索框 -->
<input type="search" name="query">
<!-- 文件（接受图片） -->
<input type="file" accept="image/*">
2. 新增表单属性
<!-- 占位提示文字 -->
<input type="text" placeholder="请输入用户名">
<!-- 自动完成 -->
<input type="text" autocomplete="username">
<!-- 自动聚焦 -->
<input type="text" autofocus>
<!-- 只读但随表单提交 -->
<input type="text" readonly value="不可修改">
<!-- 禁用 -->
<input type="text" disabled>
<!-- 输入模式（移动端键盘类型） -->
<input type="text" inputmode="numeric">
<!-- 正则校验 -->
<input type="text" pattern="[A-Za-z]{6,}">
<!-- 实时校验 -->
<input type="text" required minlength="3" maxlength="20">
完整代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 表单示例</title>
<style>
body { font-family: Arial, sans-serif; max-width: 600px; margin: 40px auto; padding: 20px; }
.form-group { margin-bottom: 20px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input, select, textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
input:invalid { border-color: #e74c3c; }
input:valid { border-color: #2ecc71; }
.error-msg { color: #e74c3c; font-size: 12px; display: none; }
input:invalid ~ .error-msg { display: block; }
button { background: #3498db; color: #fff; padding: 12px 30px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
button:hover { background: #2980b9; }
fieldset { border: 1px solid #ddd; border-radius: 4px; padding: 20px; margin-bottom: 20px; }
legend { font-weight: bold; padding: 0 10px; }
</style>
</head>
<body>
<h1>HTML5 表单新特性演示</h1>
<form action="/submit" method="POST" novalidate>
<fieldset>
<legend>基础信息</legend>
<div class="form-group">
<label for="username">用户名（必填，3-20字符）</label>
<input type="text" id="username" name="username" required minlength="3" maxlength="20" pattern="[A-Za-z0-9_]+" title="仅允许字母、数字和下划线">
<span class="error-msg">请输入3-20位的用户名</span>
</div>
<div class="form-group">
<label for="email">邮箱地址</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">密码（至少8位，含数字和字母）</label>
<input type="password" id="password" name="password" required minlength="8" pattern="(?=.*[0-9])(?=.*[a-zA-Z]).{8,}">
</div>
</fieldset>
<fieldset>
<legend>详细信息</legend>
<div class="form-group">
<label for="age">年龄（18-100）</label>
<input type="number" id="age" name="age" min="18" max="100">
</div>
<div class="form-group">
<label for="birthday">出生日期</label>
<input type="date" id="birthday" name="birthday">
</div>
<div class="form-group">
<label for="website">个人网站</label>
<input type="url" id="website" name="website" placeholder="https://example.com">
</div>
<div class="form-group">
<label for="phone">手机号码</label>
<input type="tel" id="phone" name="phone" pattern="1[3-9]\d{9}">
</div>
</fieldset>
<fieldset>
<legend>其他控件</legend>
<div class="form-group">
<label for="color">主题颜色</label>
<input type="color" id="color" name="color" value="#3498db">
</div>
<div class="form-group">
<label for="salary">期望薪资（范围）</label>
<input type="range" id="salary" name="salary" min="5000" max="50000" step="1000" oninput="salaryOut.value=this.value">
<output id="salaryOut">27500</output> 元/月
</div>
<div class="form-group">
<label for="avatar">上传头像（图片）</label>
<input type="file" id="avatar" name="avatar" accept="image/*">
</div>
</fieldset>
<button type="submit">提交注册</button>
</form>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
if (!form.checkValidity()) {
e.preventDefault();
alert('请检查表单填写是否正确');
}
});
</script>
</body>
</html>常见问题
- novalidate 属性是做什么的？ 加在 form 标签上可禁用浏览器默认的即时校验，方便你用 JavaScript 自定义验证逻辑。
- 手机端输入体验如何优化？ 使用
inputmode属性（如inputmode="numeric"）可以控制移动端弹出数字键盘；autocomplete属性可以调起浏览器自动填充。 - date 类型在旧浏览器不兼容怎么办？ 可以使用 Polyfill 库（如 flatpickr）作为降级方案，或用
<input type="text">配合 pattern 校验。 - pattern 正则校验失败时如何自定义提示？ 可以用
setCustomValidity()方法自定义错误信息，配合reportValidity()显示。