HTML 表单与数据交互

一、`<form>` 元素基础

HTML 表单是 Web 应用程序中收集用户数据的核心机制。<form> 元素作为一个容器，包裹所有输入控件，并定义数据如何发送到服务器。

1.1 基本结构

<form action="/submit" method="POST" enctype="multipart/form-data">
  <!-- 表单控件在这里 -->
  <button type="submit">提交</button>
</form>
<link rel="stylesheet" href="/assets/css/code-blocks.css?v=20261019_04">

1.2 核心属性详解

`action` 属性

指定表单数据提交的目标 URL。可以是绝对路径、相对路径或留空（提交到当前页面）。

<!-- 提交到绝对路径 -->
<form action="https://api.example.com/users"></form>

<!-- 提交到相对路径 -->
<form action="/api/register"></form>

<!-- 留空表示提交到当前页面 URL -->
<form action=""></form>

`method` 属性：GET vs POST

特性	GET	POST
数据位置	URL 查询参数	请求体
长度限制	URL 最大约 2048 字符	无理论限制
缓存	可被缓存	不可缓存
书签	可保存为书签	不可保存
安全性	明文可见，不安全	相对安全（配合 HTTPS）
用途	搜索、数据查询	数据提交、文件上传

<!-- GET：搜索表单 -->
<form action="/search" method="GET">
  <input type="search" name="q" placeholder="搜索...">
  <button type="submit">搜索</button>
</form>
<!-- 提交后 URL 变为 /search?q=用户输入的内容 -->

<!-- POST：注册表单 -->
<form action="/register" method="POST">
  <input type="text" name="username" required>
  <input type="password" name="password" required>
  <button type="submit">注册</button>
</form>
<!-- 数据在请求体中，URL 不变 -->

`enctype` 属性

仅当 method="POST" 时有效，指定编码类型：

值	作用	适用场景
`application/x-www-form-urlencoded`（默认）	键值对编码，空格变 `+`，特殊字符转义	普通文本表单
`multipart/form-data`	二进制分块编码	文件上传
`text/plain`	纯文本，不编码	调试，极少使用

<!-- 文件上传必须使用 multipart/form-data -->
<form action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="avatar" accept="image/*">
  <button type="submit">上传头像</button>
</form>

`target` 属性

指定响应页面的打开位置：

<!-- 当前窗口打开（默认） -->
<form target="_self">

<!-- 新窗口/新标签页打开 -->
<form target="_blank">

<!-- 父级 frame 打开 -->
<form target="_parent">

<!-- 顶层窗口打开（突破嵌套 frame） -->
<form target="_top">

<!-- 命名 iframe 中打开 -->
<form target="myIframe">

`novalidate` 属性

布尔属性，加上后禁用浏览器默认的 HTML5 表单验证：

<form novalidate>
  <input type="email" required>
  <!-- 即使 email 为空或格式不对，也会直接提交 -->
  <button type="submit">提交（跳过验证）</button>
</form>

1.3 表单提交流程

理解浏览器提交表单的完整流程，有助于调试和优化：

用户点击 submit 按钮（或按 Enter）
          ↓
浏览器收集表单数据（根据 name 属性构造键值对）
          ↓
检查 novalidate + HTML5 验证（如果有字段不合法则阻止提交）
          ↓
根据 method 编码表单数据（GET 拼接 URL，POST 编码到 body）
          ↓
按照 enctype 对数据进行编码
          ↓
发送 HTTP 请求到 action URL
          ↓
接收服务器响应并按照 target 属性渲染

注意：表单的 name 属性是提交时的字段名。没有 name 属性的控件不会被提交。

<!-- 演示完整的提交流程 -->
<form action="/api/submit" method="POST" target="_blank">
  <input type="text" name="username" value="张三">
  <!-- 下面的输入框没有 name，不会被提交 -->
  <input type="text" value="不会发送到服务器">
  <button type="submit">查看提交效果</button>
</form>

二、所有输入类型详解

<input> 是 HTML 表单中最灵活的元素，通过 type 属性可以切换 20 多种不同的输入形态。

2.1 文本类输入

`type="text"` — 单行文本

最基础的输入类型，用于短文本。

<label for="username">用户名：</label>
<input
  type="text"
  id="username"
  name="username"
  placeholder="请输入用户名"
  maxlength="20"
  value="默认值"
>

实际场景：用户名、昵称、标题、短备注等。

`type="password"` — 密码输入

字符被掩码遮盖，但数据以明文传输（配合 HTTPS 使用）。

<label for="pwd">密码：</label>
<input
  type="password"
  id="pwd"
  name="password"
  placeholder="至少 8 位，含字母和数字"
  minlength="8"
  autocomplete="new-password"
  required
>
<!-- 密码可见性切换（UX 增强） -->
<button onclick="togglePassword()">👁 显示/隐藏</button>
<script>
function togglePassword() {
  const pwd = document.getElementById('pwd');
  pwd.type = pwd.type === 'password' ? 'text' : 'password';
}
</script>

`type="email"` — 电子邮件

浏览器会自动检查 @ 符号和域名格式（不强制顶级域）。

<label for="email">电子邮箱：</label>
<input
  type="email"
  id="email"
  name="email"
  placeholder="example@domain.com"
  multiple
  required
>
<!-- multiple 属性允许输入多个邮箱，逗号分隔 -->
<small>支持多个邮箱，用逗号分隔</small>

浏览器验证规则：必须有 @，@ 前不能为空，@ 后必须有至少一个 .。

`type="url"` — URL 输入

验证是否为合法 URL 格式（必须包含协议前缀）。

<label for="website">个人网站：</label>
<input
  type="url"
  id="website"
  name="website"
  placeholder="https://example.com"
  pattern="https?://.*"
  required
>

`type="tel"` — 电话号码

浏览器不会自动验证格式（因为各国号码格式差异大），通常配合 pattern 使用。

<label for="phone">手机号：</label>
<input
  type="tel"
  id="phone"
  name="phone"
  placeholder="13800138000"
  pattern="[0-9]{11}"
  inputmode="numeric"
  required
>
<small>请输入 11 位数字</small>

2.2 数字类输入

