使用 DW 在網頁中插圖表單

表單，一個網頁中不可或缺的成分。它在網頁中主要負責數據采集功能。表單有三個基本組成部分： 表單的標簽，表單域， 表單按鈕：主要是提交或者復位按鈕。

表單的引入，也是我們的頁面和后端服務器交互的基礎，讓網頁和后端進行數據交互有了可能。網頁如果都是之前學習的一些前端的標簽，那么數據從哪里來？當然不行，所以大家早晚要接觸到網頁如何后端內容交互。因此，今天作為引入表單的基礎課，我們將講解一些表單的基礎只是，首先老師會給大家講解如何在新建的網頁中加入表單域，然后學習在表單中插入文本域，最后我們將學習在表單中插入圖像按鈕。本節的操作內容比較多，主要以操作內容為主，其次是對表單概念含義的理解尤為重要。因此大家在學習時應該有的放矢。有側重點地學習。

1. 在網頁中添加表單域

首先，給大家講解一下基礎的標簽。表單在網頁元素的定義中也是有自己的標簽的，是 form 標簽。也就是說，同學們以后看到一對出現的 form 標簽，就可以判定為表單標簽了。 那么在 Dreamweaver CC 2018 中，如何在網頁中插入一個表單呢。下面跟著老師的操作來學習一下：
首先，第一步，我們還是要創建一個全新的 HTML 頁面。
創建完成之后，我們要進行插入一個表單的操作。具體的操作，我們可以選用右側面板的快捷操作方式。如下圖所示：

在右側的面板中點擊HTML，然后在彈出的下拉列表中點擊表單。如下圖所示:

選擇表單之后，我們可以看到下方的選項也變成了其他的選項，有表單，文本，電子郵件……等。這些都是表單內的元素，我們將在后續的知識點中滿滿學習這些元素的使用，在這里我們只需要懂的如何在網頁中插入一個表單域就好了。有些同學們可能會比較暈，表單域和表單是什么關系。表單域顧名思義，就是存放表單的區域。它對應的是網頁中存放表單的位置。

接下來的一步，我們就點擊下拉列表中的表單。點擊完之后，我們就可以看到頁面中插入了一個表單。插入表單后的頁面如下圖所示：

我們再切換到代碼視圖看看，我們可以清晰地看到代碼視圖中有了一對 FORM 標簽。里面還有一些它的屬性，這些屬性在這一節中大家還不必掌握，如果今后學習到和后端交互的細節的時候，我們才有必要學習這些知識。插入表單后的代碼視圖如下圖所示：

以上便是我們通過 Dreamweaver CC 2018 來為網頁插入表單的基本過程。

2. 在表單中插入文本域

學習完插入一個表單到網頁中后，接下來該學習如何往表單里添加東西了。第一個我們就要學習在網頁中添加文本域。

其實通過上面的知識點中的圖片大家已經可以看到了，我們在右側的表單面板中就有一個文本選項。沒錯，點擊它就對了，點擊完之后，我們可以看到在剛剛創建的文本域中插入了一個文本框。效果如下圖所示：

3. 在表單中插入圖像按鈕

插入圖像按鈕，這個其實和上面的知識點一樣簡單。我們可以在右側的面板中往下拉，拉到下面可以看到圖像按鈕這個選項。點擊它，頁面上就出現了一個圖像按鈕，效果如下圖所示：

好了，以上就是我們本節的 Dreamweaver CC 2018 插入表單域，表單中的文本域，表單中的圖像按鈕。我們這一節將是下一節的基礎。

4. 小結

本節的內容操作性比較強，由于是首次使用的元素，對于 form 表單元素，大家還是要在課下多多體會，多多練習，試著調整一下表單的屬性。試著多多點選右面的選項，試著插入多種不同的表單內含元素。
本節知識點的重點是：在網頁中插入一個表單域。
本節知識點的難點是：在表單中插入多元化的內嵌元素。