第4章表單和框架

1、第4章 表單和框架煙臺(tái)職業(yè)學(xué)院孫俊琳本章學(xué)習(xí)目標(biāo)u能夠熟練使用表單收集各種用戶(hù)反饋信息u能夠熟練使用框架技術(shù)實(shí)現(xiàn)網(wǎng)頁(yè)的布局4.1 表單u表單容器標(biāo)簽u 輸入域標(biāo)簽u多行文本輸入框u下拉列表框u標(biāo)注標(biāo)簽u分組標(biāo)簽u按鈕標(biāo)簽4.1.1 表單容器標(biāo)簽 標(biāo)記元素用于為用戶(hù)創(chuàng)建XHTML表單。表單是包含表單元素的一個(gè)區(qū)域，表單中可以包含標(biāo)記元素、標(biāo)記元素、標(biāo)記元素、標(biāo)記元素、標(biāo)記元素等表單元素，通常在頁(yè)面上表單是不可見(jiàn)的，但可以看到表單中的表單元素。4.1.1 表單容器標(biāo)簽 1.基本用法 表單元素注意：（1）用于創(chuàng)建基本表單，設(shè)置屬性可以使瀏覽器知道如何處理表單數(shù)據(jù)。（2）標(biāo)記元素對(duì)內(nèi)定義包括的表單元素

2、，創(chuàng)建輸入控件。屬屬 性性取取 值值功能說(shuō)明功能說(shuō)明id/namename設(shè)置表單的id/名稱(chēng)id/名稱(chēng)actionURL設(shè)置表單提交時(shí)，接收處理表單數(shù)據(jù)的文件methodget、post、post設(shè)置表單提交方式enctypeMIME_type設(shè)置表單發(fā)送到服務(wù)器之前對(duì)數(shù)據(jù)進(jìn)行編碼類(lèi)型acceptMIME_type設(shè)置表單提交的文件內(nèi)容的類(lèi)型accept-charsetcharset設(shè)置表單提交的文件字符集的類(lèi)型target_blank、_parent、_self、_top、framename、_parent、_self、_top、framename設(shè)置打開(kāi)表單提交跳轉(zhuǎn)頁(yè)面URL的位置URL

3、的位置4.1.2 輸入域標(biāo)簽 標(biāo)記元素是非成對(duì)的，它嵌套在表單標(biāo)記元素中使用，用來(lái)定義一個(gè)輸入項(xiàng)。1.主要屬性標(biāo)記元素的主要屬性及其取值和功能說(shuō)明如表4.3所示。屬屬 性性取取 值值功能說(shuō)明功能說(shuō)明typetype設(shè)置輸入項(xiàng)的類(lèi)型nametext設(shè)置輸入項(xiàng)變量名sizenumber設(shè)置輸入項(xiàng)的長(zhǎng)度valuetext設(shè)置輸入項(xiàng)中預(yù)設(shè)的文本內(nèi)容maxlengthnumber設(shè)置輸入項(xiàng)允許輸入的最大字符數(shù)checkedchecked設(shè)置輸入項(xiàng)首次加載時(shí)被選中狀態(tài)disableddisabled設(shè)置輸入項(xiàng)加載時(shí)禁用狀態(tài)readonlyreadonly設(shè)置輸入項(xiàng)為只讀狀態(tài)4.1.2 輸入域標(biāo)簽 2.ty

4、pe屬性取值標(biāo)記元素的type屬性及其說(shuō)明如表4.4所示。typetype屬性屬性說(shuō)說(shuō) 明明text單行文本輸入框password密碼輸入框radio單選按鈕checkbox復(fù)選按鈕hidden隱藏元素image圖像域file文件選擇submit提交按鈕reset重置按鈕button自定義按鈕4.1.2 輸入域標(biāo)簽 3.類(lèi)型實(shí)例（1）單行文本、密碼輸入框例4.1 實(shí)現(xiàn)用戶(hù)登錄。用戶(hù)名： 密 & n b s p ; & n b s p ; 碼 ： 4.1.2 輸入域標(biāo)簽3.類(lèi)型實(shí)例（2）單選、復(fù)選按鈕例4.2 在表單中選擇性別和愛(ài)好。您的性別：男女請(qǐng)選擇愛(ài)好：看書(shū)旅游運(yùn)動(dòng)上網(wǎng)購(gòu)物4.1.2 輸入

