第12篇：表单基础控件

第12篇：表单基础控件

表单是网页与用户交互的桥梁——注册、登录、搜索、留言，都离不开表单。本篇从基础的input控件开始，逐步掌握表单的核心构建块。

学习目标

• 掌握form标签及常用属性（action、method）
• 理解input各种type的用法和差异
• 学会正确使用label关联表单控件
• 掌握单选框和复选框的用法
• 了解placeholder的正确使用方式

核心知识点

一、表单容器：form

所有表单控件都应该包裹在form标签中。

<formaction="/submit"method="POST"><!-- 表单控件放在这里 --><inputtype="text"name="username"><buttontype="submit">提交</button></form>

form核心属性

GET vs POST

<!-- GET：搜索表单（数据在 URL 中可见）--><formaction="/search"method="GET"><inputtype="search"name="q"placeholder="搜索关键词"><buttontype="submit">搜索</button></form><!-- POST：注册表单（数据在请求体中）--><formaction="/register"method="POST"><inputtype="email"name="email"><inputtype="password"name="password"><buttontype="submit">注册</button></form>

二、input类型大全

input是表单中最灵活的控件，通过type属性变换形态。

文本类输入

<!-- 单行文本（默认）--><inputtype="text"name="username"placeholder="请输入用户名"><!-- 密码（输入内容显示为圆点）--><inputtype="password"name="pwd"placeholder="请输入密码"><!-- 邮箱（移动端会显示 @ 符号快捷输入）--><inputtype="email"name="email"placeholder="example@email.com"><!-- 搜索（部分浏览器会显示搜索图标和清除按钮）--><inputtype="search"name="query"placeholder="搜索..."><!-- URL（移动端会显示 .com / .cn 快捷输入）--><inputtype="url"name="website"placeholder="https://example.com"><!-- 电话（移动端会显示数字键盘）--><inputtype="tel"name="phone"placeholder="138-0000-0000">

数字类输入

<!-- 数字输入（带增减按钮）--><inputtype="number"name="age"min="1"max="120"value="18"><!-- 范围滑块 --><inputtype="range"name="volume"min="0"max="100"value="50">

日期时间类输入

<!-- 日期选择器 --><inputtype="date"name="birthday"><!-- 时间选择器 --><inputtype="time"name="meeting-time"><!-- 日期+时间 --><inputtype="datetime-local"name="appointment"><!-- 月份选择器 --><inputtype="month"name="expiry-month"><!-- 星期选择器 --><inputtype="week"name="holiday-week">

💡兼容性提示：日期时间类输入在桌面端 Safari 和部分旧浏览器中支持不佳。实际项目中通常会使用日期选择组件库。

选择类输入

<!-- 单选框（radio）：一组中只能选一个 --><inputtype="radio"name="gender"value="male"id="male"><labelfor="male">男</label><inputtype="radio"name="gender"value="female"id="female"><labelfor="female">女</label><!-- 复选框（checkbox）：可以同时选多个 --><inputtype="checkbox"name="hobby"value="reading"id="hobby-read"><labelfor="hobby-read">阅读</label><inputtype="checkbox"name="hobby"value="music"id="hobby-music"><labelfor="hobby-music">音乐</label><inputtype="checkbox"name="hobby"value="sports"id="hobby-sports"><labelfor="hobby-sports">运动</label>

其他输入类型

<!-- 颜色选择器 --><inputtype="color"name="theme-color"value="#1976d2"><!-- 文件上传 --><inputtype="file"name="avatar"accept="image/*"><!-- 隐藏字段（用户不可见，提交时随表单发送）--><inputtype="hidden"name="user-id"value="12345">

三、label标签：正确关联控件

label为表单控件提供说明文字，点击label可以聚焦/选中对应的控件。

两种关联方式

方式一：用for属性关联id（推荐）

<labelfor="username">用户名：</label><inputtype="text"id="username"name="username">

方式二：直接包裹控件

<label>用户名：<inputtype="text"name="username"></label>

为什么 label 很重要

