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

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

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

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

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

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

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

接下來(lái)的一步，我們就點(diǎn)擊下拉列表中的表單。點(diǎn)擊完之后，我們就可以看到頁(yè)面中插入了一個(gè)表單。插入表單后的頁(yè)面如下圖所示：

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

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

2. 在表單中插入文本域

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

其實(shí)通過(guò)上面的知識(shí)點(diǎn)中的圖片大家已經(jīng)可以看到了，我們?cè)谟覀?cè)的表單面板中就有一個(gè)文本選項(xiàng)。沒(méi)錯(cuò)，點(diǎn)擊它就對(duì)了，點(diǎn)擊完之后，我們可以看到在剛剛創(chuàng)建的文本域中插入了一個(gè)文本框。效果如下圖所示：

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

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

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

4. 小結(jié)

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