第4章表單和框架

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

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

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

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

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

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

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

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

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

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

11、標記元素與標記元素來定義的，其中標記元素用于定義框架集，即定義大窗口；標記元素用于定義框架，即定義窗口中的小窗口。u在XHTML包含框架的頁面中，應將DOCTYPE設(shè)置為Frameset DTD。u不能將標記元素與標記元素一起使用，而是用標記元素來代替標記元素，在標記元素中嵌套標記元素，用來指定小窗口的顯示內(nèi)容，在XHTML中，標記元素必須被正確地關(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. 常見的對窗口的分割包括水平分割、垂直分割和混合分割。根據(jù)實際需要進行分割時，可以通過設(shè)置標記元素中的rows（水平分割）或cols（垂直分割）

12、屬性來進行分割。標記元素的主要屬性及其功能描述如表4.9所示。cols屬性可用于定義一個垂直分割的窗口框架，基本語法如下： rows屬性可定義一個水平分割的窗口框架，基本語法如下： 4.2.1 框架的結(jié)構(gòu)3. 在各小窗口中設(shè)置相應頁面，進行初始化可以通過設(shè)置src屬性來鏈接相應的文件，并對子窗口進行設(shè)置。標記元素的主要屬性及其功能描述如表4.10所示。屬屬 性性值值功能描述功能描述frameborder0，1，1設(shè)置是否顯示框架周圍的邊框namename設(shè)置框架的名稱noresizenoresize設(shè)置框架的大小（無法調(diào)整）scrollingyes、no、auto、no、auto 設(shè)置是否在框

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

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