<!-- ❌ 错误：没有 label，可访问性差 --><p>用户名</p><inputtype="text"name="username"><!-- ✅ 正确：label 与 input 关联 --><labelfor="username">用户名</label><inputtype="text"id="username"name="username">

四、单选框与复选框详解

单选框radio：一组只能选一个

<fieldset><legend>性别</legend><inputtype="radio"name="gender"value="male"id="gender-male"><labelfor="gender-male">男</label><inputtype="radio"name="gender"value="female"id="gender-female"><labelfor="gender-female">女</label><inputtype="radio"name="gender"value="other"id="gender-other"><labelfor="gender-other">其他</label></fieldset>

🔑关键点：同一组的radio必须有相同的name，这样浏览器才知道它们是互斥的。

复选框checkbox：可以同时选多个

<fieldset><legend>兴趣爱好（可多选）</legend><inputtype="checkbox"name="hobby"value="reading"id="hobby-1"><labelfor="hobby-1">阅读</label><inputtype="checkbox"name="hobby"value="music"id="hobby-2"><labelfor="hobby-2">音乐</label><inputtype="checkbox"name="hobby"value="sports"id="hobby-3"checked><labelfor="hobby-3">运动（默认选中）</label></fieldset>

五、placeholder的正确用法

placeholder提供输入提示，当用户开始输入时消失。

<!-- ✅ 好的 placeholder：提供输入示例或格式提示 --><inputtype="email"placeholder="yourname@example.com"><inputtype="tel"placeholder="138-0000-0000"><!-- ❌ 差的 placeholder：重复 label 的内容 --><labelfor="email">邮箱</label><inputtype="email"id="email"placeholder="请输入邮箱"><!-- "请输入邮箱"没有提供额外信息 -->

placeholder 不是 label 的替代品

<!-- ❌ 错误：用 placeholder 代替 label --><inputtype="text"placeholder="用户名"><!-- placeholder 在输入后消失，用户会忘记这个字段是什么 --><!-- ✅ 正确：label + placeholder 配合使用 --><labelfor="username">用户名</label><inputtype="text"id="username"placeholder="请输入 4-20 位字母或数字">

六、表单控件通用属性

以下属性适用于大多数表单控件：

<inputtype="text"name="username"placeholder="请输入用户名"requiredautofocusautocomplete="username">

动手练习

练习 1：表单控件辨析

为以下场景选择合适的input type：

练习 2：注册表单

创建一个用户注册表单，要求包含：

• 用户名（text，必填）
• 邮箱（email，必填）
• 密码（password，必填）
• 确认密码（password）
• 性别（radio，单选）
• 兴趣爱好（checkbox，多选，至少 3 项）
• 出生日期（date）
• 所有控件都有正确的label关联

练习 3：搜索表单优化

创建一个搜索表单，要求：

• 使用type="search"而非type="text"
• 添加placeholder提示搜索语法
• 表单使用GET方法
• 添加一个隐藏字段source=web
• 提交按钮使用type="submit"

常见误区 ⚠️

速查卡片 📋

input类型速查表

单选框 vs 复选框

label 关联模板

<!-- 推荐：for + id --><labelfor="input-id">标签文字</label><inputid="input-id"name="field-name"><!-- 备选：直接包裹 --><label>标签文字<inputname="field-name"></label>

表单提交数据格式

GET 请求： /search?q=HTML&category=tutorial POST 请求： 请求体：q=HTML&category=tutorial

表单编写 checklist

• 所有表单控件包裹在form中
• 每个控件都有对应的label
• radio同组使用相同的name
• checkbox设置了有意义的value
• 使用了合适的input type
• 必填字段标记了required
• placeholder提供格式示例，不重复 label 内容

扩展阅读

• MDN: 元素
• MDN: 类型
• MDN:元素
• MDN: 表单基础
• MDN: radio 和 checkbox

📌下一步：掌握了基础控件后，进入第13篇：表单进阶控件，学习下拉菜单、多行文本和表单分组。