使用 DW 在网页中插图表单

表单，一个网页中不可或缺的成分。它在网页中主要负责数据采集功能。表单有三个基本组成部分： 表单的标签，表单域， 表单按钮：主要是提交或者复位按钮。

表单的引入，也是我们的页面和后端服务器交互的基础，让网页和后端进行数据交互有了可能。网页如果都是之前学习的一些前端的标签，那么数据从哪里来？当然不行，所以大家早晚要接触到网页如何后端内容交互。因此，今天作为引入表单的基础课，我们将讲解一些表单的基础只是，首先老师会给大家讲解如何在新建的网页中加入表单域，然后学习在表单中插入文本域，最后我们将学习在表单中插入图像按钮。本节的操作内容比较多，主要以操作内容为主，其次是对表单概念含义的理解尤为重要。因此大家在学习时应该有的放矢。有侧重点地学习。

1. 在网页中添加表单域

首先，给大家讲解一下基础的标签。表单在网页元素的定义中也是有自己的标签的，是 form 标签。也就是说，同学们以后看到一对出现的 form 标签，就可以判定为表单标签了。 那么在 Dreamweaver CC 2018 中，如何在网页中插入一个表单呢。下面跟着老师的操作来学习一下：
首先，第一步，我们还是要创建一个全新的 HTML 页面。
创建完成之后，我们要进行插入一个表单的操作。具体的操作，我们可以选用右侧面板的快捷操作方式。如下图所示：

在右侧的面板中点击HTML，然后在弹出的下拉列表中点击表单。如下图所示:

选择表单之后，我们可以看到下方的选项也变成了其他的选项，有表单，文本，电子邮件……等。这些都是表单内的元素，我们将在后续的知识点中满满学习这些元素的使用，在这里我们只需要懂的如何在网页中插入一个表单域就好了。有些同学们可能会比较晕，表单域和表单是什么关系。表单域顾名思义，就是存放表单的区域。它对应的是网页中存放表单的位置。

接下来的一步，我们就点击下拉列表中的表单。点击完之后，我们就可以看到页面中插入了一个表单。插入表单后的页面如下图所示：

我们再切换到代码视图看看，我们可以清晰地看到代码视图中有了一对 FORM 标签。里面还有一些它的属性，这些属性在这一节中大家还不必掌握，如果今后学习到和后端交互的细节的时候，我们才有必要学习这些知识。插入表单后的代码视图如下图所示：

以上便是我们通过 Dreamweaver CC 2018 来为网页插入表单的基本过程。

2. 在表单中插入文本域

学习完插入一个表单到网页中后，接下来该学习如何往表单里添加东西了。第一个我们就要学习在网页中添加文本域。

其实通过上面的知识点中的图片大家已经可以看到了，我们在右侧的表单面板中就有一个文本选项。没错，点击它就对了，点击完之后，我们可以看到在刚刚创建的文本域中插入了一个文本框。效果如下图所示：

3. 在表单中插入图像按钮

插入图像按钮，这个其实和上面的知识点一样简单。我们可以在右侧的面板中往下拉，拉到下面可以看到图像按钮这个选项。点击它，页面上就出现了一个图像按钮，效果如下图所示：

好了，以上就是我们本节的 Dreamweaver CC 2018 插入表单域，表单中的文本域，表单中的图像按钮。我们这一节将是下一节的基础。

4. 小结

本节的内容操作性比较强，由于是首次使用的元素，对于 form 表单元素，大家还是要在课下多多体会，多多练习，试着调整一下表单的属性。试着多多点选右面的选项，试着插入多种不同的表单内含元素。
本节知识点的重点是：在网页中插入一个表单域。
本节知识点的难点是：在表单中插入多元化的内嵌元素。