5. 表单增强与数据交互工程
目录
[5. 表单增强与数据交互工程](#5. 表单增强与数据交互工程)
[5.1 表单控件演进与类型](#5.1 表单控件演进与类型)
[5.1.1 Input 类型全解：email, tel, url, number, date, color 等原生控件](#5.1.1 Input 类型全解：email, tel, url, number, date, color 等原生控件)
[核心 Input 类型与行为](#核心 Input 类型与行为)
[5.1.2 HTML5 辅助控件](#5.1.2 HTML5 辅助控件)
[5.1.3 文件上传进阶：accept, multiple, capture 与 webkitdirectory](#5.1.3 文件上传进阶：accept, multiple, capture 与 webkitdirectory)
[5.2 表单验证与用户体验](#5.2 表单验证与用户体验)
[5.2.1 原生验证约束：required, pattern, min/max/step, minlength/maxlength](#5.2.1 原生验证约束：required, pattern, min/max/step, minlength/maxlength)
[5.2.2 交互反馈 API：setCustomValidity() 与 ValidityState 对象](#5.2.2 交互反馈 API：setCustomValidity() 与 ValidityState 对象)
[5.2.3 CSS 伪类增强：:valid, :invalid, :user-valid, :user-invalid](#5.2.3 CSS 伪类增强：:valid, :invalid, :user-valid, :user-invalid)
[5.2.4 输入模式优化：inputmode 属性在移动端的作用](#5.2.4 输入模式优化：inputmode 属性在移动端的作用)
[inputmode 值与键盘映射](#inputmode 值与键盘映射)
[5.3 提交机制与安全防御](#5.3 提交机制与安全防御)
[5.3.1 表单重写属性：formaction, formmethod 等](#5.3.1 表单重写属性：formaction, formmethod 等)
[5.3.2 CSRF 防御策略：SameSite Cookie 与隐藏 Token](#5.3.2 CSRF 防御策略：SameSite Cookie 与隐藏 Token)
[5.3.3 自动填充管理：autocomplete 属性值详解](#5.3.3 自动填充管理：autocomplete 属性值详解)
[autocomplete 关键值](#autocomplete 关键值)
表单是 Web 应用中数据交互的咽喉要道。
HTML5 不仅引入了丰富的原生控件，更构建了一套完整的客户端验证体系，将原本依赖 JavaScript 的交互逻辑下沉到浏览器内核层面，极大地提升了开发效率与用户体验。
本章将深入解析从控件选型到安全防御的全链路工程实践。
5.1 表单控件演进与类型
现代表单控件早已超越了简单的文本输入框。
通过类型化的 Input 标签，开发者可以调用浏览器原生的日期选择器、颜色板甚至摄像头，实现"零 JavaScript"的富交互。
5.1.1 Input 类型全解：email, tel, url, number, date, color 等原生控件
HTML5 引入了一系列语义化的输入类型，它们在桌面端可能外观差异不大，但在移动端会自动触发特定的虚拟键盘，并在提交时提供原生格式校验。
核心 Input 类型与行为
|------------|---------------------|----------------------------|------------|
| 类型 | 移动端键盘行为 | 原生验证规则 | 典型应用场景 |
| email | 显示 "@" 和 "." 快捷键 | 必须包含有效邮箱格式 | 用户注册、找回密码 |
| tel | 直接弹出数字拨号盘 | 无默认格式（需配合 pattern） | 联系电话、验证码 |
| url | 显示 "/" 和 ".com" 快捷键 | 必须包含有效 URL 协议 (http/https) | 个人主页、链接提交 |
| number | 显示数字键盘（含小数点/增减键） | 仅允许数字，支持 min/max/step | 数量、年龄、金额 |
| date | 弹出原生日历控件 | 格式为 YYYY-MM-DD | 生日、预约日期 |
| color | 弹出系统取色器 | 格式为 #HexColor | 主题配置、装修工具 |
代码模块:
html
<form>
<!-- 解释：email 类型在移动端优化键盘，且自带格式校验 -->
<input type="email" placeholder="请输入邮箱" required>
<!-- 解释：tel 类型不校验格式（因为各国号码规则不同），需配合正则 -->
<input type="tel" pattern="[0-9]{11}" placeholder="11位手机号">
<!-- 解释：number 类型可限制步长，如只能输入整数或 0.5 倍数 -->
<input type="number" step="0.01" min="0" max="100" placeholder="价格(0-100)">
<!-- 解释：date 类型无需引入 jQuery UI 等重型库即可获得日历 -->
<input type="date" min="2025-01-01" max="2025-12-31">
</form>这些新类型就像是给浏览器发出的"暗号"。
告诉浏览器"我要输邮箱"，手机就会聪明地弹出带有 @ 符号的键盘；
告诉浏览器"我要输日期"，它就会拿出自带的日历本。
这省去了过去大量编写 JavaScript 插件，例如要使用正则表达式等等的功夫。
5.1.2 HTML5 辅助控件：<datalist>, <progress>, <meter>
除了输入类控件，HTML5 还提供了用于展示状态和辅助输入的组件，它们填补了动态数据展示的空白。
辅助控件辨析
|------------------|------------------|--------------------------------------|------------|
| 控件 | 核心功能 | 与相似元素的区别 | 浏览器支持度 |
| <datalist> | 为 input 提供自动补全建议 | 不同于 <select>，用户仍可输入自定义值 | 高 |
| <progress> | 展示任务完成进度 | 不确定进度时可不写 value | 高 |
| <meter> | 展示已知范围内的标量测量 | 不同于 progress（任务进度），meter 表示存量（如磁盘用量） | 高 |
案例
搜索区域使用datalist
点击小三角，显示数据列表：
选择点击用户管理：
html
<!-- 智能搜索 -->
<div class="card">
<div class="card-header">
<span class="icon">🔍</span>
<h2>快速搜索</h2>
</div>
<div class="search-wrapper">
<span class="search-icon">🔎</span>
<input type="text" list="quick-links" class="search-input" placeholder="搜索功能、设置或文件..." id="searchInput">
<datalist id="quick-links">
<option value="用户管理">
<option value="系统设置">
<option value="存储空间">
<option value="网络配置">
<option value="安全中心">
<option value="备份恢复">
<option value="日志查看">
<option value="应用商店">
</datalist>
</div>
<p class="search-tip">输入关键词或从列表中选择快速跳转</p>
<div class="search-result" id="searchResult">
<h3>跳转到：<span id="resultTitle"></span></h3>
<p id="resultDesc"></p>
</div>
</div>
javascript
// 搜索功能
const searchInput = document.getElementById('searchInput');
const searchResult = document.getElementById('searchResult');
const resultTitle = document.getElementById('resultTitle');
const resultDesc = document.getElementById('resultDesc');
const pageMap = {
'用户管理': '管理用户账号、权限和角色分配',
'系统设置': '配置系统参数、显示和语言选项',
'存储空间': '查看磁盘使用情况，清理临时文件',
'网络配置': '管理网络连接、代理和DNS设置',
'安全中心': '病毒扫描、防火墙和安全日志',
'备份恢复': '创建系统备份，恢复历史版本',
'日志查看': '查看系统运行日志和错误报告',
'应用商店': '浏览和安装新的应用程序'
};
searchInput.addEventListener('change', () => {
const value = searchInput.value;
if (pageMap[value]) {
resultTitle.textContent = value;
resultDesc.textContent = pageMap[value];
searchResult.classList.add('show');
}
});文件上传进度使用process
html
<!-- 文件上传进度 -->
<div class="card">
<div class="card-header">
<h2>文件传输</h2>
</div>
<div class="upload-list">
<div class="upload-item">
<div class="file-info">
<div class="file-name">项目报告_2026.pdf</div>
<div class="file-meta">
<span class="file-size">2.4 MB / 3.2 MB</span>
<span class="file-percent" id="percent1">75%</span>
</div>
<progress id="progress1" value="75" max="100"></progress>
</div>
</div>
<div class="upload-item">
<div class="file-info">
<div class="file-name">设计稿_v3.png</div>
<div class="file-meta">
<span class="file-size">4.8 MB / 12.5 MB</span>
<span class="file-percent" id="percent2">38%</span>
</div>
<progress id="progress2" value="38" max="100"></progress>
</div>
</div>
</div>
<div class="btn-group">
<button class="btn btn-primary" id="uploadBtn">模拟上传</button>
<button class="btn btn-secondary" id="resetBtn">重置</button>
</div>
</div>
javascript
// 进度条模拟
const uploadBtn = document.getElementById('uploadBtn');
const resetBtn = document.getElementById('resetBtn');
const progress1 = document.getElementById('progress1');
const progress2 = document.getElementById('progress2');
const percent1 = document.getElementById('percent1');
const percent2 = document.getElementById('percent2');
let timer1, timer2;
uploadBtn.addEventListener('click', () => {
// 清除之前的定时器
clearInterval(timer1);
clearInterval(timer2);
// 模拟上传进度
timer1 = setInterval(() => {
let val = parseInt(progress1.value);
if (val >= 100) {
clearInterval(timer1);
percent1.textContent = '已完成';
} else {
progress1.value = val + Math.random() * 3;
percent1.textContent = Math.round(progress1.value) + '%';
}
}, 100);
timer2 = setInterval(() => {
let val = parseInt(progress2.value);
if (val >= 100) {
clearInterval(timer2);
percent2.textContent = '已完成';
} else {
progress2.value = val + Math.random() * 2;
percent2.textContent = Math.round(progress2.value) + '%';
}
}, 150);
});
resetBtn.addEventListener('click', () => {
clearInterval(timer1);
clearInterval(timer2);
progress1.value = 75;
progress2.value = 38;
percent1.textContent = '75%';
percent2.textContent = '38%';
});磁盘空间使用meter
html
<!-- 磁盘空间 -->
<div class="card">
<div class="card-header">
<h2>存储空间</h2>
</div>
<div class="disk-list">
<div class="disk-item">
<div class="disk-info">
<div class="disk-name">系统盘 (C:)</div>
<div class="disk-desc">系统文件、应用程序</div>
<meter value="0.45" min="0" max="1" low="0.3" high="0.7" optimum="0.4"></meter>
<div class="disk-status">
<span class="disk-used">45 GB / 100 GB</span>
<span class="disk-status-text status-safe">状态良好</span>
</div>
</div>
</div>
<div class="disk-item">
<div class="disk-info">
<div class="disk-name">数据盘 (D:)</div>
<div class="disk-desc">文档、媒体文件</div>
<meter value="0.75" min="0" max="1" low="0.3" high="0.7" optimum="0.4"></meter>
<div class="disk-status">
<span class="disk-used">750 GB / 1 TB</span>
<span class="disk-status-text status-warning">空间紧张</span>
</div>
</div>
</div>
<div class="disk-item">
<div class="disk-info">
<div class="disk-name">云存储</div>
<div class="disk-desc">同步文件、备份</div>
<meter value="0.92" min="0" max="1" low="0.3" high="0.7" optimum="0.4"></meter>
<div class="disk-status">
<span class="disk-used">92 GB / 100 GB</span>
<span class="disk-status-text status-danger">即将已满</span>
</div>
</div>
</div>
</div>
</div>完整案例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>系统控制面板</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #f0f2f5;
min-height: 100vh;
padding: 40px 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
}
h1 {
font-size: 28px;
color: #1a1a2e;
margin-bottom: 30px;
}
/* 卡片通用样式 */
.card {
background: white;
border-radius: 12px;
padding: 24px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.card-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.card-header h2 {
font-size: 18px;
color: #333;
}
.card-header .icon {
width: 24px;
height: 24px;
background: #e8f4fd;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
/* ========== 智能搜索框 ========== */
.search-wrapper {
position: relative;
}
.search-input {
width: 100%;
padding: 14px 16px 14px 44px;
border: 1px solid #e0e0e0;
border-radius: 8px;
font-size: 15px;
transition: all 0.2s;
}
.search-input:focus {
outline: none;
border-color: #4a90d9;
box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15);
}
.search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #999;
}
.search-tip {
margin-top: 10px;
font-size: 13px;
color: #888;
}
/* ========== 进度条区域 ========== */
.upload-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.upload-item {
display: flex;
align-items: center;
gap: 16px;
}
.file-icon {
width: 40px;
height: 40px;
background: #f5f5f5;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.file-info {
flex: 1;
}
.file-name {
font-size: 14px;
color: #333;
margin-bottom: 6px;
}
.file-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.file-size {
font-size: 12px;
color: #888;
}
.file-percent {
font-size: 12px;
color: #4a90d9;
font-weight: 500;
}
/* 原生 progress 美化 */
progress {
width: 100%;
height: 6px;
border-radius: 3px;
overflow: hidden;
}
progress::-webkit-progress-bar {
background: #e8e8e8;
border-radius: 3px;
}
progress::-webkit-progress-value {
background: linear-gradient(90deg, #4a90d9, #67b26f);
border-radius: 3px;
transition: width 0.3s;
}
progress::-moz-progress-bar {
background: linear-gradient(90deg, #4a90d9, #67b26f);
border-radius: 3px;
}
/* ========== 磁盘空间 ========== */
.disk-list {
display: grid;
gap: 20px;
}
.disk-item {
display: flex;
gap: 16px;
align-items: center;
}
.disk-icon {
width: 44px;
height: 44px;
background: #f0f0f0;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
}
.disk-info {
flex: 1;
}
.disk-name {
font-size: 14px;
color: #333;
margin-bottom: 4px;
}
.disk-desc {
font-size: 12px;
color: #888;
margin-bottom: 8px;
}
/* 原生 meter 美化 */
meter {
width: 100%;
height: 8px;
border-radius: 4px;
}
meter::-webkit-meter-bar {
background: #e8e8e8;
border-radius: 4px;
}
/* 安全 - 绿色 */
meter::-webkit-meter-optimum-value {
background: #67b26f;
border-radius: 4px;
}
/* 警告 - 黄色 */
meter::-webkit-meter-suboptimum-value {
background: #f5a623;
border-radius: 4px;
}
/* 危险 - 红色 */
meter::-webkit-meter-even-less-good-value {
background: #ff4757;
border-radius: 4px;
}
.disk-status {
display: flex;
justify-content: space-between;
margin-top: 6px;
}
.disk-used {
font-size: 12px;
color: #666;
}
.disk-status-text {
font-size: 12px;
font-weight: 500;
}
.status-safe { color: #67b26f; }
.status-warning { color: #f5a623; }
.status-danger { color: #ff4757; }
/* 按钮 */
.btn-group {
display: flex;
gap: 10px;
margin-top: 16px;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
}
.btn-primary {
background: #4a90d9;
color: white;
}
.btn-primary:hover {
background: #3a7bc8;
}
.btn-secondary {
background: #f0f0f0;
color: #333;
}
.btn-secondary:hover {
background: #e0e0e0;
}
/* 搜索结果展示 */
.search-result {
margin-top: 16px;
padding: 16px;
background: #f8fafc;
border-radius: 8px;
display: none;
}
.search-result.show {
display: block;
}
.search-result h3 {
font-size: 14px;
color: #333;
margin-bottom: 10px;
}
.search-result p {
font-size: 13px;
color: #666;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container">
<h1>系统控制面板</h1>
<!-- 智能搜索 -->
<div class="card">
<div class="card-header">
<span class="icon">🔍</span>
<h2>快速搜索</h2>
</div>
<div class="search-wrapper">
<span class="search-icon">🔎</span>
<input type="text" list="quick-links" class="search-input" placeholder="搜索功能、设置或文件..." id="searchInput">
<datalist id="quick-links">
<option value="用户管理">
<option value="系统设置">
<option value="存储空间">
<option value="网络配置">
<option value="安全中心">
<option value="备份恢复">
<option value="日志查看">
<option value="应用商店">
</datalist>
</div>
<p class="search-tip">输入关键词或从列表中选择快速跳转</p>
<div class="search-result" id="searchResult">
<h3>跳转到：<span id="resultTitle"></span></h3>
<p id="resultDesc"></p>
</div>
</div>
<!-- 文件上传进度 -->
<div class="card">
<div class="card-header">
<h2>文件传输</h2>
</div>
<div class="upload-list">
<div class="upload-item">
<div class="file-info">
<div class="file-name">项目报告_2026.pdf</div>
<div class="file-meta">
<span class="file-size">2.4 MB / 3.2 MB</span>
<span class="file-percent" id="percent1">75%</span>
</div>
<progress id="progress1" value="75" max="100"></progress>
</div>
</div>
<div class="upload-item">
<div class="file-info">
<div class="file-name">设计稿_v3.png</div>
<div class="file-meta">
<span class="file-size">4.8 MB / 12.5 MB</span>
<span class="file-percent" id="percent2">38%</span>
</div>
<progress id="progress2" value="38" max="100"></progress>
</div>
</div>
</div>
<div class="btn-group">
<button class="btn btn-primary" id="uploadBtn">模拟上传</button>
<button class="btn btn-secondary" id="resetBtn">重置</button>
</div>
</div>
<!-- 磁盘空间 -->
<div class="card">
<div class="card-header">
<h2>存储空间</h2>
</div>
<div class="disk-list">
<div class="disk-item">
<div class="disk-info">
<div class="disk-name">系统盘 (C:)</div>
<div class="disk-desc">系统文件、应用程序</div>
<meter value="0.45" min="0" max="1" low="0.3" high="0.7" optimum="0.4"></meter>
<div class="disk-status">
<span class="disk-used">45 GB / 100 GB</span>
<span class="disk-status-text status-safe">状态良好</span>
</div>
</div>
</div>
<div class="disk-item">
<div class="disk-info">
<div class="disk-name">数据盘 (D:)</div>
<div class="disk-desc">文档、媒体文件</div>
<meter value="0.75" min="0" max="1" low="0.3" high="0.7" optimum="0.4"></meter>
<div class="disk-status">
<span class="disk-used">750 GB / 1 TB</span>
<span class="disk-status-text status-warning">空间紧张</span>
</div>
</div>
</div>
<div class="disk-item">
<div class="disk-info">
<div class="disk-name">云存储</div>
<div class="disk-desc">同步文件、备份</div>
<meter value="0.92" min="0" max="1" low="0.3" high="0.7" optimum="0.4"></meter>
<div class="disk-status">
<span class="disk-used">92 GB / 100 GB</span>
<span class="disk-status-text status-danger">即将已满</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// 搜索功能
const searchInput = document.getElementById('searchInput');
const searchResult = document.getElementById('searchResult');
const resultTitle = document.getElementById('resultTitle');
const resultDesc = document.getElementById('resultDesc');
const pageMap = {
'用户管理': '管理用户账号、权限和角色分配',
'系统设置': '配置系统参数、显示和语言选项',
'存储空间': '查看磁盘使用情况，清理临时文件',
'网络配置': '管理网络连接、代理和DNS设置',
'安全中心': '病毒扫描、防火墙和安全日志',
'备份恢复': '创建系统备份，恢复历史版本',
'日志查看': '查看系统运行日志和错误报告',
'应用商店': '浏览和安装新的应用程序'
};
searchInput.addEventListener('change', () => {
const value = searchInput.value;
if (pageMap[value]) {
resultTitle.textContent = value;
resultDesc.textContent = pageMap[value];
searchResult.classList.add('show');
}
});
// 进度条模拟
const uploadBtn = document.getElementById('uploadBtn');
const resetBtn = document.getElementById('resetBtn');
const progress1 = document.getElementById('progress1');
const progress2 = document.getElementById('progress2');
const percent1 = document.getElementById('percent1');
const percent2 = document.getElementById('percent2');
let timer1, timer2;
uploadBtn.addEventListener('click', () => {
// 清除之前的定时器
clearInterval(timer1);
clearInterval(timer2);
// 模拟上传进度
timer1 = setInterval(() => {
let val = parseInt(progress1.value);
if (val >= 100) {
clearInterval(timer1);
percent1.textContent = '已完成';
} else {
progress1.value = val + Math.random() * 3;
percent1.textContent = Math.round(progress1.value) + '%';
}
}, 100);
timer2 = setInterval(() => {
let val = parseInt(progress2.value);
if (val >= 100) {
clearInterval(timer2);
percent2.textContent = '已完成';
} else {
progress2.value = val + Math.random() * 2;
percent2.textContent = Math.round(progress2.value) + '%';
}
}, 150);
});
resetBtn.addEventListener('click', () => {
clearInterval(timer1);
clearInterval(timer2);
progress1.value = 75;
progress2.value = 38;
percent1.textContent = '75%';
percent2.textContent = '38%';
});
</script>
</body>
</html>5.1.3 文件上传进阶：accept, multiple, capture 与 webkitdirectory
文件上传是 B/S 架构系统中的高频功能。
HTML5 为 <input type="file"> 提供了强大的属性扩展，支持多选、类型过滤和摄像头直拍。
文件上传属性详解
|---------------------|-----------|-----------------------------|-------------------------|
| 属性 | 作用 | 示例值 | 避坑指南 |
| accept | 限定文件类型 | image/*, .pdf, audio/mp3 | 仅作前端过滤，后端必须再次校验 MIME 类型 |
| multiple | 允许选择多个文件 | 布尔属性 | 移动端支持度良好 |
| capture | 调用摄像头/麦克风 | user (前置), environment (后置) | 仅在移动端生效，PC 端忽略 |
| webkitdirectory | 允许选择文件夹 | 布尔属性 | 非标准属性，但主流浏览器均已支持 |
代码模块：
html
<!-- 解释：仅接受图片，且支持多选 -->
<input type="file" accept="image/*" multiple>
<!-- 解释：移动端直接调起后置摄像头拍照 -->
<input type="file" accept="image/*" capture="environment">
<!-- 解释：允许上传整个文件夹（如作业提交系统） -->
<input type="file" webkitdirectory>5.2 表单验证与用户体验
在数据到达服务器之前，前端的验证是提升用户体验、减少无效请求的第一道防线。
HTML5 的原生验证机制（Constraint Validation API）让复杂的校验逻辑变得声明化。
5.2.1 原生验证约束：required, pattern, min/max/step, minlength/maxlength
通过声明属性即可实现基础校验，无需编写正则判断逻辑。
验证属性速查
|-----------------------|---------------------|-----------|-----------------------|
| 属性 | 适用控件 | 验证逻辑 | 错误提示 |
| required | 大多数 input | 必须填写 | "请填写此字段" |
| pattern | text, tel, password | 必须匹配正则表达式 | "请匹配要求的格式" |
| minlength | text, textarea | 最少字符数 | "请至少输入 X 个字符" |
| maxlength | text, textarea | 最多字符数 | 无提示，超出部分无法输入 |
| min / max | number, date | 数值/日期范围 | "值必须大于/小于 X" |
| step | number, range | 数值步进间隔 | "请输入有效值，最近的两个有效值是..." |
代码模块：
html
<form>
<!-- 解释：pattern 使用正则，title 属性作为错误时的提示文案 -->
<input
type="text"
required
pattern="[A-Za-z]{3}"
title="请输入3个英文字母"
placeholder="代码">
<!-- 解释：maxlength 是硬限制（打字打不进去），minlength 是软限制（提交时校验） -->
<textarea minlength="10" maxlength="200" placeholder="评论(10-200字)"></textarea>
</form>5.2.2 交互反馈 API：setCustomValidity() 与 ValidityState 对象
原生验证提供的错误提示语言由浏览器决定，且无法处理复杂的逻辑校验（如"两次密码不一致"）。
此时需要用到 Constraint Validation API。
原生验证就像一个只会按规矩办事的机器人，遇到"两次密码不一致"这种非格式化逻辑就傻眼了。
setCustomValidity() 就是给这个机器人编写"自定义口令"的接口------只要设置了这个口令，表单就无法提交，直到口令清空。
ValidityState 对象包含了当前元素的所有验证状态布尔值（如 valueMissing, patternMismatch）。setCustomValidity(msg) 用于设置自定义错误信息，当且仅当参数为空字符串时，验证通过。
代码模块：
html
<input type="password" id="pwd1" placeholder="输入密码">
<input type="password" id="pwd2" placeholder="确认密码">
<script>
const pwd1 = document.getElementById('pwd1');
const pwd2 = document.getElementById('pwd2');
pwd2.addEventListener('input', () => {
if (pwd2.value !== pwd1.value) {
// 解释：设置自定义错误消息，此时 checkValidity() 返回 false
pwd2.setCustomValidity('两次密码输入不一致');
} else {
// 解释：清空错误消息，允许提交
pwd2.setCustomValidity('');
}
});
</script>5.2.3 CSS 伪类增强：:valid, :invalid, :user-valid, :user-invalid
验证状态伪类
|------------------------|--------------------|----------------------------------------------------------------|
| 伪类 | 触发时机 | 典型样式应用 |
| :valid | 输入值符合验证规则 | 绿色边框 |
| :invalid | 输入值违反验证规则 | 红色边框 |
| :placeholder-shown | 输入框显示占位符（通常意味着未输入） | 用于判断输入框是否为空 |
| :user-invalid | 用户交互后 状态变为非法 | 避免 " 一打开页面全是红框 " 的糟糕体验（ :invalid ） |
代码模块：
css
/* 解释：仅当用户输入过且值非法时，才显示红色边框 */
/* 相比 :invalid，:user-invalid 不会在页面加载时就报错 */
input:user-invalid {
border-color: red;
background-image: url('error-icon.png');
}
/* 解释：结合 placeholder-shown 可以做浮动标签效果 */
input:not(:placeholder-shown) + label {
opacity: 1;
transform: translateY(0);
}5.2.4 输入模式优化：inputmode 属性在移动端的作用
type 属性决定了"数据是什么"，而 inputmode 属性决定了"键盘长什么样"。
对于不需要特定验证格式，但需要特定键盘的场景（如输入数字验证码），inputmode 是比 type="number" 更优雅的选择。
inputmode 值与键盘映射
|-------------|---------------------|----------|
| 属性值 | 键盘类型 | 适用场景 |
| none | 不弹出键盘 | 应用内自定义键盘 |
| numeric | 纯数字键盘 (0-9) | 验证码、身份证号 |
| tel | 电话键盘 (0-9 + *#) | 电话号码 |
| decimal | 数字键盘 (含小数点) | 金额输入 |
| email | 邮箱键盘 (含 @ 和 .) | 邮箱地址 |
| url | URL 键盘 (含 / 和 .com) | 网址链接 |
代码模块：
html
<!-- 解释：验证码不需要验证是否为数字，只要输入方便即可 -->
<!-- 使用 inputmode="numeric" 可以唤起纯数字键盘，且不会出现 number 控件的增减箭头 -->
<input type="text" inputmode="numeric" pattern="[0-9]*" placeholder="输入验证码">5.3 提交机制与安全防御
表单提交是数据离开客户端的最后一道关卡。
合理的提交控制和安全防御策略，是保障系统数据完整性与安全性的基石。
5.3.1 表单重写属性：formaction, formmethod 等
传统表单只能有一个提交地址和方法。
HTML5 允许通过按钮级别的属性重写 <form> 的全局设置，实现"一个表单，多种提交路径"。
重写属性列表
|--------------------|----------------------|----------------------|
| 属性 | 作用 | 典型场景 |
| formaction | 覆盖 form 的 action | "保存草稿"与"正式发布"提交到不同接口 |
| formmethod | 覆盖 form 的 method | 某些操作需 GET，某些需 POST |
| formenctype | 覆盖 form 的 enctype | 普通提交 vs 文件上传 |
| formnovalidate | 覆盖 form 的 novalidate | "存为草稿"时跳过必填校验 |
代码模块：
html
<form action="/publish" method="post">
<input name="title" required>
<!-- 解释：标准提交，触发 required 校验 -->
<button type="submit">发布文章</button>
<!-- 解释：重写行为：跳转至 /draft，且跳过校验 -->
<button type="submit" formaction="/draft" formnovalidate>存为草稿</button>
</form>5.3.2 CSRF 防御策略：SameSite Cookie 与隐藏 Token
CSRF（跨站请求伪造）就像"假冒签名"。
攻击者诱导用户点击了一个链接，这个链接自动向你的银行网站发送转账请求。
浏览器会自动带上你登录过的 Cookie，银行服务器误以为是本人操作。
防御的关键在于"确认身份凭证"。
双层防御机制
|---------------------|--------------------|---------------------------------------------------------|--------------|
| 防御层 | 机制 | 实现方式 | 安全级别 |
| SameSite Cookie | 浏览器禁止跨站请求携带 Cookie | Set-Cookie 头设置 SameSite=Strict 或 Lax | 基础防御，依赖浏览器特性 |
| CSRF Token | 服务器校验随机令牌 | 表单隐藏域 <input type="hidden" name="_token" value="..."> | 深度防御，标准方案 |
代码模块：
html
<!-- 后端渲染表单时注入 Token -->
<form method="post">
<!-- 解释：攻击者无法猜到这个随机 Token，请求会被服务器拦截 -->
<input type="hidden" name="csrf_token" value="<%= serverGeneratedToken %>">
...
</form>
<!-- 服务器端伪代码逻辑 -->
<!--
if (request.cookies.session && request.body.csrf_token !== session.csrf_token) {
rejectRequest();
}
-->5.3.3 自动填充管理：autocomplete 属性值详解
autocomplete 关键值
|-------------------|--------|--------------------------------------|
| 属性值 | 含义 | 作用 |
| on | 启用自动填充 | 浏览器基于历史记录猜测 |
| off | 关闭自动填充 | 注意 ：现代浏览器常忽略此设置（出于密码管理器权限），不保证生效 |
| name | 全名 | 提高填充准确率 |
| email | 邮箱 | 识别为邮箱字段 |
| new-password | 新密码 | 提示密码管理器生成新密码，而非填充旧密码 |
| one-time-code | 一次性验证码 | 配合短信 OTP，键盘自动读取短信验证码 |
代码模块：
html
<form>
<!-- 解释：使用语义化的 autocomplete 值，提升用户体验 -->
<input type="text" name="fullname" autocomplete="name">
<input type="email" name="email" autocomplete="email">
<!-- 解释：告诉浏览器这是新密码，建议使用强密码生成器 -->
<input type="password" autocomplete="new-password">
<!-- 解释：现代移动端支持自动读取短信验证码 -->
<input type="text" autocomplete="one-time-code" inputmode="numeric">
</form>autocomplete 不仅仅是开关，更是一套"语义字典"。
告诉浏览器"这是姓名"、"这是地址"，浏览器就能调用自动填充功能，帮用户一键填完冗长的表单，这在电商结算页是提升转化率的利器。