`type="number"` — 数字输入

带步进按钮（spin button），只能输入数字。

<label for="age">年龄：</label>
<input
  type="number"
  id="age"
  name="age"
  min="1"
  max="150"
  step="1"
  value="18"
  required
>

<!-- 实际场景：商品数量 -->
<label for="quantity">数量：</label>
<input
  type="number"
  id="quantity"
  name="quantity"
  min="1"
  max="99"
  step="1"
  value="1"
>

重要：type="number" 在小数精度上有限制，需要高精度计算时避免直接使用其 JS 值。

`type="range"` — 滑块

提供直观的视觉选择，通常配合 <output> 显示当前值。

<label for="volume">音量：</label>
<input
  type="range"
  id="volume"
  name="volume"
  min="0"
  max="100"
  step="1"
  value="50"
>
<output id="volumeDisplay">50</output>

<script>
document.getElementById('volume').addEventListener('input', function() {
  document.getElementById('volumeDisplay').textContent = this.value;
});
</script>

实际场景：音量控制、价格范围筛选、亮度调节、评分选择。

2.3 日期与时间类

HTML5 提供了丰富的日期/时间输入类型，极大地提升了移动端的用户体验（会自动唤起系统日期选择器）。

各类型对比

类型	示例值	格式	用途
`date`	2024-08-22	yyyy-MM-dd	选择日期
`time`	14:30	HH:mm	选择时间
`datetime-local`	2024-08-22T14:30	yyyy-MM-ddTHH:mm	本地日期+时间
`month`	2024-08	yyyy-MM	选择月份
`week`	2024-W34	yyyy-Www	选择周

<!-- 日期选择 -->
<label for="birthday">出生日期：</label>
<input type="date" id="birthday" name="birthday" min="1900-01-01" max="2024-12-31">

<!-- 时间选择 -->
<label for="alarm">提醒时间：</label>
<input type="time" id="alarm" name="alarm" step="300"> <!-- 步长 5 分钟 -->

<!-- 本地日期+时间 -->
<label for="meeting">会议时间：</label>
<input type="datetime-local" id="meeting" name="meeting" min="2024-01-01T00:00">

<!-- 月份选择 -->
<label for="cardExpiry">信用卡有效期：</label>
<input type="month" id="cardExpiry" name="cardExpiry" min="2024-01">

<!-- 周选择 -->
<label for="weekPicker">选择周次：</label>
<input type="week" id="weekPicker" name="weekPicker">

2.4 其他类型

`type="color"` — 颜色选择器

返回 HEX 格式的颜色值（如 #ff6600）。

<label for="favColor">选择主题色：</label>
<input type="color" id="favColor" name="favColor" value="#3498db">
<output id="colorDisplay">#3498db</output>

<script>
document.getElementById('favColor').addEventListener('input', function() {
  document.getElementById('colorDisplay').textContent = this.value;
});
</script>

`type="file"` — 文件上传

必须与 enctype="multipart/form-data" 配合使用。

<form action="/upload" method="POST" enctype="multipart/form-data">
  <!-- 单文件上传 -->
  <label for="avatar">头像：</label>
  <input
    type="file"
    id="avatar"
    name="avatar"
    accept="image/png, image/jpeg"
    size="max 2MB"
  >

  <!-- 多文件上传 -->
  <label for="docs">文档（可多选）：</label>
  <input
    type="file"
    id="docs"
    name="documents"
    multiple
    accept=".pdf,.doc,.docx"
  >

  <!-- 限制文件类型的 MIME 写法 -->
  <label for="video">视频：</label>
  <input
    type="file"
    id="video"
    name="video"
    accept="video/*"
  >

  <button type="submit">上传</button>
</form>

多文件上传的 JavaScript 处理示例：

const fileInput = document.getElementById('docs');
fileInput.addEventListener('change', function() {
  const files = Array.from(this.files);
  console.log(`选择了 ${files.length} 个文件：`);
  files.forEach(file => {
    console.log(`  ${file.name} (${(file.size / 1024).toFixed(1)} KB, ${file.type})`);
  });

  // 限制总大小
  const totalSize = files.reduce((sum, f) => sum + f.size, 0);
  if (totalSize > 10 * 1024 * 1024) {
    alert('文件总大小不能超过 10MB');
    this.value = ''; // 清空选择
  }
});

`type="hidden"` — 隐藏字段

不出现在界面上，但随表单一起提交。常用于传递令牌、用户 ID 等。

<form action="/order" method="POST">
  <input type="hidden" name="csrf_token" value="a1b2c3d4e5f6">
  <input type="hidden" name="product_id" value="12345">
  <input type="hidden" name="return_url" value="/thanks">
  <!-- 用户可见部分 -->
  <label for="qty">数量：</label>
  <input type="number" name="quantity" min="1" value="1">
  <button type="submit">加入购物车</button>
</form>

`type="checkbox"` — 复选框

用于多选或二元选择（单个时相当于开关）。

<!-- 单个复选框（同意协议） -->
<label>
  <input type="checkbox" name="agree" required>
  我已阅读并同意 <a href="/terms">服务条款</a>
</label>

<!-- 多选组（爱好选择） -->
<fieldset>
  <legend>兴趣爱好（可多选）</legend>
  <label><input type="checkbox" name="hobbies" value="reading"> 阅读</label>
  <label><input type="checkbox" name="hobbies" value="coding"> 编程</label>
  <label><input type="checkbox" name="hobbies" value="travel"> 旅行</label>
  <label><input type="checkbox" name="hobbies" value="music"> 音乐</label>
</fieldset>

复选框提交数据：选中时提交 value，未选中时不提交任何内容。多选同名复选框提交多个同名键值对。

`type="radio"` — 单选按钮

同一 name 下的 radio 按钮只能选择其一。

<fieldset>
  <legend>性别</legend>
  <label><input type="radio" name="gender" value="male" checked> 男</label>
  <label><input type="radio" name="gender" value="female"> 女</label>
  <label><input type="radio" name="gender" value="other"> 其他</label>
</fieldset>

