網(wǎng)頁制作基礎(chǔ)教程 （Dreamweaver CC）（第3版）課件 第7章 使用表單

職業(yè)教育教學(xué)用書網(wǎng)頁制作基礎(chǔ)教程（DreamweaverCC）網(wǎng)站制作前的準(zhǔn)備1網(wǎng)頁布局與規(guī)劃2網(wǎng)頁的編輯3網(wǎng)頁的多媒體效果4網(wǎng)站的管理與上傳5模塊目錄使用表單插入表單創(chuàng)建互動(dòng)留言簿項(xiàng)目一創(chuàng)建表單網(wǎng)頁子項(xiàng)目1插入表單表單簡(jiǎn)單來說，表單就是用戶可以在網(wǎng)頁中填寫信息的表格，其作用是接收用戶信息并將其提交給Web服務(wù)器上特定的程序進(jìn)行處理。表單域又被稱為“表單控件”，是表單的基本組成元素之一。用戶通過表單中的表單域輸入信息或選擇項(xiàng)目。在面板組中打開“插入”面板，選擇“表單”選項(xiàng)卡，可以看到各種表單元素，使用這些表單元素就可以制作一個(gè)簡(jiǎn)單的表單網(wǎng)頁。選擇菜單欄中的“插入”→“表單”→“表單”命令，插入一個(gè)表單域。子項(xiàng)目1插入表單子項(xiàng)目1插入表單讀一讀：“表單”下拉菜單在“表單”下拉菜單中有多個(gè)命令可以選擇，選擇不同的命令就可以實(shí)現(xiàn)插入不同表單元素效果。一般常用的表單命令有以下幾種。（1）“表單”命令：用于插入一個(gè)表單，只有在表單區(qū)域插入的信息才會(huì)被提交到服務(wù)器中。（2）“文本”命令：用于在表單中插入一行文本。（3）“文本區(qū)域”命令：用于在表單中插入多行文本。（4）“按鈕”命令：用于在表單中插入文本按鈕，單擊時(shí)實(shí)現(xiàn)提交或重置表單的命令。（5）“文件”命令：用于在表單中插入文件，瀏覽硬盤上的文件并提交。（6）“圖像按鈕”命令：用于在表單中插入圖像，可以用它生成圖像化按鈕。（7）“隱藏”命令：用于在表單域中插入一個(gè)儲(chǔ)存用戶信息的域，實(shí)現(xiàn)瀏覽器和服務(wù)器在后臺(tái)隱藏地交換信息。（8）“選擇”命令：用于在表單中插入下拉列表或菜單。（9）“單選按鈕”命令：用于在表單中插入一個(gè)單選按鈕，代表相互排斥的選擇。插入表單后，網(wǎng)頁中出現(xiàn)了一個(gè)紅色虛線框，該虛線框中的區(qū)域被稱為“表單域”，之后所有的表單元素都要插入這個(gè)虛線框中，這樣所有的信息將得到統(tǒng)一處理。子項(xiàng)目1插入表單子項(xiàng)目1插入表單讀一讀選中表單時(shí)，屬性檢查器中的內(nèi)容會(huì)自動(dòng)更新為與之相關(guān)的選項(xiàng)，主要選項(xiàng)說明如下。（1）“ID”文本框：用于設(shè)置表單的名稱。（2）“Class”下拉列表：用于設(shè)置應(yīng)用在表單上的樣式。（3）“Action”文本框：用于設(shè)置表單的服務(wù)器腳本路徑。例如，使用mailto:將信息發(fā)送到郵箱。（4）“Method”下拉列表：用于設(shè)置提交表單后反饋頁面的打開方式。（5）“Enctype”下拉列表：發(fā)送信息數(shù)據(jù)的編碼類型。選擇菜單欄中的“插入”→“表單”→“文本”命令，插入文本框。Dreamweaver窗口底部的屬性檢查器中“Name”文本框中輸入“name”作為該文本框的標(biāo)識(shí)。子項(xiàng)目2文本子項(xiàng)目2文本讀一讀：文本框?qū)傩詸z查器設(shè)置選項(xiàng)當(dāng)選中文本框時(shí)，屬性檢查器中的內(nèi)容發(fā)生變化，顯示的是文本框的設(shè)置選項(xiàng)，主要選項(xiàng)說明如下。（1）“Name”文本框：用于輸入文本框的名稱。（2）“Class”下拉列表：用于設(shè)置應(yīng)用在文本框上的導(dǎo)航樣式。（3）“Size”文本框：用于設(shè)置文本框的長(zhǎng)度，以英文字符個(gè)數(shù)為基礎(chǔ)。（4）“MaxLength”文本框：用于指定文本框的最大字符數(shù)。（5）“Value”文本框：用于設(shè)置文本框中默認(rèn)的顯示文本。（6）“Disabled”復(fù)選框：勾選后，禁止在文本框中輸入內(nèi)容。（7）“Required”復(fù)選框：勾選后，要求在提交表單時(shí)，必須為文本框輸入內(nèi)容。（8）“AutoFocus”復(fù)選框：勾選后，在支持HTML5的瀏覽器中打開表單時(shí)，鼠標(biāo)指針會(huì)自動(dòng)出現(xiàn)在該文本框中。（9）“ReadOnly”復(fù)選框：勾選后，文本框?yàn)橹蛔x屬性，不可更改內(nèi)容。（10）“AutoComplete”復(fù)選框：勾選后，文本框啟動(dòng)自動(dòng)完成功能。（11）“Pattern”文本框：用于設(shè)置驗(yàn)證輸入內(nèi)容的字段模式。在其他表單項(xiàng)目的屬性檢查器中大多也包含這些內(nèi)容，它們的作用基本相同。在屬性檢查器中將“Size”設(shè)置為“10”，也就是設(shè)置文本框的長(zhǎng)度為10個(gè)字符，即5個(gè)漢字。在文檔編輯區(qū)單擊可以發(fā)現(xiàn)，文本框的長(zhǎng)度縮短了。子項(xiàng)目2文本選擇菜單欄中的“插入”→“表單”→“文本區(qū)域”命令，插入一個(gè)文本區(qū)域。在屬性檢查器中“Name”文本框中輸入“neirong”作為該文本框的標(biāo)識(shí)。子項(xiàng)目3文本區(qū)域子項(xiàng)目3文本區(qū)域讀一讀：文本區(qū)域?qū)傩詸z查器設(shè)置選項(xiàng)當(dāng)選中文本區(qū)域時(shí)，屬性檢查器中的內(nèi)容發(fā)生變化，顯示的是文本區(qū)域的設(shè)置選項(xiàng)，其主要選項(xiàng)的說明如下。（1）“Name”文本框：用于設(shè)置文本區(qū)域的名稱。（2）“Rows”文本框：用于設(shè)置文本區(qū)域內(nèi)橫向上可輸入的字符數(shù)。（3）“Cols”文本框：用于設(shè)置文本區(qū)域的行數(shù)。當(dāng)實(shí)際行數(shù)大于該值時(shí)，自動(dòng)出現(xiàn)滾動(dòng)條。（4）“Disabled”復(fù)選框：勾選后，禁止在該文本區(qū)域輸入內(nèi)容。（5）“ReadOnly”復(fù)選框：勾選后，該文本區(qū)域?yàn)橹蛔x屬性，禁止修改內(nèi)容。（6）“Class”下拉列表：用于選擇該文本區(qū)域的樣式。（7）“Value”文本框：用于輸入文本區(qū)域的默認(rèn)顯示內(nèi)容。（8）“Wrap”下拉列表：用于選擇文本區(qū)域內(nèi)的換行模式，包括“默認(rèn)”“Soft”（軟回車）“Hard”（硬回車）3個(gè)選項(xiàng)。在屬性檢查器中將“Rows”設(shè)置為“10”，“Cols”設(shè)置為“50”，在“Value”文本框中輸入“歡迎您留言交流！”，勾選“Required”復(fù)選框。文本區(qū)域框變大，同時(shí)在文本區(qū)域中顯示“歡迎您留言交流！”一行文字。子項(xiàng)目3文本區(qū)域選擇菜單欄中的“插入”→“表單”→“單選按鈕組”命令。在彈出的“單選按鈕組”對(duì)話框中，修改第1個(gè)單選按鈕的“標(biāo)簽”為“男”，第2個(gè)單選按鈕的“標(biāo)簽”為“女”，也可以單擊“+”按鈕或“-”按鈕來增加或減少單選按鈕，單擊“確定”按鈕。子項(xiàng)目4單選按鈕與單選按鈕組“單選按鈕組”對(duì)話框中的主要選項(xiàng)說明如下。（1）“名稱”文本框：用于輸入單選按鈕組的名稱。（2）“標(biāo)簽”列表：用于設(shè)置單選按鈕的文字說明。（3）“值”列表：用于設(shè)置單選按鈕的值。（4）“換行符”單選按鈕：選中后，單選按鈕在網(wǎng)頁中直接換行。（5）“表格”單選按鈕：選中后，自動(dòng)插入表格用于單選按鈕換行。子項(xiàng)目4單選按鈕與單選按鈕組讀一讀：“單選按鈕組”對(duì)話框選中“男”單選按鈕，并在屬性檢查器中勾選“Checked”復(fù)選框，即設(shè)置默認(rèn)選擇其性別為“男”。此時(shí)可以發(fā)現(xiàn)，“男”單選按鈕中出現(xiàn)一個(gè)黑點(diǎn)。子項(xiàng)目4單選按鈕與單選按鈕組當(dāng)選中單選按鈕時(shí)，屬性檢查器中的內(nèi)容發(fā)生變化，顯示的是單選按鈕的設(shè)置選項(xiàng)，其主要選項(xiàng)的說明如下。（1）“Name”文本框：用于輸入單選按鈕的名稱。（2）“Disabled”復(fù)選框：勾選后，禁止使用該單選按鈕。（3）“Required”復(fù)選框：勾選后，要求在提交表單時(shí)必須選中該單選按鈕。（4）“AutoFocus”復(fù)選框：勾選后，在支持HTML5的瀏覽器中顯示該網(wǎng)頁時(shí)，鼠標(biāo)指針會(huì)自動(dòng)聚焦到該單選按鈕上。（5）“Class”下拉列表：用于指定單選按鈕所要使用的樣式。（6）“Form”下拉列表：用于設(shè)置單選按鈕所在的表單。（7）“Checked”復(fù)選框：用于設(shè)置當(dāng)前單選按鈕的初始狀態(tài)。（8）“Value”文本框：用于設(shè)置單選按鈕的值，該值會(huì)在上傳表單時(shí)傳到服務(wù)器上。子項(xiàng)目4單選按鈕與單選按鈕組讀一讀：?jiǎn)芜x按鈕的屬性檢查器在一個(gè)表單域中只允許一個(gè)單選按鈕被選中，如果有多組單選按鈕，則需要插入多個(gè)表單域，每個(gè)表單域中插入一組單選按鈕。子項(xiàng)目4單選按鈕與單選按鈕組選擇菜單欄中的“插入”→“表單”→“復(fù)選框組”命令，在“復(fù)選框組”對(duì)話框中輸入復(fù)選框組的名稱，依次增加復(fù)選框的標(biāo)簽，單擊“確定”按鈕。子項(xiàng)目5復(fù)選框“復(fù)選框組”對(duì)話框中各設(shè)置選項(xiàng)的主要說明如下。（1）“名稱”文本框：用于輸入復(fù)選框的名稱。（2）“標(biāo)簽”列表：用于設(shè)置復(fù)選框的文字說明。（3）“值”列表：用于設(shè)置復(fù)選框的值。（4）“換行符”單選按鈕：選中后，復(fù)選框在網(wǎng)頁中直接換行。（5）“表格”單選按鈕：選中后，自動(dòng)插入表格用于復(fù)選框換行。子項(xiàng)目5復(fù)選框讀一讀：“復(fù)選框組”對(duì)話框復(fù)選框的設(shè)置選項(xiàng)，其主要選項(xiàng)的說明如下。（1）“Name”文本框：用于輸入復(fù)選框的名稱。（2）“Disabled”復(fù)選框：勾選后，禁止使用該復(fù)選框。（3）“Required”復(fù)選框：勾選后，在提交表單時(shí)，必須勾選該復(fù)選框。（4）“AutoFocus”復(fù)選框：勾選后，在支持HTML5的瀏覽器中打開該網(wǎng)頁時(shí)，鼠標(biāo)指針會(huì)自動(dòng)指向復(fù)選框。（5）“Class”下拉列表：用于指定該復(fù)選框的類樣式。（6）“Form”下拉列表：用于設(shè)置該復(fù)選框的表單。（7）“Checked”復(fù)選框：用于設(shè)置該復(fù)選框的初始狀態(tài)。（8）“Value”文本框：用于設(shè)置該復(fù)選框被選中的值。子項(xiàng)目5復(fù)選框讀一讀：復(fù)選框的屬性檢查器選擇就是下拉列表。它可以顯示選項(xiàng)列表，既可以為留言者提供便利，又便于管理員對(duì)留言內(nèi)容進(jìn)行管理。選擇常被應(yīng)用于登記表上，如在詢問國(guó)家、省份、受教育程度時(shí)經(jīng)常見到下拉列表。子項(xiàng)目6選擇選擇菜單欄中的“插入”→“表單”→“選擇”命令，在文檔編輯區(qū)單擊可以看到，文字后面插入一個(gè)“選擇”表單元素，選中“選擇”表單元素，首先在屬性檢查器的“Name”文本框中輸入“jiaxiang”作為該表單元素的名稱，然后單擊“列表值”按鈕。子項(xiàng)目6選擇選中“選擇”表單元素時(shí)，屬性檢查器中的內(nèi)容發(fā)生變化，顯示的是“選擇”表單元素的設(shè)置選項(xiàng)，其主要選項(xiàng)的說明如下。（1）“Name”文本框：用于輸入該選擇的名稱。（2）“Disabled”復(fù)選框：勾選后，禁止使用該選擇。（3）“Required”復(fù)選框：勾選后，在提交表單時(shí)，必須選擇一個(gè)選擇。（4）“AutoFocus”復(fù)選框：勾選后，在支持HTML5的瀏覽器中打開該網(wǎng)頁時(shí)，鼠標(biāo)指針會(huì)自動(dòng)指向該選擇。（5）“Multiple”復(fù)選框：勾選后，允許用戶選擇多個(gè)選項(xiàng)（按住Ctrl鍵選擇）。（6）“Class”下拉列表：用于指定該選擇的樣式。（7）“Form”下拉列表：用于設(shè)置該選擇的表單。（8）“Size”文本框：用于指定該選擇所能容納的數(shù)量。（9）“Selected”列表框：用于顯示當(dāng)前選擇內(nèi)包含的選項(xiàng)。（10）“列表值”按鈕：用于輸入或修改選擇的各個(gè)項(xiàng)目。子項(xiàng)目6選擇讀一讀：“選擇”的屬性檢查器在“列表值”對(duì)話框的“項(xiàng)目標(biāo)簽”列表中輸入項(xiàng)目標(biāo)簽。在輸入過程中，單擊“+”按鈕可以增加列表值，單擊“-”按鈕可以減少列表值。輸入完之后，單擊“確定”按鈕。子項(xiàng)目6選擇選中“選擇”表單元素，在屬性檢查器中選擇“Selected”列表框中的一項(xiàng)選項(xiàng)，這樣表單域中“來自：”右側(cè)的下拉列表中出現(xiàn)設(shè)定選項(xiàng)，并作為默認(rèn)值。子項(xiàng)目6選擇選擇菜單欄中的“插入”→“表單”→“‘提交’按鈕”命令，表單域下方插入一個(gè)“提交”按鈕。子項(xiàng)目7按鈕選擇菜單欄中的“插入”→“表單”→“‘重置’按鈕”命令，表單域中插入“重置”按鈕。當(dāng)單擊“提交”按鈕時(shí)，表單內(nèi)容被提交；當(dāng)單擊“重置”按鈕時(shí)，所有填寫內(nèi)容被清空，等待重新填寫。子項(xiàng)目7按鈕按鈕一共有3種類型：“提交”按鈕是將表單資料傳送到相應(yīng)位置；“重置”按鈕是將表單資料全部清除，等待重新輸入；“無”是常規(guī)按鈕，可以與其他程序相連，作為打開其他程序的按鈕。子項(xiàng)目7按鈕表單元素還包括文件域、圖像域、隱藏域等。由于本項(xiàng)目并未涉及，因此沒有進(jìn)行詳細(xì)的介紹。請(qǐng)大家自行插入這些表單元素，并了解它們的作用，最后刪除即可。做一做：完善留言簿表單欄目提交表單信息項(xiàng)目二創(chuàng)建互動(dòng)留言簿留言簿是瀏覽者和網(wǎng)站設(shè)計(jì)者溝通的橋梁，一個(gè)好的留言簿可以記錄瀏覽者的意見和建議，對(duì)于網(wǎng)站的不斷完善起到非常重要的作用，但互聯(lián)網(wǎng)不是法外之地，每一個(gè)人都應(yīng)該對(duì)自己的言行負(fù)責(zé)，發(fā)言不能只圖自己痛快，卻置法律法規(guī)于不顧，只有謹(jǐn)言慎行、自覺自律，才能讓互聯(lián)網(wǎng)成為傳播正能量的平臺(tái)。子項(xiàng)目1完善留言簿表單欄目增加電子郵件地址等留言簿上的相關(guān)內(nèi)容，調(diào)整各元素的位置，更改字體大小、背景顏色等，完成留言簿的設(shè)置。子項(xiàng)目1