HTML 表单元素完全指南：从基础控件到原生验证

小飞兽 HTML/CSS 253 次阅读 2026-07-01

Introduction

HTML 表单是 Web 交互的核心，从注册登录、搜索查询到购物下单，几乎所有用户输入场景都离不开表单。HTML5 大幅增强了表单功能，提供了日期选择、颜色选择、范围滑块、实时验证等原生支持，无需 JavaScript 即可实现丰富的交互体验。本文系统讲解表单结构、全部输入类型及属性。

表单基本结构

<form action="/api/submit" method="POST" novalidate>
    <!-- 输入框 -->
    <input type="text" name="username" placeholder="请输入用户名" required autocomplete="username">
    
    <!-- 密码框 -->
    <input type="password" name="pwd" minlength="8" pattern="[a-zA-Z0-9]+" 
           title="至少8位，仅支持字母和数字">
    
    <!-- 邮箱 -->
    <input type="email" name="email" multiple> <!-- multiple 可输入多个邮箱 -->
    
    <!-- 数字 -->
    <input type="number" name="age" min="18" max="120" step="1">
    
    <!-- 提交按钮 -->
    <button type="submit">提交</button>
    <button type="reset">重置</button>
</form>

HTML5 新增输入类型

<!-- 日期时间相关 -->
<input type="date">                      <!-- 日期 -->
<input type="time">                      <!-- 时间 -->
<input type="datetime-local">              <!-- 本地日期时间 -->
<input type="month">                      <!-- 年月 -->
<input type="week">                       <!-- 年周 -->
<!-- 特殊类型 -->
<input type="url" placeholder="https://example.com">
<input type="tel" placeholder="手机号" pattern="1[3-9]\d{9}">
<input type="search" results="5">         <!-- 带搜索图标的输入框 -->
<input type="color" value="#8b4513">      <!-- 颜色选择器 -->
<input type="range" min="0" max="100" value="50" step="5"> <!-- 范围滑块 -->
<input type="file" accept=".jpg,.png" multiple> <!-- 文件上传 -->
<input type="hidden" name="token" value="abc123"> <!-- 隐藏字段 -->

select、textarea 与其他控件

<!-- 下拉选择 -->
<select name="city">
    <option value="">请选择城市</option>
    <optgroup label="浙江">
        <option value="hangzhou">杭州</option>
        <option value="shaoxing">绍兴</option>
    </optgroup>
    <option value="shanghai">上海</option>
</select>
<!-- 文本域 -->
<textarea name="remark" rows="4" cols="50" maxlength="200" 
          placeholder="请输入备注..."></textarea>
<!-- 复选框 -->
<input type="checkbox" name="hobby" value="reading" id="r1">
<label for="r1">阅读</label>
<input type="checkbox" name="hobby" value="coding" id="r2">
<label for="r2">编程</label>
<!-- 单选按钮 -->
<input type="radio" name="gender" value="male" id="g1">
<label for="g1">男</label>
<input type="radio" name="gender" value="female" id="g2">
<label for="g2">女</label>

原生验证属性

<!-- required：必填 -->
<input type="text" required>
<!-- minlength / maxlength：长度限制 -->
<input type="text" minlength="3" maxlength="20">
<!-- pattern：正则验证 -->
<input type="text" pattern="[A-Za-z0-9]{6,20}" title="6-20位字母或数字">
<!-- step：数值步长 -->
<input type="number" min="0" max="100" step="10">
<!-- novalidate：禁用表单原生验证（通常配合 JS 自定义验证）-->
<form novalidate>
<!-- CSS 验证状态伪类 -->
input:valid   { border-color: green; }
input:invalid { border-color: red; }
input:required { border: 2px solid #8b4513; }

运行效果

打开上述表单页面：date 输入框自动弹出日历选择器；color 点击后打开系统颜色面板；range 拖动时数值实时更新；提交时如果必填项为空或格式不对，浏览器自动弹出内置提示，无 JS 代码。

常见问题

表单提交方式 GET vs POST：GET 参数暴露在 URL 中用于查询，POST 用于提交敏感数据或文件。搜索框用 GET，登录注册用 POST。

autocomplete 属性：浏览器会记住用户填过的值并提供自动补全。username/email/new-password 等是标准值，合理使用可大幅提升用户体验。
name 属性：表单数据以 name=value 键值对形式提交，每个输入必须要有唯一的 name，否则数据传不过去。

label 的 for 属性：点击 label 可以聚焦对应的 input，提升可访问性（特别是单选/复选框）。