语义化表单

语义化表单通过使用正确的标签和属性，帮助浏览器、辅助技术理解表单内容和关系。

核心结构

表单容器

HTML

<form action="/submit" method="POST" novalidate>
  <!-- 表单内容 -->
</form>

表单分组

HTML

<form>
  <fieldset>
    <legend>个人信息</legend>
    <!-- 相关输入项 -->
  </fieldset>

  <fieldset>
    <legend>联系方式</legend>
    <!-- 相关输入项 -->
  </fieldset>
</form>

标签关联

label 元素

HTML

<!-- 显式关联（推荐） -->
<label for="username">用户名</label>
<input type="text" id="username" name="username">

<!-- 隐式关联 -->
<label>
  用户名
  <input type="text" name="username">
</label>

关联方式对比

方式	语法	特点
显式	`label for="id"` + `input id`	可灵活布局
隐式	`label` 包裹 `input`	结构紧凑

输入类型语义

常用类型

HTML

<!-- 文本类 -->
<input type="text" placeholder="请输入">
<input type="password" autocomplete="current-password">
<input type="email" autocomplete="email">
<input type="tel" pattern="[0-9]{11}">
<input type="url" placeholder="https://">

<!-- 数值类 -->
<input type="number" min="0" max="100" step="1">
<input type="range" min="0" max="100">

<!-- 时间类 -->
<input type="date">
<input type="time">
<input type="datetime-local">

<!-- 其他 -->
<input type="color">
<input type="search" aria-label="搜索">
<input type="file" accept=".pdf,.doc">

类型选择表

类型	用途	移动端优化
email	邮箱	显示邮箱键盘
tel	电话	显示数字键盘
url	网址	显示网址键盘
number	数值	显示数字键盘
date	日期	显示日期选择器

表单属性

验证属性

HTML

<input type="text" required minlength="2" maxlength="20">
<input type="email" required>
<input type="number" min="1" max="10">
<input type="text" pattern="[A-Za-z]{3}">

属性	说明
required	必填字段
minlength/maxlength	文本长度限制
min/max	数值范围限制
pattern	正则验证模式

自动填充

HTML

<input type="text" name="name" autocomplete="name">
<input type="email" autocomplete="email">
<input type="tel" autocomplete="tel">
<input type="address" autocomplete="street-address">

辅助提示

helpertext 模式

HTML

<div class="form-group">
  <label for="password">密码</label>
  <input
    type="password"
    id="password"
    aria-describedby="password-hint"
  >
  <small id="password-hint">密码需至少8位，包含字母和数字</small>
</div>

错误提示

HTML

<div class="form-group">
  <label for="email">邮箱</label>
  <input
    type="email"
    id="email"
    aria-invalid="true"
    aria-describedby="email-error"
  >
  <span id="email-error" role="alert">请输入有效的邮箱地址</span>
</div>

完整示例

HTML

<form action="/register" method="POST">
  <fieldset>
    <legend>注册账户</legend>

    <div class="form-group">
      <label for="username">用户名 <span aria-hidden="true">*</span></label>
      <input
        type="text"
        id="username"
        name="username"
        required
        minlength="3"
        maxlength="20"
        aria-required="true"
        autocomplete="username"
      >
    </div>

    <div class="form-group">
      <label for="email">邮箱 <span aria-hidden="true">*</span></label>
      <input
        type="email"
        id="email"
        name="email"
        required
        aria-required="true"
        autocomplete="email"
      >
    </div>

    <div class="form-group">
      <label for="password">密码</label>
      <input
        type="password"
        id="password"
        name="password"
        required
        minlength="8"
        aria-describedby="password-hint"
      >
      <small id="password-hint">至少8位，建议包含字母、数字、符号</small>
    </div>
  </fieldset>

  <button type="submit">注册</button>
</form>

注意：每个表单控件必须有对应的 label，placeholder 不能替代 label。

要点总结

使用 <fieldset> + <legend> 分组相关表单项
<label> 必须与 <input> 关联（for/id 或隐式包裹）
选择正确的 input type，触发移动端优化键盘
验证属性：required、minlength、maxlength、pattern
错误提示使用 aria-invalid + aria-describedby

📝 发现内容有误？点击此处直接编辑