5、域標(biāo)簽（3）提交按鈕、重置按鈕、自定義按鈕u當(dāng)輸入項(xiàng)類(lèi)型“type=submit”設(shè)為提交按鈕時(shí)；u當(dāng)輸入項(xiàng)類(lèi)型“type=reset”設(shè)為重置按鈕時(shí)；u當(dāng)輸入項(xiàng)類(lèi)型“type=button”設(shè)為自定義按鈕時(shí)，則可以設(shè)定按鈕上的標(biāo)題，但單擊沒(méi)有任何動(dòng)作發(fā)生，一般常用于設(shè)定單擊后執(zhí)行JavaScript程序。例4.3 在表單中增加按鈕。4.1.2 輸入域標(biāo)簽（4） 圖像域 當(dāng)輸入項(xiàng)類(lèi)型“type=image”設(shè)為圖像時(shí)，可以在表單中添加圖像，也可以設(shè)置為圖像按鈕。圖像按鈕以加載的圖像按鈕顯示在頁(yè)面中，圖像的加載是通過(guò)src屬性來(lái)設(shè)置的，單擊圖像形式的提交按鈕瀏覽器會(huì)將表單的輸入信息傳送給服務(wù)器。

6、例如，在表單中選擇頭像，通過(guò)圖像按鈕進(jìn)行提交。（5）隱藏元素在表單提交時(shí)有些值是不需要顯示出來(lái)的，而隱藏在頁(yè)面里。這時(shí)可以將輸入項(xiàng)類(lèi)型“type”設(shè)置為hidden，通常這類(lèi)數(shù)據(jù)將被作為輔助數(shù)據(jù)隨表單提交，在服務(wù)器端可以被處理。例如：（6）文件選擇將輸入項(xiàng)類(lèi)型“type”設(shè)為file，即文件選擇類(lèi)型，會(huì)彈出文件打開(kāi)對(duì)話(huà)框，選擇本地計(jì)算機(jī)里的一個(gè)文件可以將其提交到服務(wù)器。例如：4.1.3 多行文本輸入框u和標(biāo)記元素之間的內(nèi)容可以設(shè)定顯示在文本輸入框中的初始信息；ucols 和 rows 屬性分別代表多行文本輸入框列數(shù)和行數(shù)，當(dāng)輸入的文本超過(guò)該數(shù)目時(shí)，自動(dòng)出現(xiàn)下拉滾動(dòng)條以滿(mǎn)足更多行輸入；udisa

7、bled屬性可用來(lái)設(shè)置多行文本框是否可用；ureadonly屬性可用來(lái)設(shè)置多行文本框中的內(nèi)容是否是只讀的例4.4 使用 標(biāo)記實(shí)現(xiàn)多行文本區(qū)域。請(qǐng)留言：該文本框設(shè)定8行高度，每行40字符寬度4.1.4 下拉列表框u在表單中使用標(biāo)記元素定義下拉列表框；u標(biāo)記元素定義下拉列表框中的一個(gè)選項(xiàng)，位于內(nèi)，標(biāo)記元素必須與標(biāo)記元素結(jié)合使用；u使用標(biāo)記元素將相關(guān)下拉列表選項(xiàng)組合在一起，對(duì)選項(xiàng)分組。1.標(biāo)簽的主要屬性屬屬 性性取取 值值功能說(shuō)明功能說(shuō)明nametext設(shè)置下拉列表選擇框名sizenumber設(shè)置下拉列表框可見(jiàn)選項(xiàng)的數(shù)目disableddisabled設(shè)置下拉列表框加載時(shí)禁用狀態(tài)multiplemu

8、ltiple設(shè)置下拉列表框是否可多選4.1.4 下拉列表框2.標(biāo)簽的主要屬性例4.5 下拉菜單的定義。 請(qǐng)選擇您的出生地： 請(qǐng)選擇 北京 上海 煙臺(tái) 大連 其他 屬屬 性性取取 值值功能說(shuō)明功能說(shuō)明labeltext設(shè)置下拉列表框選項(xiàng)的標(biāo)簽selectednumber設(shè)置下拉列表框選項(xiàng)是否為選中狀態(tài)disableddisabled設(shè)置下拉列表框選項(xiàng)首次加載時(shí)被禁用valuetext設(shè)置下拉列表框項(xiàng)選中向服務(wù)器傳遞的值4.1.4 下拉列表框3.標(biāo)記元素的主要屬性標(biāo)記元素的主要屬性及其取值和功能說(shuō)明如表4.7所示。例4.6 運(yùn)用下拉列表選擇多項(xiàng)內(nèi)容。屬屬 性性取取 值值功能說(shuō)明功能說(shuō)明labelt