<fieldset>
  <legend>支付方式</legend>
  <label>
    <input type="radio" name="payment" value="wechat" checked>
    微信支付
  </label>
  <label>
    <input type="radio" name="payment" value="alipay">
    支付宝
  </label>
  <label>
    <input type="radio" name="payment" value="card">
    银行卡
  </label>
</fieldset>

`type="search"` — 搜索框

与 text 类似，但带有清除按钮（在部分浏览器中），且搜索历史可被记录。

<form action="/search" method="GET">
  <input
    type="search"
    name="q"
    placeholder="搜索文章..."
    aria-label="搜索"
  >
  <button type="submit">🔍</button>
</form>

`type="submit"`、`type="reset"`、`type="button"`

<form action="/submit" method="POST">
  <input type="text" name="data" placeholder="输入内容">

  <!-- 提交按钮：触发表单提交 -->
  <input type="submit" value="提交">

  <!-- 重置按钮：将表单还原为初始值 -->
  <input type="reset" value="重置">

  <!-- 普通按钮：默认无行为，需配合 JavaScript -->
  <input type="button" value="自定义操作" onclick="doSomething()">

  <!-- 另外，<button> 元素更灵活 -->
  <button type="submit">
    <span>✓</span> 确认提交
  </button>
</form>

注意：<button> 元素的默认 type 是 submit（IE 除外），所以如果不指定类型，放在表单内的 <button> 点击后会提交表单。

2.5 `inputmode` 属性

优化移动端键盘类型，与 type 无关，只是控制键盘布局：

<!-- 数字键盘（适合输入信用卡号） -->
<input type="text" inputmode="numeric" pattern="[0-9]*" placeholder="请输入卡号">

<!-- 小数键盘 -->
<input type="text" inputmode="decimal" placeholder="0.00">

<!-- 电话键盘 -->
<input type="tel" inputmode="tel" placeholder="手机号码">

<!-- URL 键盘（带 .com 等快捷键） -->
<input type="text" inputmode="url" placeholder="https://">

<!-- 邮箱键盘（带 @ 快捷键） -->
<input type="text" inputmode="email" placeholder="email@example.com">

<!-- 搜索键盘（Enter 键显示为"搜索"） -->
<input type="search" inputmode="search" placeholder="搜索">

2.6 `autocomplete` 属性

控制浏览器自动填充行为，提升用户体验和表单填写效率：

<form autocomplete="on">
  <!-- 个人信息 -->
  <label>姓名：<input name="name" autocomplete="name"></label>
  <label>邮箱：<input type="email" name="email" autocomplete="email"></label>
  <label>电话：<input type="tel" name="phone" autocomplete="tel"></label>

  <!-- 地址信息 -->
  <label>国家：<input name="country" autocomplete="country-name"></label>
  <label>省份：<input name="province" autocomplete="address-level1"></label>
  <label>城市：<input name="city" autocomplete="address-level2"></label>
  <label>详细地址：<input name="address" autocomplete="street-address"></label>
  <label>邮编：<input name="zip" autocomplete="postal-code"></label>

  <!-- 账号信息 -->
  <label>用户名：<input name="username" autocomplete="username"></label>
  <label>新密码：<input type="password" name="new_password" autocomplete="new-password"></label>
  <label>当前密码：<input type="password" name="password" autocomplete="current-password"></label>
</form>

安全建议：

注册表单密码字段使用 autocomplete="new-password"
登录表单密码字段使用 autocomplete="current-password"
敏感操作使用 autocomplete="off"（部分浏览器可能忽略）

三、其他表单控件

除了 <input>，HTML 还提供了多种专用表单控件。

3.1 `<select>` + `<optgroup>` + `<option>` — 下拉选择

<label for="city">选择城市：</label>
<select id="city" name="city" required>
  <option value="">-- 请选择 --</option>
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
  <option value="shenzhen">深圳</option>
</select>

带分组的下拉框：

<label for="course">选择课程：</label>
<select id="course" name="course">
  <optgroup label="前端开发">
    <option value="html">HTML 基础</option>
    <option value="css">CSS 样式</option>
    <option value="js">JavaScript 核心</option>
  </optgroup>
  <optgroup label="后端开发">
    <option value="node">Node.js</option>
    <option value="python">Python</option>
    <option value="go">Go 语言</option>
  </optgroup>
  <optgroup label="数据库">
    <option value="mysql">MySQL</option>
    <option value="mongo">MongoDB</option>
    <option value="redis">Redis</option>
  </optgroup>
</select>

多选下拉框（按住 Ctrl/Cmd 多选）：

<label for="skills">技能选择（可多选）：</label>
<select id="skills" name="skills" multiple size="5">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js" selected>JavaScript</option>
  <option value="react">React</option>
  <option value="vue">Vue</option>
  <option value="angular">Angular</option>
  <option value="node">Node.js</option>
</select>

JavaScript 联动选择示例：

<label for="province">省份：</label>
<select id="province">
  <option value="">-- 请选择 --</option>
  <option value="gd">广东</option>
  <option value="zj">浙江</option>
  <option value="js">江苏</option>
</select>

<label for="city2">城市：</label>
<select id="city2" name="city" disabled>
  <option value="">-- 请先选择省份 --</option>
</select>

<script>
const cities = {
  gd: ['广州', '深圳', '珠海', '佛山'],
  zj: ['杭州', '宁波', '温州', '绍兴'],
  js: ['南京', '苏州', '无锡', '常州']
};

document.getElementById('province').addEventListener('change', function() {
  const citySelect = document.getElementById('city2');
  const selectedCities = cities[this.value];

  citySelect.innerHTML = '<option value="">-- 请选择城市 --</option>';

  if (selectedCities) {
    selectedCities.forEach(city => {
      const opt = document.createElement('option');
      opt.value = city;
      opt.textContent = city;
      citySelect.appendChild(opt);
    });
    citySelect.disabled = false;
  } else {
    citySelect.disabled = true;
  }
});
</script>

3.2 `<textarea>` — 多行文本

<label for="bio">个人简介：</label>
<textarea
  id="bio"
  name="bio"
  rows="6"
  cols="50"
  maxlength="500"
  placeholder="介绍一下你自己（最多 500 字）..."
  wrap="soft"
></textarea>
<p id="charCount">0/500</p>

