使用 DW 在網(wǎng)頁中插圖表單

表單，一個網(wǎng)頁中不可或缺的成分。它在網(wǎng)頁中主要負(fù)責(zé)數(shù)據(jù)采集功能。表單有三個基本組成部分： 表單的標(biāo)簽，表單域， 表單按鈕：主要是提交或者復(fù)位按鈕。

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

1. 在網(wǎng)頁中添加表單域

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

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

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

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

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

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

2. 在表單中插入文本域

學(xué)習(xí)完插入一個表單到網(wǎng)頁中后，接下來該學(xué)習(xí)如何往表單里添加?xùn)|西了。第一個我們就要學(xué)習(xí)在網(wǎng)頁中添加文本域。

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

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

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

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

4. 小結(jié)

本節(jié)的內(nèi)容操作性比較強(qiáng)，由于是首次使用的元素，對于 form 表單元素，大家還是要在課下多多體會，多多練習(xí)，試著調(diào)整一下表單的屬性。試著多多點選右面的選項，試著插入多種不同的表單內(nèi)含元素。
本節(jié)知識點的重點是：在網(wǎng)頁中插入一個表單域。
本節(jié)知識點的難點是：在表單中插入多元化的內(nèi)嵌元素。