表单作用：收集用户输入的数据。登录框、注册页面、搜索框、留言板、问卷都是表单做出来的。 用户填写内容 → 表单把数据提交给服务器。
核心标签：
<form>：整个表单的容器，包裹所有输入项，定义提交地址、提交方式。<input>：最重要输入标签，单标签 。通过type属性切换不同输入控件（文本框、密码框、单选、复选、按钮）。<label>：标签，和输入框绑定，点击文字就能选中输入框，提升体验。<select>：下拉选择框<textarea>：多行文本域（大文本框，写留言）<button>：按钮
重点：表单里面的输入控件，大部分要写在
<form>标签内部。
一、form 表单容器标签
语法
html
预览
<form action="提交地址" method="提交方式">
<!-- 这里放各种输入框、按钮 -->
</form>两个最重要属性：
action：填写数据提交到哪里去（服务器地址） 。- 练习阶段可以写
#，代表不提交，仅本地测试。
- 练习阶段可以写
method：提交方式，两种：method="get"：数据拼在浏览器地址栏，适合搜索，数据量小。method="post"：数据放在请求体内，不会显示地址栏，适合登录、注册、密码提交。
示例基础 form 外壳：
html
预览
<form action="#" method="post">
<!--输入框写在这里-->
</form>二、input 输入框（万能单标签）
input靠 type 属性 决定是什么控件。
表格
| type 值 | 控件类型 | 说明 |
|---|---|---|
type="text" |
单行文本输入框 | 普通文字、用户名 |
type="password" |
密码框 | 输入文字显示黑点隐藏 |
type="radio" |
单选框 | 多选一，性别选择 |
type="checkbox" |
复选框 | 可以多选，爱好选择 |
type="submit" |
提交按钮 | 把 form 表单数据发送出去 |
type="reset" |
重置按钮 | 全部表单恢复清空初始状态 |
type="button" |
普通按钮 | 默认无功能，配合 js 使用 |
属性补充（input 通用高频属性）
name：非常重要！ 提交数据给服务器的参数名字。没有 name，这个输入框数据不会被提交。value：输入框里面的默认值；按钮上面显示的文字。placeholder：提示文字，灰色浅字，输入内容会消失。checked：单选 / 复选框，默认选中（布尔属性，写上去就生效，不用写值）。maxlength：限制最多输入多少字符。
1、type="text" 单行文本框
用于用户名、昵称、搜索。
html
预览
<input type="text" name="username" placeholder="请输入你的用户名">解释：
type="text"：普通单行文本框name="username"：提交给服务器，这个字段名字叫 username，必须写placeholder="请输入你的用户名"：灰色提示，不是默认值，用户输入就消失。
2、type="password" 密码输入框
输入字符自动变成黑点，保护密码看不见。
html
预览
<input type="password" name="pwd" placeholder="请输入密码">简单登录小示例，复制直接运行
html
预览
<!DOCTYPE html>
<html lang="zh‑CN">
<head>
<meta charset="UTF‑8">
<title>简单登录表单</title>
</head>
<body>
<h3>用户登录</h3>
<form action="#" method="post">
<p>用户名：<input type="text" name="username" placeholder="请输入用户名"></p>
<p>密 码：<input type="password" name="password" placeholder="请输入密码"></p>
<!-- submit提交按钮，点击提交表单 -->
<p><input type="submit" value="登录"></p>
</form>
</body>
</html>点击登录按钮，表单尝试提交，action 是 #，页面不会跳转服务器，仅练习。
3、label 标签（重点，提升用户体验）
效果：点击文字，自动激活对应的输入框。 两种写法：
写法 1：for + id（推荐，分开写）
label 的 for 属性值 等于 input 的 id 属性值，实现绑定。
html
预览
<label for="user">用户名：</label>
<input type="text" id="user" name="username">点击文字 "用户名："，光标自动跳到输入框。
完整改造登录框，加上 label：
html
预览
<form action="#" method="post">
<p>
<label for="username">用户名：</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">
</p>
<p>
<label for="pwd">密 码：</label>
<input type="password" id="pwd" name="pwd" placeholder="请输入密码">
</p>
<p><input type="submit" value="登录"></p>
</form>写法 2：input 直接包在 label 里面，不需要 id、for
html
预览
<label>
记住密码
<input type="checkbox" name="remember">
</label>4、type="radio" 单选框（只能选一个）
⚠️同一组单选框，name 属性必须完全相同！ 才能实现互斥，只能选一个。 checked 写在标签上代表默认选中。
html
预览
<p>请选择性别：</p>
<label>
<input type="radio" name="gender" value="man" checked> 男
</label>
<label>
<input type="radio" name="gender" value="woman"> 女
</label>解释：
- 两个 radio 的
name="gender"完全一样，属于同一组，只能选一个。 value="man"：提交给服务器的值，用户看不到，后台拿到 man/woman。checked："男" 默认预先勾选。
❌新手坑：name 不一样，两个单选框可以同时勾选，就失去单选效果。
5、type="checkbox" 复选框，可以多选
爱好、协议勾选；同一组 name 可以相同，提交多个值；checked默认勾选。
html
预览
<p>你的爱好（可多选）：</p>
<label><input type="checkbox" name="hobby" value="read">阅读</label>
<label><input type="checkbox" name="hobby" value="game" checked>游戏</label>
<label><input type="checkbox" name="hobby" value="sport">运动</label>6、三种按钮
type="submit"提交按钮：点击触发 form 表单提交数据
html
预览
<input type="submit" value="提交注册">type="reset"重置按钮：把表单所有输入恢复初始清空
html
预览
<input type="reset" value="重置表单">type="button"普通按钮，原生什么都不干，留给 JavaScript 写点击功能
html
预览
<input type="button" value="普通按钮">另外还有
<button>标签也可以做按钮：
html
预览
<button type="submit">提交</button>不写 type 默认是 submit 提交按钮。
三、select 下拉选择框
下拉菜单，选项 <option>。
<select>大容器，需要写name<option>每一个下拉选项，写value提交给服务器的值selected：这个选项默认选中
html
预览
<p>选择城市：</p>
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="qingdao" selected>青岛</option>
<option value="guangzhou">广州</option>
</select>selected 写在 option，青岛默认显示。
四、textarea 多行文本框（大留言框）
多行输入，适合留言、简介；不是 input 标签。 属性：
rows：显示多少行高度cols：一行显示多少字符宽度
html
预览
<p>个人简介：</p>
<textarea name="intro" rows="5" cols="40" placeholder="请输入你的个人介绍"></textarea>textarea标签中间是默认文字，不要写 value 属性
html
预览
<textarea name="intro">这里是默认预先写好的文字</textarea>完整综合注册表单示例（复制直接运行）
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>
</head>
<body>
<h2>用户注册</h2>
<!-- action="#本地测试不提交服务器，method提交方式post -->
<form action="#" method="post">
<p>
<label for="reg_name">用户名：</label>
<input type="text" id="reg_name" name="username" placeholder="请设置用户名">
</p>
<p>
<label for="reg_pwd">设置密码：</label>
<input type="password" id="reg_pwd" name="password" placeholder="设置6位以上密码">
</p>
<p>性别：
<label><input type="radio" name="sex" value="male" checked>男</label>
<label><input type="radio" name="sex" value="female">女</label>
</p>
<p>爱好（多选）：
<label><input type="checkbox" name="hobby" value="code">写代码</label>
<label><input type="checkbox" name="hobby" value="movie">看电影</label>
<label><input type="checkbox" name="hobby" value="travel">旅行</label>
</p>
<p>所在城市：
<select name="city">
<option value="qd">青岛</option>
<option value="bj">北京</option>
<option value="nj">南京</option>
</select>
</p>
<p>个人留言：<br>
<textarea name="message" rows="4" cols="35" placeholder="写下你的留言"></textarea>
</p>
<p>
<input type="submit" value="提交注册">
<input type="reset" value="清空重置">
</p>
</form>
</body>
</html>新手高频易错点
- ❌忘记写
name属性
input、select、textarea 没有
name，点击 submit 提交，这一项数据不会发送给服务器。做表单一定要写 name。
- ❌单选 radio 同一组 name 不一样，造成可以多选。
同一组性别全部
name="gender"。
-
❌混淆 placeholder 和 value
placeholder灰色提示文字，不会提交；value真正表单提交的值。 -
❌textarea 使用 value 属性设置默认文字 ✅默认文字写在
<textarea>默认文字</textarea>标签中间。 -
❌submit 按钮放到 form 标签外面，点击无法提交表单。
submit 必须放在
<form>内部。
-
❌忘记 label，用户只能点小圆圈选单选框；加上 label 可以直接点击文字选择。
-
checked、selected布尔属性，直接写名字即可，不需要写checked="checked"（写了也可以，简写直接写 checked）。
CSS 简单美化表单拓展（实际项目都会美化）
表单原生样式很丑，用 CSS 设置宽高，示例片段：
css
input,select,textarea{
width:240px;
padding:6px;
font‑size:14px;
}本篇知识点总结
<form>是表单整体容器；action提交地址；method提交方式get/post；练习写action="#"。<input>单标签，type决定控件类型：- text 文本框、password 密码框
- radio 单选（同组 name 相同）、checkbox 复选
- submit 提交按钮，reset 重置按钮，button 普通按钮
name用于提交数据；value控件值；placeholder灰色提示；checked默认选中。<label>绑定输入框，点击文字选中控件，for 对应 id。<select>下拉框，内部<option>选项，selected默认选中。<textarea>多行大文本，rows 设置行数高度，cols 宽度。
✍小练习：写一个简易留言表单：用户名文本框；性别单选；爱好复选；留言 textarea；提交 + 重置按钮。
下节预告
下一篇：HTML 区块元素，弄懂网页布局基础，区分哪些标签独占一行，哪些并排显示。