<script>
document.getElementById('bio').addEventListener('input', function() {
  document.getElementById('charCount').textContent =
    `${this.value.length}/${this.maxLength}`;
});
</script>

<textarea> 属性详解：

属性	作用	说明
`rows`	可见行数	默认 2
`cols`	可见字符列宽	默认 20
`maxlength`	最大字符数	HTML5 新增
`minlength`	最少字符数	HTML5 新增
`placeholder`	占位提示	注意：与 `value` 不同
`wrap`	换行模式	`soft`（默认，提交时不换行）/ `hard`（提交时换行，需配合 `cols`）
`readonly`	只读	不可修改但可提交
`disabled`	禁用	不可操作且不提交

实际场景：评论框、产品描述、用户反馈、地址填写。

<!-- 禁用状态 textarea -->
<textarea readonly>此内容为系统生成，不可修改。</textarea>

<!-- 调整大小的 CSS 控制 -->
<textarea style="width: 100%; min-height: 100px; max-height: 400px; resize: vertical;">
</textarea>

3.3 `<datalist>` — 自动补全（建议列表）

<datalist> 为输入框提供一个建议列表，用户可自由输入，也可以从建议中选择。与 <select> 不同，它不是强制选择的。

<label for="browser">选择浏览器：</label>
<input
  type="text"
  id="browser"
  name="browser"
  list="browsers"
  placeholder="输入或选择..."
>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
  <option value="Brave">
  <option value="Vivaldi">
</datalist>

与不同 input 类型配合：

<!-- 颜色建议 -->
<label for="color">选择或输入颜色：</label>
<input type="color" id="color" name="color" list="colorList">
<datalist id="colorList">
  <option value="#ff0000">
  <option value="#00ff00">
  <option value="#0000ff">
  <option value="#ffff00">
  <option value="#ff00ff">
</datalist>

<!-- 日期建议 -->
<label for="appointment">预约日期：</label>
<input type="date" id="appointment" name="appointment" list="dates">
<datalist id="dates">
  <option value="2024-12-25">
  <option value="2024-12-31">
  <option value="2025-01-01">
</datalist>

<!-- 范围值建议 -->
<label for="price">预算范围：</label>
<input type="range" id="price" name="price" min="0" max="10000" step="500" list="priceList">
<datalist id="priceList">
  <option value="2000">
  <option value="5000">
  <option value="8000">
</datalist>

3.4 `<output>` — 显示计算结果

<output> 语义化地表示计算结果或用户操作的结果。

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="a" name="a" value="50"> +
  <input type="number" id="b" name="b" value="50"> =
  <output name="result" for="a b">100</output>
</form>

<!-- 购物车计算示例 -->
<form oninput="total.value= (qty.value * price.value).toFixed(2)">
  <label>单价：<input type="number" id="price" value="29.99" step="0.01"></label>
  <label>数量：<input type="number" id="qty" value="1" min="1"></label>
  <p>总价：¥<output name="total" for="qty price">29.99</output></p>
</form>

3.5 `<fieldset>` + `<legend>` — 表单分组

将相关控件分组，提升可访问性和视觉结构。

<form>
  <fieldset>
    <legend>👤 个人信息</legend>
    <p>
      <label for="name">姓名：</label>
      <input type="text" id="name" name="name" required>
    </p>
    <p>
      <label for="email2">邮箱：</label>
      <input type="email" id="email2" name="email" required>
    </p>
  </fieldset>

  <fieldset>
    <legend>📮 收货地址</legend>
    <p>
      <label for="addr">地址：</label>
      <input type="text" id="addr" name="address">
    </p>
    <p>
      <label for="zipcode">邮编：</label>
      <input type="text" id="zipcode" name="zip" pattern="[0-9]{6}">
    </p>
  </fieldset>

  <fieldset disabled>
    <legend>🔒 已关闭的选项</legend>
    <p>这些选项暂时不可用</p>
    <label><input type="radio" name="plan" value="basic"> 基础版</label>
    <label><input type="radio" name="plan" value="pro"> 专业版</label>
  </fieldset>

  <button type="submit">提交订单</button>
</form>

fieldset 的高级用法：将整个 fieldset 设置为 disabled，其中所有控件自动变为禁用状态，非常适合权限控制。

四、HTML5 表单验证

HTML5 提供了强大的内置表单验证机制，无需编写大量 JavaScript 即可实现基本验证。

4.1 验证属性详解

`required` — 必填

<input type="text" name="username" required>
<!-- 提交时如果为空，浏览器显示："请填写此字段" -->

`pattern` — 正则匹配

<!-- 6-20 位字母数字组合 -->
<input
  type="text"
  name="username"
  pattern="[a-zA-Z0-9]{6,20}"
  title="请输入 6-20 位字母或数字"
  required
>

<!-- 中国大陆手机号 -->
<input
  type="tel"
  name="phone"
  pattern="1[3-9]\d{9}"
  title="请输入有效的 11 位手机号"
  required
>

<!-- 密码强度：至少包含大写字母、小写字母、数字，8 位以上 -->
<input
  type="password"
  name="password"
  pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}"
  title="至少 8 位，包含大写字母、小写字母和数字"
  required
>

`min` / `max` — 数值和日期范围

<!-- 数值范围 -->
<input type="number" name="age" min="1" max="150">
<input type="range" name="score" min="0" max="100">

<!-- 日期范围 -->
<input type="date" name="start" min="2024-01-01" max="2024-12-31">
<input type="datetime-local" name="meeting" min="2024-01-01T09:00" max="2024-12-31T18:00">

<!-- 时间范围 -->
<input type="time" name="appointment" min="09:00" max="18:00">

`minlength` / `maxlength` — 文本长度

<input type="text" name="code" minlength="4" maxlength="8">
<textarea name="bio" minlength="10" maxlength="500"></textarea>

`step` — 步长

<!-- 偶数 -->
<input type="number" name="even" step="2">

<!-- 0.5 的倍数 -->
<input type="number" name="half" step="0.5">

<!-- 时间步长：5 分钟间隔 -->
<input type="time" name="time" step="300">

4.2 完整的验证示例

