第4章表單和框架_第1頁(yè)
第4章表單和框架_第2頁(yè)
第4章表單和框架_第3頁(yè)
第4章表單和框架_第4頁(yè)
第4章表單和框架_第5頁(yè)
已閱讀5頁(yè),還剩25頁(yè)未讀 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶(hù)提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

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)窗口。

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論