9、ext設(shè)置下拉列表框選項(xiàng)組的標(biāo)簽disableddisabled設(shè)置下拉列表框選項(xiàng)組被禁用4.1.5 標(biāo)注標(biāo)簽 作用是向控件定義標(biāo)注。該標(biāo)簽和特定的標(biāo)記元素綁定，為其定義標(biāo)簽，顯示文本信息。同時(shí)，如果在標(biāo)記元素內(nèi)單擊文本，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和該標(biāo)簽相關(guān)的表單元素上。通過(guò)標(biāo)記元素的for屬性與相關(guān)表單元素的id屬性來(lái)實(shí)現(xiàn)綁定。例如： Male Female4.1.6 分組標(biāo)簽 使用標(biāo)記元素可將表單內(nèi)的相關(guān)元素分組，當(dāng)一組表單元素放到標(biāo)簽內(nèi)時(shí)，瀏覽器會(huì)給它們加上特殊的邊界來(lái)顯示它們，或者可創(chuàng)建一個(gè)子表單來(lái)處理這些元素。標(biāo)簽元素為表單元素分組定義標(biāo)題。例4.7 運(yùn)用分組標(biāo)簽界定信息類(lèi)型。 個(gè)人

10、愛(ài)好 上網(wǎng) 讀書(shū) 體育 音樂(lè) 繪畫(huà) 4.1.7 按鈕標(biāo)簽 控件 與 相比，提供了更為強(qiáng)大的功能和更豐富的內(nèi)容。 與 標(biāo)簽之間的所有內(nèi)容都是按鈕的內(nèi)容，其中包括任何可接受的正文內(nèi)容，比如文本或多媒體內(nèi)容。標(biāo)記元素的主要屬性及其取值和功能說(shuō)明如表4.8所示。屬屬 性性取取 值值功能說(shuō)明功能說(shuō)明nametext設(shè)置按鈕的名稱(chēng)typebutton、submit、reset、submit、reset設(shè)置按鈕的類(lèi)型disableddisabled設(shè)置按鈕被禁用valuetext設(shè)置按鈕的初始值4.1.8 制作注冊(cè)表單例4.8 制作注冊(cè)表單。4.2 框架u框架的基本結(jié)構(gòu)主要分為框架集和框架兩部分。u它是利用

11、標(biāo)記元素與標(biāo)記元素來(lái)定義的，其中標(biāo)記元素用于定義框架集，即定義大窗口；標(biāo)記元素用于定義框架，即定義窗口中的小窗口。u在XHTML包含框架的頁(yè)面中，應(yīng)將DOCTYPE設(shè)置為Frameset DTD。u不能將標(biāo)記元素與標(biāo)記元素一起使用，而是用標(biāo)記元素來(lái)代替標(biāo)記元素，在標(biāo)記元素中嵌套標(biāo)記元素，用來(lái)指定小窗口的顯示內(nèi)容，在XHTML中，標(biāo)記元素必須被正確地關(guān)閉。4.2.1 框架的結(jié)構(gòu)1.框架的基本結(jié)構(gòu)框架的基本結(jié)構(gòu)如下： 框架的結(jié)構(gòu) 4.2.1 框架的結(jié)構(gòu)2. 常見(jiàn)的對(duì)窗口的分割包括水平分割、垂直分割和混合分割。根據(jù)實(shí)際需要進(jìn)行分割時(shí)，可以通過(guò)設(shè)置標(biāo)記元素中的rows（水平分割）或cols（垂直分割）