<form id="registerForm">
  <fieldset>
    <legend>用户注册</legend>

    <p>
      <label for="uname">用户名：</label>
      <input
        type="text"
        id="uname"
        name="username"
        pattern="[a-zA-Z0-9_]{4,16}"
        title="4-16 位字母、数字或下划线"
        required
        autocomplete="username"
      >
    </p>

    <p>
      <label for="email3">电子邮箱：</label>
      <input
        type="email"
        id="email3"
        name="email"
        required
        autocomplete="email"
      >
    </p>

    <p>
      <label for="pwd2">密码：</label>
      <input
        type="password"
        id="pwd2"
        name="password"
        minlength="8"
        maxlength="64"
        pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}"
        title="至少 8 位，包含大写字母、小写字母和数字"
        required
        autocomplete="new-password"
      >
    </p>

    <p>
      <label for="confirmPwd">确认密码：</label>
      <input
        type="password"
        id="confirmPwd"
        name="confirmPwd"
        required
        autocomplete="new-password"
      >
    </p>

    <p>
      <label for="age2">年龄：</label>
      <input
        type="number"
        id="age2"
        name="age"
        min="1"
        max="150"
        required
      >
    </p>

    <p>
      <label for="website2">个人网站：</label>
      <input
        type="url"
        id="website2"
        name="website"
        placeholder="https://example.com"
      >
    </p>

    <p>
      <label>
        <input type="checkbox" name="agree" required>
        我已阅读并同意服务条款
      </label>
    </p>

    <p>
      <button type="submit">注册</button>
      <button type="reset">重置</button>
    </p>
  </fieldset>
</form>

4.3 自定义验证信息：`setCustomValidity()`

内置的验证消息通常是英文且不可控。通过 setCustomValidity() 可以完全自定义错误消息。

<form id="customForm">
  <label for="pwd3">密码：</label>
  <input type="password" id="pwd3" name="password" minlength="8" required>

  <label for="confirmPwd2">确认密码：</label>
  <input type="password" id="confirmPwd2" name="confirmPwd" required>

  <button type="submit">提交</button>
</form>

<script>
const password = document.getElementById('pwd3');
const confirmPwd = document.getElementById('confirmPwd2');

// 密码实时强度提示
password.addEventListener('input', function() {
  if (this.value.length < 8) {
    this.setCustomValidity('密码至少需要 8 位字符');
  } else if (!/(?=.*[a-z])/.test(this.value)) {
    this.setCustomValidity('密码必须包含小写字母');
  } else if (!/(?=.*[A-Z])/.test(this.value)) {
    this.setCustomValidity('密码必须包含大写字母');
  } else if (!/(?=.*\d)/.test(this.value)) {
    this.setCustomValidity('密码必须包含数字');
  } else {
    this.setCustomValidity(''); // 验证通过，必须设为空字符串
  }
});

// 确认密码验证
confirmPwd.addEventListener('input', function() {
  if (this.value !== password.value) {
    this.setCustomValidity('两次输入的密码不一致');
  } else {
    this.setCustomValidity('');
  }
});
</script>

重要：setCustomValidity('') 表示验证通过。任何非空字符串都表示验证失败，该字符串将作为验证消息显示。

4.4 Constraint Validation API：`validity` 对象

validity 对象提供了细粒度的验证状态判断：

const input = document.getElementById('uname');

input.addEventListener('input', function() {
  const validity = this.validity;
  const messages = [];

  if (validity.valueMissing) {
    messages.push('该字段为必填项');
  }
  if (validity.typeMismatch) {
    messages.push('格式不正确');
  }
  if (validity.patternMismatch) {
    messages.push('格式不匹配要求的模式');
  }
  if (validity.tooLong) {
    messages.push(`超过了最大长度 ${this.maxLength}`);
  }
  if (validity.tooShort) {
    messages.push(`至少需要 ${this.minLength} 位字符`);
  }
  if (validity.rangeUnderflow) {
    messages.push(`最小值不能小于 ${this.min}`);
  }
  if (validity.rangeOverflow) {
    messages.push(`最大值不能超过 ${this.max}`);
  }
  if (validity.stepMismatch) {
    messages.push('步长不匹配');
  }
  if (validity.badInput) {
    messages.push('输入了无效数据');
  }
  if (validity.customError) {
    messages.push(this.validationMessage);
  }

  if (messages.length > 0) {
    this.setCustomValidity(messages.join('；'));
  } else {
    this.setCustomValidity('');
  }
});

validity 对象属性完整列表：

属性	类型	含义
`valueMissing`	boolean	必填字段为空
`typeMismatch`	boolean	类型不匹配（如 email 格式不对）
`patternMismatch`	boolean	与 pattern 不匹配
`tooLong`	boolean	超出 maxlength
`tooShort`	boolean	不足 minlength
`rangeUnderflow`	boolean	小于 min
`rangeOverflow`	boolean	大于 max
`stepMismatch`	boolean	不符合 step 步长
`badInput`	boolean	浏览器无法解析的输入（如在 number 中输入字母）
`customError`	boolean	通过 setCustomValidity 设置的自定义错误
`valid`	boolean	所有验证通过（最常用）

4.5 CSS 伪类：验证状态样式

利用 CSS 伪类可以在不写 JavaScript 的情况下实现输入状态的视觉反馈：

<style>
  /* 基础样式 */
  input {
    border: 2px solid #ccc;
    padding: 8px 12px;
    border-radius: 4px;
    transition: border-color 0.3s, box-shadow 0.3s;
  }

  /* 有效状态 */
  input:valid {
    border-color: #27ae60;
  }

  /* 无效状态 */
  input:invalid {
    border-color: #e74c3c;
  }

  /* 必填字段 */
  input:required {
    background: #fefefe;
  }

  /* 可选字段 */
  input:optional {
    background: #fafafa;
  }

  /* 在范围内 */
  input:in-range {
    background: #e8f8f0;
  }

  /* 超出范围 */
  input:out-of-range {
    background: #fde8e8;
    border-color: #e74c3c;
  }

  /* 占位符样式 */
  input::placeholder {
    color: #999;
    font-style: italic;
  }

  /* 聚焦时的无效状态 */
  input:focus:invalid {
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2);
  }

  /* 聚焦时的有效状态 */
  input:focus:valid {
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.2);
  }

  /* 禁用状态 */
  input:disabled {
    opacity: 0.6;
    background: #eee;
    cursor: not-allowed;
  }

  /* 错误消息样式 */
  .error-message {
    color: #e74c3c;
    font-size: 0.85em;
    margin-top: 4px;
    display: none;
  }

  input:invalid + .error-message {
    display: block;
  }

  /* 增强的 checkbox 和 radio 样式 */
  input[type="checkbox"]:checked + label,
  input[type="radio"]:checked + label {
    font-weight: bold;
    color: #2c3e50;
  }
