下面我们来学习表单。
目录
什么是Web表单？
表单标签
1.form标签
2.输入框
文本框和密码框
单选框和复选框
1.单选框
2.复选框
3.按钮
（1）普通按钮
（2）提交按钮
（3）重置按钮
（4）选择文件
4.label标签
5.select标签
6.textarea标签
7.特殊字符
什么是Web表单？
Web 表单是使用户与网站或应用程序之间进行交互。 表单允许用户输入数据，这些数据通常发送到 Web 服务器进行处理和存储，或在客户端使用以以某种方式立即更新界面。简
简单来说，我们平时登录网站时要求输入账号密码，这些操作就是用户与网站之间的交互；而这个操作的界面就是Web表单。
表单标签
利用表单标签来实现用户与网站之间的交互。表单可以分成两个部分：表单域和表单控件。
表单域：包含表单元素的区域。重点了解form标签。
表单控件：包括输入框，按钮等。重点了解input标签。控件都是使用input标签实现的。
1.form标签
我们先创建一个新文件（test0.html）来学习。在form后面要带上一个action属性。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action=""></form>
</body>
</html>然后点击运行，我们创建了一个表单。在网页按 fn + F12 打开控制台窗口， 点击左上角的图标，我们就能选中html的代码进行分析。从下图我们可以看到，form创建了一个表单域。
2.输入框
input是一个有许多类型的单个标签。我们可以通过type属性来确定input的类型。
文本框：text
密码框：password
单选框：radio
复选框：checkbox
文本框和密码框
<body><form action=""></form>账号 <input type="text"> <!--文本框--><br>密码 <input type="password"> <!--密码框-->
</body>运行到网页之后，我们可以从框中输入信息。密码框输入的信息会呈现加密状态 。这是我们打开控制台，将password修改为text，会发现我们输入的加密信息变为了文本框输出。
单选框和复选框
1.单选框
单选框之间必须具备相同的name属性，才能实现多选一的效果。
加上checked属性会自动勾选上对应的选项。
性别<input type="radio" name="sex"> 男
<input type="radio" name="sex" checked="checked"> 女
2.复选框
单选框只能选中一个，因此需要多选框。其操作方式同单选框，将radio换为checkbox即可。
爱好<input type="checkbox" name="favor"> 音乐<input type="checkbox" name="favor"> 美术<input type="checkbox" name="favor"> 游戏
3.按钮
（1）普通按钮
按钮属性为button。按钮也是在input属性中进行使用的。button表示控件类型为按钮，value表示文字说明，onclick为点击反馈。
<input type="button" value="this is a simple button" onclick="alert('hello')"
点击运行。我们可以点击按钮，点击后会反馈‘hello’文字。
（2）提交按钮
提交属性为submit。提交按钮必须放在form标签内部，会将网页中的信息提交到后台。我们可以在form的action属性中添加另一个网页的网址，点击提交按钮后就会将信息提交并跳转到对应的网址上。
<body><form action="http://www.baidu.com">姓名<input type="text" name="name"><br><br><input type="submit"></form>
</body>
（3）重置按钮
reset表示将信息重置。在输入信息后点击重置按钮，会将所有数据清空。
<input type="reset">（4）选择文件
file表示可以从本地选择文件。与提交按钮配合可以上传文件到对应的网址。
<input type="file">4.label标签
label标签主要作用为提升表单控件的可用性和可访问性，为表单元素添加关联的表单控件。例如点击聚焦，扩大交互区域，提升可访问性等。关于label标签后面我们还会遇到，这里就简单使用label标签来实现单选按钮组扩大点击区域。
我们先写两个性别单选框，加上id属性，为了和label相关联：
<input type="radio" name="sex" id="male"> 男
<input type="radio" name="sex" id="female"> 女在label标签中，要带一个for属性，for属性必须要和单选框的id属性相匹配才能正确关联 。然后将文字移到label标签内。这样我们在点击对应文字的时候也能进行选择了。
<label for="male"> 男 </label>
<input type="radio" name="sex" id="male">
<label for="female"> 女 </label>
<input type="radio" name="sex" id="female">5.select标签
select标签支持我们在多个选项中选择一项。在select内需要使用option标来确定选项内容。
<select name="" id=""><option value="">--请选择年份--</option><option value="">--2025--</option><option value="">--2024--</option><option value="">--2023--</option><option value="">--2022--</option><option value="">--2021--</option><option value="">--2020--</option>
</select>
6.textarea标签
textarea是HTML中用于创建多行纯文本输入区域的表单元素，适用于需要用户输入较长文本的情况。其有以下关键属性：
- name：（必填）提交表单时的数据键名
- id：唯一标识符（用于JS/CSS操作或label关联）
- rows：可见文本行数
- cols：可见文本列数
- placeholder：输入前的灰色提示文本
- maxlength：允许的最大字符数
- minlength：允许的最小字符数
- wrap：文本的换行方式（soft/hard）
例如我们创建一个留言评论区：
<label for="comment">留言：</label>
<textarea id="comment" name="user_comment"rows="5" cols="40"placeholder="请输入您的意见..."maxlength="500"
></textarea>
7.特殊字符
有些特殊字符在html中是不能直接表示的。例如：
- 空格： 
- 小于号：<
- 大于号：>
- 按位与：&
如果我们直接在html中打印空格：
可以看到直接写8个空格无法判定。因此我们使用上面的代替符号：
<p>这里有8个空格        空格</p><br>再次运行就能看到打出了8个空格了。
其他特殊字符以此类推。
![[激光原理与应用-168]：光源 - 常见光源的分类、特性及应用场景的详细解析，涵盖技术原理、优缺点及典型应用领域](http://pic.xiahunao.cn/[激光原理与应用-168]：光源 - 常见光源的分类、特性及应用场景的详细解析，涵盖技术原理、优缺点及典型应用领域)
