章节索引 :

使用 DW 在网页中插图表单

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

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

1. 在网页中添加表单域

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

图片描述

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

图片描述

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

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

图片描述

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

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

2. 在表单中插入文本域

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

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

图片描述

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

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

图片描述

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

4. 小结

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