</style>

<form>
  <p>
    <input type="text" name="name" required placeholder="姓名（必填）">
    <span class="error-message">请填写姓名</span>
  </p>
  <p>
    <input type="email" name="email" required placeholder="邮箱">
    <span class="error-message">请输入有效邮箱</span>
  </p>
  <p>
    <input type="number" name="score" min="0" max="100" placeholder="分数（0-100）">
    <span class="error-message">分数必须在 0 到 100 之间</span>
  </p>
  <p>
    <input type="text" name="code" pattern="[A-Z]{3}[0-9]{3}" placeholder="代码（如 ABC123）">
    <span class="error-message">格式应为 3 个大写字母 + 3 个数字</span>
  </p>
</form>

4.6 显示验证消息的完整示例

<form id="validationDemo">
  <p>
    <label for="cardNo">信用卡号：</label>
    <input
      type="text"
      id="cardNo"
      name="cardNo"
      pattern="[0-9]{16}"
      maxlength="19"
      placeholder="16 位数字"
      required
      inputmode="numeric"
    >
    <span class="validation-msg"></span>
  </p>

  <button type="submit">验证并提交</button>
</form>

<script>
const form = document.getElementById('validationDemo');
const cardInput = document.getElementById('cardNo');
const msgSpan = cardInput.nextElementSibling;

// 实时验证反馈
cardInput.addEventListener('input', function() {
  if (this.validity.valid) {
    this.style.borderColor = '#27ae60';
    msgSpan.textContent = '✓ 格式正确';
    msgSpan.style.color = '#27ae60';
  } else {
    this.style.borderColor = '#e74c3c';
    if (this.validity.valueMissing) {
      msgSpan.textContent = '请填写卡号';
    } else if (this.validity.patternMismatch) {
      msgSpan.textContent = '卡号必须是 16 位数字';
    } else if (this.validity.tooLong || this.validity.tooShort) {
      msgSpan.textContent = '卡号需要 16 位数字';
    } else {
      msgSpan.textContent = '输入无效';
    }
    msgSpan.style.color = '#e74c3c';
  }
});

// 表单提交时的拦截
form.addEventListener('submit', function(e) {
  if (!this.checkValidity()) {
    e.preventDefault();
    // 聚焦到第一个无效字段
    const firstInvalid = this.querySelector(':invalid');
    if (firstInvalid) firstInvalid.focus();
  }
});

// 编程方式触发表单验证
function validateForm() {
  if (form.reportValidity()) {
    console.log('所有验证通过，可以提交');
    return true;
  }
  return false;
}
</script>

五、表单样式与 UX

好的表单设计不仅关乎功能，更需要关注用户体验。一个填写体验优秀的表单能显著提升转化率。

5.1 `placeholder` 的设计注意事项

placeholder 是提示用户输入内容的文本，但使用不当会带来可用性问题。

正确用法：

<!-- ✅ 好的：说明输入格式 -->
<input type="text" placeholder="例如：张三">

<!-- ✅ 好的：说明格式要求 -->
<input type="tel" placeholder="13800138000">

错误用法：

<!-- ❌ 差的：用 placeholder 代替 label -->
<input type="text" placeholder="用户名"> <!-- 缺少 <label> -->

<!-- ❌ 差的：placeholder 写过多文字 -->
<input type="text" placeholder="请输入您的真实姓名，需与身份证一致，2-10 个汉字">

设计原则：

永远不要用 placeholder 替代 <label> — 屏幕阅读器不兼容，且输入后提示消失
placeholder 在输入后消失，不要用来放重要信息
使用 CSS 控制 placeholder 的样式以符合无障碍对比度要求
理想做法：<label> + placeholder 一起使用

<!-- 最佳实践 -->
<label for="fullname">姓名</label>
<input
  type="text"
  id="fullname"
  name="fullname"
  placeholder="请输入真实姓名"
  aria-describedby="nameHint"
>
<small id="nameHint">2-10 个汉字，需与身份证一致</small>

5.2 实时验证反馈

防抖处理（避免打字时频繁验证）：

function debounce(fn, delay = 300) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

const usernameInput = document.getElementById('username');
const feedbackEl = document.getElementById('usernameFeedback');

const checkUsername = debounce(function() {
  const value = this.value;

  if (value.length === 0) {
    feedbackEl.textContent = '';
    feedbackEl.className = '';
    return;
  }

  if (value.length < 4) {
    feedbackEl.textContent = '用户名至少 4 位';
    feedbackEl.className = 'error';
    return;
  }

  if (!/^[a-zA-Z0-9_]+$/.test(value)) {
    feedbackEl.textContent = '只能包含字母、数字和下划线';
    feedbackEl.className = 'error';
    return;
  }

  // 模拟异步检查用户名是否已存在
  feedbackEl.textContent = '⏳ 检查中...';
  feedbackEl.className = 'pending';

  setTimeout(() => {
    // 假设 "admin" 和 "root" 被占用
    const taken = ['admin', 'root', 'system'];
    if (taken.includes(value.toLowerCase())) {
      feedbackEl.textContent = '❌ 该用户名已被注册';
      feedbackEl.className = 'error';
    } else {
      feedbackEl.textContent = '✅ 用户名可用';
      feedbackEl.className = 'success';
    }
  }, 500);
}, 300);

usernameInput.addEventListener('input', checkUsername);

5.3 移动端优化

移动端表单填写比桌面端困难得多，以下优化可以极大改善体验：

1. 合适的 inputmode + type：

