HTML 表单 - 绿叶网

在 HTML 中，表单是一种交互式元素，用于收集用户输入的数据，然后提交发送给后端处理。表单通常包括各种输入控件，比如文本框、单选按钮、复选框、下拉菜单等。

HTML 表单简介

在前面的章节中，我们学习了各种各样的 HTML 标签。不过使用这些标签做出来的都是静态页面，而不是动态页面。如果想要做出一个动态页面，我们就需要借助表单元素来实现。

并不是会 “动” 的页面就叫做 “动态页面” ，比如一个页面有一些 JavaScript 动画，并不代表该页面就是动态页面。静态页面和动态页面的区别在于：是否与服务器进行数据交互。下面列出的 4 种情况都不一定是动态页面。

带有音频和视频。
带有 Flash 动画。
带有 CSS 动画。
带有 JavaScript 特效。

对于静态页面与动态页面之间的区别。简单来说，如果一个页面仅仅供用户浏览，那就是静态页面。如果这个页面还能实现与服务器进行数据交互（像注册登录、话费充值、评论交流），那就是动态页面。

表单是我们接触动态页面的第一步。其中表单最重要的作用就是：在浏览器端收集用户的信息，然后将数据提交给服务器来处理。

对于表单，相信小伙伴们在平常已经接触不少了，像注册登录、发表评论、后台管理等都用到了（如下图所示）。其中，文本框、按钮、下拉菜单等就是常见的表单元素。

HTML表单用于注册登录

HTML表单用于评论交流

HTML表单用于后台管理

可能有些初学的小伙伴就会问了：“我使用表单做了一个用户登录功能，怎样在服务器中判断账号和密码是否正确呢？” 大家不要着急嘛，我们学习 HTML 和 CSS 的目的仅仅是把登录注册、话费充值这些表单的 “页面效果” 做出来就可以了。至于如何在服务器处理这些信息，那就不是 HTML 的范畴了，而是属于后端技术。这个等大家学了 Node.js、Java、Go 等后端技术，自然就会知道了。

总而言之一句话：学习 HTML 只需要把效果做出来就可以，不需要管数据处理。

HTML 表单标签

在 HTML 中，表单标签有 5 种：form、input、textarea、select 和 option。下图所示的这个表单，已经把这 5 种表单标签都用上了。在这一章的学习中，最基本的要求就是把这个表单做出来。

HTML表单

从外观上来划分，表单可以分为以下 8 种。

单行文本框
密码文本框
多行文本框
单选按钮
复选框
按钮
下拉列表
文件上传

HTML 表单 form 标签

在 HTML 中，我们都知道表格的行（tr）、单元格（th、td）等都必须放在 table 标签内部。创建一个表单跟创建一个表格一样，我们也需要把表单标签放在 form 标签内部。

注意: 表单跟 “表格” 是两个完全不一样的概念。我们常说的表单，指的是文本框、按钮、单选框、复选框、下拉列表等的统称。

1. form 标签语法

在 HTML 中，我们可以使用 form 标签来创建一个表单。

语法：

<form>
    ……各种表单标签
</form>

说明：

<form> 表示表单的开始，</form> 表示表单的结束。

示例：使用 form 标签

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form>
        <input type="text" value="这是一个单行文本框"><br>
        <textarea>这是一个多行文本框</textarea><br>
        <select>
            <option>HTML</option>
            <option>CSS</option>
            <option>JavaScript</option>
        </select>
    </form>
</body>
</html>

页面效果如下图所示：

HTML form标签

分析：

input、textarea、select、option 都是表单标签，一般要放在 form 标签内部。对于这些表单标签，后面会慢慢学到，暂时不需要深入。

2. form 标签属性

form 标签的属性有很多，常用的如下表所示。

form 标签的属性
属性	说明
name	表单名称
method	提交方式
action	提交地址
target	打开方式
enctype	编码方式
autocomplete	是否启用自动填充
novalidate	是否跳过 HTML5 验证

（1）name 属性

在一个页面中，表单可能不止一个，每一个 form 标签就是一个表单。为了区分这些表单，我们可以使用 name 属性来给表单进行命名。

<form name="myForm1"></form>
<form name="myForm2"></form>
<form name="myForm3"></form>

（2）method 属性

在 form 标签中，method 属性用于指定表单数据使用哪一种 HTTP 提交方法。method 属性取值有 2 个："get" 和 "post"。

get 的安全性较差，而 post 的安全性较好。所以在实际开发中，大多数情况下都是使用 post。

<form method="post"></form>

（3）action 属性

在 form 标签中，action 属性用于指定表单数据提交给哪个服务器地址（URL）。

如果指定地址：数据会提交到该地址进行处理。
如果留空或不写：数据默认提交给 “当前页面地址”（常用于刷新页面或简单的本页处理）。

<form action="/login"></form>

（4）target 属性

form 标签的 target 属性跟 a 标签的 target 属性是一样的，都是用来指定窗口的打开方式。一般情况下，我们只会用到 “_blank” 这一种取值。

<form target="_blank"></form>

（5）enctype 属性

在 form 标签中，enctype 属性用于指定表单数据提交的编码方式。一般情况下，我们不需要设置，除非你用到上传文件功能。

（6）autocomplete 属性

在 form 标签中，autocomplete 属性用于设置表单中的输入字段是否启用自动填充功能。

on（默认值）：启用自动填充。此时浏览器会自动填充用户之前输入过的值。
off：禁用自动填充。

<form autocomplete="off"></form>

（7）novalidate 属性

在 form 标签中，novalidate 属性是一个布尔属性，用于设置提交表单时是否跳过 HTML5 验证（如必填项、邮箱格式等）。

不写该属性（默认）：进行 HTML5 验证。
写上该属性：跳过（禁用） HTML5 验证。

<form> ... </form>

<form novalidate> ... </form>

HTML 表单 input 标签

在 HTML 中，大多数表单都是使用 input 标签来实现的。

语法：

<input type="表单类型">

说明：

input 是自闭合标签，它是没有结束符号的。type 属性取值如下表所示。

input 标签的 type 属性取值
属性值	说明
text	单行文本框
password	密码文本框
radio	单选框
checkbox	多选框
button、submit 或 reset	按钮
file	文件上传

常见问题

1. 表单元素那么多，而且每一种元素自身还有好几个属性，应该怎么记忆呢？

对于初学者来说，表单记忆是最关心也是最为头疼的一件事。在 HTML 入门时，我们不需要花太多时间去记忆这些标签或属性，只需要感性认知即可。忘了的时候，就回来翻一下。此外，像 VSCode 等也会有代码提示，写多了自然就会记住了。

2. 表单元素是否一定要放在 form 标签内呢？

表单元素不一定都要放在 form 标签内。对于要与服务器进行交互的表单元素就必须放在 form 标签内才有效。如果表单元素不需要跟服务器进行交互，那就没必要放在 form 标签内。

3. 为什么后端收不到我发的数据呢？

很可能是你忘记写 name 属性了！value 是用户输入的值，而 name 是这个值的“名字”。如果没有 name，浏览器会认为这个框里的数据不需要提交。比如：

<input type="text" name="username">

对于上面这个文本框来说，如果我们输入了 “Jack”，那么服务器收到的数据就是：username=Jack。

当然了，如果是纯前端交互，表单元素本身不需要提交数据给后端，则不需要使用 name 属性。