12、屬性來(lái)進(jìn)行分割。標(biāo)記元素的主要屬性及其功能描述如表4.9所示。cols屬性可用于定義一個(gè)垂直分割的窗口框架，基本語(yǔ)法如下： rows屬性可定義一個(gè)水平分割的窗口框架，基本語(yǔ)法如下： 4.2.1 框架的結(jié)構(gòu)3. 在各小窗口中設(shè)置相應(yīng)頁(yè)面，進(jìn)行初始化可以通過(guò)設(shè)置src屬性來(lái)鏈接相應(yīng)的文件，并對(duì)子窗口進(jìn)行設(shè)置。標(biāo)記元素的主要屬性及其功能描述如表4.10所示。屬屬 性性值值功能描述功能描述frameborder0，1，1設(shè)置是否顯示框架周?chē)倪吙騨amename設(shè)置框架的名稱(chēng)noresizenoresize設(shè)置框架的大?。o(wú)法調(diào)整）scrollingyes、no、auto、no、auto 設(shè)置是否在框

13、架中顯示滾動(dòng)條srcURL設(shè)置在框架中顯示的文檔的 URLURLmarginwidthpixels設(shè)置窗口顯示內(nèi)容與窗口左右邊距marginheightpixels設(shè)置窗口顯示內(nèi)容與窗口上下邊距4.2.1 框架的結(jié)構(gòu)4 在那些不支持框架的瀏覽器中使用標(biāo)記元素就可顯示設(shè)置的相應(yīng)文本。標(biāo)記元素位于標(biāo)記元素內(nèi)部，要顯示的提示文本則在標(biāo)記元素對(duì)中。基本格式如下： 顯示的提示信息 4.2.2 框架的應(yīng)用設(shè)置1.設(shè)置垂直框架 使用框架可將瀏覽器窗口垂直分割為兩個(gè)小窗口，假設(shè)左邊窗口為left.html，右邊窗口為right.html。實(shí)現(xiàn)代碼如下： 4.2.2 框架的應(yīng)用設(shè)置2.設(shè)置混合框架 假設(shè)我們要對(duì)

14、頁(yè)面先進(jìn)行上下分割，再對(duì)下面的頁(yè)面進(jìn)行左右分割。上面部分頁(yè)面為top.html ，左邊部分頁(yè)面為left.html，右邊部分頁(yè)面為 maim.html。實(shí)現(xiàn)方法是通過(guò)在框架標(biāo)簽內(nèi)嵌套框架標(biāo)簽。需要注意的是，設(shè)置上下分割線(xiàn)后頁(yè)面寬度不可調(diào)整，即上半部分是固定的。例4.9 郵箱界面設(shè)計(jì)。4.2.2 框架的應(yīng)用設(shè)置3.設(shè)置導(dǎo)航框架 需要用到“target”屬性。在建立導(dǎo)航框架時(shí)，要靈活運(yùn)用標(biāo)記元素的name屬性和標(biāo)記元素的target屬性。標(biāo)記元素的name屬性用來(lái)指定窗口的名稱(chēng)，標(biāo)記元素的target屬性用來(lái)指定被鏈接內(nèi)容被放置的窗口。當(dāng)定義子窗口名后，可通過(guò)超鏈接指定網(wǎng)頁(yè)顯示的子窗口。例4.10 將例4.9中的“寫(xiě)郵件”、“收郵件”、“草稿箱”的鏈接實(shí)現(xiàn)。4.2.2 框架的應(yīng)用設(shè)置4.設(shè)置框架錨點(diǎn)跳轉(zhuǎn) 將框架的應(yīng)用與錨的設(shè)置相結(jié)合，在一個(gè)混合框架的頁(yè)面左側(cè)的框架中設(shè)置一個(gè)鏈接列表，鏈接內(nèi)容是右側(cè)框架中的文檔內(nèi)容，導(dǎo)航框架指向文檔內(nèi)容不同的節(jié)區(qū)，即要在右側(cè)文檔中設(shè)置錨點(diǎn)，左側(cè)的鏈接跳轉(zhuǎn)到不同錨點(diǎn)，完成頁(yè)面內(nèi)容的變換瀏覽。例4.11 運(yùn)用錨實(shí)現(xiàn)框架內(nèi)的跳轉(zhuǎn)。4.2.2 框架的應(yīng)用設(shè)置5.設(shè)置內(nèi)聯(lián)框架 將一個(gè)頁(yè)面直接嵌入到另一個(gè)頁(yè)面中顯示，這種技術(shù)稱(chēng)為浮動(dòng)窗口。