<!-- 纯数字输入（验证码） -->
<input type="text" inputmode="numeric" pattern="[0-9]*">

<!-- 带小数点的数字 -->
<input type="text" inputmode="decimal" pattern="[0-9]*\.?[0-9]*">

<!-- 搜索 -->
<input type="search" inputmode="search">

<!-- 纯数字（适合 PIN 码），Android 会显示大数字键盘 -->
<input type="text" inputmode="numeric" pattern="[0-9]{6}" autocomplete="one-time-code">

2. 触摸友好的尺寸：

/* 移动端表单控件至少 44px 高度（Apple 的 HIG 规范） */
input, select, textarea, button {
  font-size: 16px;       /* 防止 iOS 自动缩放 */
  min-height: 44px;
  padding: 12px 16px;
}

@media (max-width: 768px) {
  .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
  }

  label {
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
  }
}

3. 防止 iOS 自动缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* 当 input font-size 小于 16px 时，iOS Safari 在聚焦时会自动放大页面 */
input, select, textarea {
  font-size: 16px !important;
}

4. 键盘返回键标签自定义：

<!-- enterkeyhint 属性影响虚拟键盘的"回车"按钮文字 -->
<input enterkeyhint="search" placeholder="搜索">
<input enterkeyhint="next" placeholder="下一步字段">
<input enterkeyhint="done" placeholder="完成">
<input enterkeyhint="go" placeholder="前往">
<input enterkeyhint="send" placeholder="发送消息">

5. 完整的移动端注册表单示例：

<form class="mobile-form">
  <div class="form-group">
    <label for="mobile">手机号</label>
    <input
      type="tel"
      id="mobile"
      name="mobile"
      inputmode="numeric"
      pattern="[0-9]{11}"
      placeholder="输入手机号"
      autocomplete="tel"
      enterkeyhint="next"
    >
  </div>

  <div class="form-group">
    <label for="verifyCode">验证码</label>
    <div class="verify-row">
      <input
        type="text"
        id="verifyCode"
        name="code"
        inputmode="numeric"
        pattern="[0-9]{6}"
        placeholder="6 位验证码"
        autocomplete="one-time-code"
        enterkeyhint="done"
      >
      <button type="button" class="btn-sms">获取验证码</button>
    </div>
  </div>

  <button type="submit" class="btn-submit">登录/注册</button>
</form>

<style>
.mobile-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.form-group input {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
  transition: border-color 0.2s;
  box-sizing: border-box;
  -webkit-appearance: none;
}

.form-group input:focus {
  border-color: #007aff;
  background: #fff;
  outline: none;
}

.verify-row {
  display: flex;
  gap: 10px;
}

.verify-row input {
  flex: 1;
}

.btn-sms {
  white-space: nowrap;
  padding: 14px 16px;
  font-size: 14px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
}

.btn-submit {
  width: 100%;
  padding: 16px;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  background: #007aff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.btn-submit:active {
  background: #0056b3;
}
</style>

六、表单安全基础

表单是用户与服务器交互的主要入口，也是最常见的安全攻击目标。前端安全虽然不能替代后端安全，但仍是第一道防线。

6.1 CSRF Token

CSRF（Cross-Site Request Forgery，跨站请求伪造） 是一种攻击方式：攻击者诱导用户点击链接或访问恶意页面，利用用户已登录的身份向目标网站发送恶意请求。

防御原理：

服务器生成随机 Token → 嵌入表单隐藏字段 → 用户提交 → 服务器验证 Token

<!-- 后端渲染时嵌入 CSRF Token -->
<form action="/transfer" method="POST">
  <input type="hidden" name="csrf_token" value="<%= csrfToken %>">
  <!-- 或从 meta 标签获取 -->
  <label>转账金额：<input type="number" name="amount"></label>
  <label>收款账户：<input type="text" name="account"></label>
  <button type="submit">确认转账</button>
</form>

<script>
// 从 meta 标签获取 CSRF Token 并添加到请求头（适用于 AJAX 提交）
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;

document.getElementById('transferForm').addEventListener('submit', async function(e) {
  e.preventDefault();
  const formData = new FormData(this);

  const response = await fetch(this.action, {
    method: 'POST',
    headers: {
      'X-CSRF-Token': csrfToken
    },
    body: formData
  });

  if (response.ok) {
    alert('转账成功');
  }
});
</script>

CSRF Token 最佳实践：

Token 必须由服务器生成，且不可预测
每个用户会话的 Token 唯一
Token 有过期时间
敏感操作（修改密码、转账）应同时要求输入密码或二次验证

6.2 输入过滤与转义

前端验证的主要目的是提升用户体验，不能完全依赖前端验证保证安全，但前端仍可以做很多来减少风险。

1. 防止 XSS（跨站脚本攻击）：

// 将用户输入安全地插入 DOM
function escapeHtml(unsafe) {
  return unsafe
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;');
}

// 使用示例
const userInput = '<script>alert("xss")</script>';
document.getElementById('output').textContent = userInput; // ✅ 安全：textContent 自动转义
document.getElementById('output').innerHTML = userInput;   // ❌ 危险：直接插 HTML
document.getElementById('output').innerHTML = escapeHtml(userInput); // ✅ 安全

// React/ Vue 等现代框架默认转义，但要注意 dangerouslySetInnerHTML / v-html

2. 输入长度和格式限制：

<!-- 前端限制 -->
<input type="text" name="title" maxlength="100" pattern="[^<>]*">

<!-- 同时在后端也要做同样的验证 -->

3. 文件上传安全检查：

const fileInput = document.getElementById('fileUpload');

fileInput.addEventListener('change', function() {
  const file = this.files[0];
  if (!file) return;

  // 检查文件类型（基于 MIME）
  const allowedTypes = ['image/jpeg', 'image/png', 'image/webp', 'application/pdf'];
  if (!allowedTypes.includes(file.type)) {
    alert('不支持的文件类型');
    this.value = '';
    return;
  }

  // 检查文件大小
  const maxSize = 5 * 1024 * 1024; // 5MB
  if (file.size > maxSize) {
    alert('文件大小不能超过 5MB');
    this.value = '';
    return;
  }

  // 检查文件扩展名（辅助，不可信）
  const ext = file.name.split('.').pop().toLowerCase();
  const allowedExts = ['jpg', 'jpeg', 'png', 'webp', 'pdf'];
  if (!allowedExts.includes(ext)) {
    alert('文件扩展名不合法');
    this.value = '';
    return;
  }
});

6.3 HTTPS 的重要性

为什么表单提交必须使用 HTTPS？

HTTP（明文）                     HTTPS（加密）
 ┌─────────┐                    ┌─────────┐
 │ 浏览器  │                    │ 浏览器  │
 └────┬────┘                    └────┬────┘
      │ 表单数据明文                    │ 表单数据加密
      │（任何人都能截获）               │（无法解密）
      ▼                               ▼
 ┌─────────┐                    ┌─────────┐
 │ 中间人  │  → 轻松获取密码     │ 中间人  │  → 得到乱码
 └─────────┘                    └─────────┘
      │                               │
      ▼                               ▼
 ┌─────────┐                    ┌─────────┐
 │ 服务器  │                    │ 服务器  │  → 用私钥解密
 └─────────┘                    └─────────┘

前端检测是否使用 HTTPS：

if (window.location.protocol !== 'https:' && window.location.hostname !== 'localhost') {
  console.warn('⚠️ 敏感表单正在通过不安全的 HTTP 协议提交！');
  // 可以阻止提交
  document.querySelectorAll('form').forEach(form => {
    form.addEventListener('submit', function(e) {
      if (this.method.toUpperCase() === 'POST') {
        e.preventDefault();
        alert('表单提交已被阻止：请使用 HTTPS 连接');
      }
    });
  });
}

6.4 完整的安全表单示例

<!--
  安全表单最佳实践：
  1. HTTPS 环境（由服务器保证）
  2. CSRF Token 保护
  3. 输入过滤与长度限制
  4. 密码输入 autocomplete 正确设置
  5. 敏感操作二次确认
-->
<meta name="csrf-token" content="<%= csrfToken %>">

<form
  action="https://api.example.com/profile/update"
  method="POST"
  id="secureForm"
  novalidate
>
  <input type="hidden" name="csrf_token" id="csrfTokenField">

  <fieldset>
    <legend>修改密码</legend>

    <p>
      <label for="currentPwd">当前密码：</label>
      <input
        type="password"
        id="currentPwd"
        name="current_password"
        autocomplete="current-password"
        required
        minlength="8"
      >
    </p>

    <p>
      <label for="newPwd">新密码：</label>
      <input
        type="password"
        id="newPwd"
        name="new_password"
        autocomplete="new-password"
        required
        minlength="8"
        maxlength="64"
        pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}"
        title="至少 8 位，包含大小写字母和数字"
      >
    </p>

    <p>
      <label for="confirmNewPwd">确认新密码：</label>
      <input
        type="password"
        id="confirmNewPwd"
        name="confirm_password"
        autocomplete="new-password"
        required
      >
    </p>
  </fieldset>

  <p id="errorContainer" style="color: #e74c3c; display: none;"></p>

  <button type="submit">更新密码</button>
</form>

<script>
document.getElementById('secureForm').addEventListener('submit', async function(e) {
  e.preventDefault();

  const errorEl = document.getElementById('errorContainer');
  errorEl.style.display = 'none';

  // 前端安全检查
  const currentPwd = document.getElementById('currentPwd').value;
  const newPwd = document.getElementById('newPwd').value;
  const confirmPwd = document.getElementById('confirmNewPwd').value;

  if (!currentPwd || !newPwd || !confirmPwd) {
    errorEl.textContent = '请填写所有字段';
    errorEl.style.display = 'block';
    return;
  }

  if (newPwd !== confirmPwd) {
    errorEl.textContent = '两次输入的新密码不一致';
    errorEl.style.display = 'block';
    return;
  }

  if (newPwd.length < 8) {
    errorEl.textContent = '新密码至少 8 位';
    errorEl.style.display = 'block';
    return;
  }

  // 防止密码在 URL 中泄露（即使是 POST，referer 也可能泄露）
  // 使用 fetch 提交而不是表单默认提交
  try {
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
    document.getElementById('csrfTokenField').value = csrfToken;

    const formData = new FormData(this);

    const response = await fetch(this.action, {
      method: 'POST',
      headers: {
        'X-CSRF-Token': csrfToken,
        'X-Requested-With': 'XMLHttpRequest'
      },
      body: formData
    });

    if (response.ok) {
      alert('密码已更新，请重新登录');
      window.location.href = '/login';
    } else {
      const data = await response.json();
      errorEl.textContent = data.message || '操作失败，请重试';
      errorEl.style.display = 'block';
    }
  } catch (err) {
    errorEl.textContent = '网络错误，请检查连接';
    errorEl.style.display = 'block';
  }
});
</script>

结语

HTML 表单是前端开发中最基础也最重要的部分之一。本文从 <form> 元素的基本属性讲起，深入介绍了所有输入类型、表单控件、HTML5 验证机制、用户体验优化，以及安全防护的基础知识。

总结关键要点：

理解表单生命周期：从用户输入到服务器响应的完整流程
合理选择输入类型：利用浏览器原生能力减少 JavaScript 代码量
善用 HTML5 验证：required、pattern、min/max 等属性即可覆盖大部分验证场景
始终提供良好的用户体验：移动端优化、实时反馈、防抖处理
安全从表单开始：HTTPS、CSRF Token、输入过滤缺一不可

表单的终极目标是在用户、浏览器和服务器之间建立一条安全、高效的数据传输通道。前端开发者应该熟悉每个控件的语义和行为，让表单既好用又安全。

本文发表于 2024-08-22，由前端技术团队编写。

目录

一、<form> 元素基础

1.1 基本结构

1.2 核心属性详解

action 属性

method 属性：GET vs POST

enctype 属性

target 属性

novalidate 属性

1.3 表单提交流程

二、所有输入类型详解

2.1 文本类输入

type="text" — 单行文本

type="password" — 密码输入

type="email" — 电子邮件

type="url" — URL 输入

type="tel" — 电话号码

2.2 数字类输入

type="number" — 数字输入

type="range" — 滑块