第2章：表格、表單、框架

1、第二章第二章 表格、表單、框架表格、表單、框架本章內(nèi)容本章內(nèi)容l表格的定義表格的定義表格模型表格模型表格元素表格元素table、tr、td、th等等表格的題注及分組表格的題注及分組表格分組表格分組l表單表單表單的功能表單的功能表單元素（表單元素（form、input、textarea、select、option等）等）l框架的概念框架的概念多窗口頁面多窗口頁面相關(guān)元素（框架集元素、框架元素、無框架元素）相關(guān)元素（框架集元素、框架元素、無框架元素）鏈接到框架、浮動框架鏈接到框架、浮動框架表格模型表格模型l表格通常用來組織結(jié)構(gòu)化的信息表格通常用來組織結(jié)構(gòu)化的信息l表格是一些被稱作單元格的矩形框按照

2、從左到右，從上表格是一些被稱作單元格的矩形框按照從左到右，從上到下的順序排列在一起而形成的到下的順序排列在一起而形成的l表格的數(shù)據(jù)保存在單元格里表格的數(shù)據(jù)保存在單元格里l表格的格式可以在三個層次被設(shè)置，從行，列到相鄰的表格的格式可以在三個層次被設(shè)置，從行，列到相鄰的若干個單元格，還可以對每一個單元格單獨設(shè)置若干個單元格，還可以對每一個單元格單獨設(shè)置lHTML4.0可以讓單元格按行或列進(jìn)行分組可以讓單元格按行或列進(jìn)行分組 與表格有關(guān)的元素與表格有關(guān)的元素表格元素表格元素l語法語法開始標(biāo)記：開始標(biāo)記： 必需必需內(nèi)容：內(nèi)容：caption：表格標(biāo)題元素：表格標(biāo)題元素col：列元素：列元素thead：

3、表頭行分組元素：表頭行分組元素tbody：表主體行分組元素：表主體行分組元素tfoot：表尾行分組元素：表尾行分組元素tr：行元素：行元素td：單元格元素：單元格元素 結(jié)束標(biāo)記：必需結(jié)束標(biāo)記：必需Table元素的屬性元素的屬性行元素行元素l語法語法開始標(biāo)記：開始標(biāo)記： 必需必需內(nèi)容：內(nèi)容：td 單元格單元格th 表頭單元格表頭單元格 結(jié)束標(biāo)記：可選結(jié)束標(biāo)記：可選l主要屬性主要屬性通用屬性：通用屬性：id,class,lang,dir,title,style橫向?qū)R屬性：橫向?qū)R屬性：align。可取值為?？扇≈禐閞ight,left,center,justify（兩端（兩端對齊）對齊）,cha

4、r(字符對齊字符對齊)縱向?qū)R屬性縱向?qū)R屬性:valign?？扇≈禐??？扇≈禐閠op,middle,bottom,baseline(基線對齊基線對齊)單元格元素單元格元素(1/2)l語法語法開始標(biāo)記：開始標(biāo)記： 必需必需內(nèi)容：內(nèi)容：單元格數(shù)據(jù)單元格數(shù)據(jù) 結(jié)束標(biāo)記：可選結(jié)束標(biāo)記：可選l主要屬性主要屬性通用屬性：通用屬性：id,class,lang,dir,title,style橫向?qū)R屬性：橫向?qū)R屬性：align可取值為可取值為right,left,center,justify（兩端對齊），（兩端對齊），char(字符對齊字符對齊)縱向?qū)R屬性縱向?qū)R屬性:valign可取值為可取值為top

5、,middle,bottom,baseline(基線對齊基線對齊)單元格元素單元格元素(2/2)l主要屬性主要屬性width:單元格的寬度單元格的寬度height:單元格的高度單元格的高度bgcolor:背景色背景色colspan:單元格所跨列的數(shù)目單元格所跨列的數(shù)目rowspan:單元格所跨行的數(shù)目單元格所跨行的數(shù)目舉例舉例-創(chuàng)建表格創(chuàng)建表格l下面代碼建立了一個下面代碼建立了一個2x2的表格的表格 a1 a2 b1 b2 表格的題注表格的題注(1/2)l語法語法開始標(biāo)記：開始標(biāo)記： 必需必需內(nèi)容：內(nèi)容：行內(nèi)標(biāo)記行內(nèi)標(biāo)記 結(jié)束標(biāo)記：必需結(jié)束標(biāo)記：必需l主要屬性主要屬性align屬性：用以確定題

6、注的位置，可以有五種取值：屬性：用以確定題注的位置，可以有五種取值：bottom、center、left、right、topl備注備注caption元素必須包含在元素必須包含在table元素中，而且必須緊跟在元素中，而且必須緊跟在的開始標(biāo)記之后的開始標(biāo)記之后表格的題注表格的題注(2/2)b bottomottom：題注在表格的下方：題注在表格的下方t top op ：題注在表格的上方：題注在表格的上方l lefteft：題注在表格的左邊：題注在表格的左邊rightright：題注在表格的右邊：題注在表格的右邊行分組行分組l表頭行分組表頭行分組開始標(biāo)記必需，結(jié)束標(biāo)記可選開始標(biāo)記必需，結(jié)束標(biāo)記可選

7、l表主體行分組表主體行分組開始標(biāo)記可選，結(jié)束標(biāo)記可選開始標(biāo)記可選，結(jié)束標(biāo)記可選l表尾行分組表尾行分組開始標(biāo)記必需，結(jié)束標(biāo)記可選開始標(biāo)記必需，結(jié)束標(biāo)記可選l內(nèi)容：內(nèi)容：一個或幾個一個或幾個tr元素元素lthead 元素應(yīng)該與元素應(yīng)該與 tbody 和和 tfoot 元素結(jié)合起來使用。元素結(jié)合起來使用?？缧泻涂缌锌缧泻涂缌衛(wèi)單元格跨行和跨列的功能常被應(yīng)用來建立一些不規(guī)則的單元格跨行和跨列的功能常被應(yīng)用來建立一些不規(guī)則的表格表格ltd/th元素有兩個屬性元素有兩個屬性colspan和和rowspan可設(shè)置單元格可設(shè)置單元格跨行和跨列跨行和跨列colspan水平方向延伸單元格，值為一正整數(shù)，代表此單元

8、格水平延伸的單水平方向延伸單元格，值為一正整數(shù)，代表此單元格水平延伸的單元格數(shù)元格數(shù)rowspan垂直方向延伸單元格，值為一正整數(shù)，代表此單元格垂直延伸的單垂直方向延伸單元格，值為一正整數(shù)，代表此單元格垂直延伸的單元格數(shù)元格數(shù)不規(guī)則表格的建立不規(guī)則表格的建立 1 2 2 2 3 3 3 1 1 1 1 2 2 2 表單的功能表單的功能用戶登錄用戶登錄收集用戶信息收集用戶信息提交用戶請求提交用戶請求基于互聯(lián)網(wǎng)的電子商務(wù)基于互聯(lián)網(wǎng)的電子商務(wù)表單的處理過程表單的處理過程l一、設(shè)計表單，并放入一些輸入域一、設(shè)計表單，并放入一些輸入域l二、網(wǎng)站訪問者在自己的計算機(jī)上填寫上述輸入域，并二、網(wǎng)站訪問者在自己

9、的計算機(jī)上填寫上述輸入域，并提交到服務(wù)器端提交到服務(wù)器端l三、服務(wù)器處理數(shù)據(jù)并返回確認(rèn)信息三、服務(wù)器處理數(shù)據(jù)并返回確認(rèn)信息Internet服務(wù)器服務(wù)器數(shù)據(jù)庫數(shù)據(jù)庫表單元素表單元素l語法語法開始標(biāo)記：必需開始標(biāo)記：必需內(nèi)容：內(nèi)容： 表單域元素表單域元素 結(jié)束標(biāo)記：必需結(jié)束標(biāo)記：必需l主要屬性主要屬性action屬性：定義表單被提交時發(fā)生的動作，通常包含服務(wù)方腳屬性：定義表單被提交時發(fā)生的動作，通常包含服務(wù)方腳本的本的URL（比如（比如ASP、PHP）method屬性：指出表單數(shù)據(jù)提交的方式。有兩個可能值屬性：指出表單數(shù)據(jù)提交的方式。有兩個可能值get： 將表單數(shù)據(jù)附加在請求中的將表單數(shù)據(jù)附加在請

10、求中的URL上上post： 將表單數(shù)據(jù)封裝在發(fā)送到服務(wù)器的請求中將表單數(shù)據(jù)封裝在發(fā)送到服務(wù)器的請求中l(wèi)作用：定義一個可以加入表單對象的區(qū)域作用：定義一個可以加入表單對象的區(qū)域表單控件元素表單控件元素l表單元素是允許用戶在表單中（比如：文本域、下拉列表單元素是允許用戶在表單中（比如：文本域、下拉列表、單選框、復(fù)選框等等）輸入信息的元素。表、單選框、復(fù)選框等等）輸入信息的元素。l表單控件元素有表單控件元素有input元素元素textarea元素元素select和和option元素元素元素元素l語法語法開始標(biāo)記：必需開始標(biāo)記：必需內(nèi)容：空內(nèi)容：空結(jié)束標(biāo)記：禁用結(jié)束標(biāo)記：禁用l主要屬性主要屬性type

11、屬性：指定表單控件的類型屬性：指定表單控件的類型value屬性：指定表單控件的數(shù)據(jù)屬性：指定表單控件的數(shù)據(jù)name屬性：指定該控件的名字屬性：指定該控件的名字l作用：作用：根據(jù)對根據(jù)對type屬性不同的取值可以建立多種顯示風(fēng)格的表單控件，屬性不同的取值可以建立多種顯示風(fēng)格的表單控件，如文本區(qū)域、口令域、復(fù)選框、單選按鈕、提交按鈕、重新設(shè)置如文本區(qū)域、口令域、復(fù)選框、單選按鈕、提交按鈕、重新設(shè)置按鈕、文本域、隱藏域、圖像域和通用按鈕按鈕、文本域、隱藏域、圖像域和通用按鈕文本域控件文本域控件ltype = text作用：用于創(chuàng)建一個單行文本輸入字段作用：用于創(chuàng)建一個單行文本輸入字段值：由訪問者自由

12、輸入的任何文本值：由訪問者自由輸入的任何文本與與input元素的其它屬性配合：元素的其它屬性配合：maxlength屬性可以限制輸入的字符數(shù)屬性可以限制輸入的字符數(shù)readonly屬性可以讓文本控件只讀屬性可以讓文本控件只讀口令控件口令控件ltype = “password”作用：用于創(chuàng)建一個單行文本輸入字段，并用作用：用于創(chuàng)建一個單行文本輸入字段，并用*號屏蔽用戶的輸號屏蔽用戶的輸入。注意，當(dāng)入。注意，當(dāng)password輸入的數(shù)據(jù)提交時并不以任何形式加密輸入的數(shù)據(jù)提交時并不以任何形式加密value值：由訪問者自由輸入的任何文本作為默認(rèn)值值：由訪問者自由輸入的任何文本作為默認(rèn)值與與input元

13、素的其它屬性一致：元素的其它屬性一致： maxlength屬性可以限制輸入的字符數(shù)屬性可以限制輸入的字符數(shù)提交按鈕和重置按鈕提交按鈕和重置按鈕ltype=submit作用：傳送表單數(shù)據(jù)給服務(wù)器端腳本或其它程序處理作用：傳送表單數(shù)據(jù)給服務(wù)器端腳本或其它程序處理value值：按鈕的標(biāo)題文字值：按鈕的標(biāo)題文字ltype=reset作用：清空表單的內(nèi)容并把所有表單控件設(shè)置為最初的默認(rèn)值作用：清空表單的內(nèi)容并把所有表單控件設(shè)置為最初的默認(rèn)值value值：按鈕的標(biāo)題文字值：按鈕的標(biāo)題文字 復(fù)選框控件復(fù)選框控件ltype=checkbox作用：創(chuàng)建一個可以在選中和未選中之間切換的控件，當(dāng)該表單作用：創(chuàng)建一個

14、可以在選中和未選中之間切換的控件，當(dāng)該表單提交給一個腳本進(jìn)行處理時，每個被選取的復(fù)選框?qū)⒎祷匾粋€與提交給一個腳本進(jìn)行處理時，每個被選取的復(fù)選框?qū)⒎祷匾粋€與該復(fù)選框的名稱相關(guān)聯(lián)的值該復(fù)選框的名稱相關(guān)聯(lián)的值value值：選中該控件的值，可以是任意文本值：選中該控件的值，可以是任意文本l與與input元素的其它屬性配合：元素的其它屬性配合：要以選取狀態(tài)顯示復(fù)選框，使用要以選取狀態(tài)顯示復(fù)選框，使用checked屬性屬性 旅游旅游 運動運動 唱歌唱歌 單選按鈕單選按鈕ltype=radio作用：創(chuàng)建一個單選按鈕，用于互斥地選擇某種屬性值作用：創(chuàng)建一個單選按鈕，用于互斥地選擇某種屬性值value值：文本，

15、當(dāng)提交值：文本，當(dāng)提交form時，如果選中了此單選按鈕，那么時，如果選中了此單選按鈕，那么value就被發(fā)送到服務(wù)器就被發(fā)送到服務(wù)器l與與input元素的其它屬性配合：元素的其它屬性配合：要以選取狀態(tài)顯示復(fù)選框，使用要以選取狀態(tài)顯示復(fù)選框，使用checked屬性屬性 上午上午 下午下午 晚上晚上 圖像按鈕和普通按鈕圖像按鈕和普通按鈕ltype=image作用：創(chuàng)建一個圖像按鈕，用于實現(xiàn)用戶自定義的按鈕風(fēng)格作用：創(chuàng)建一個圖像按鈕，用于實現(xiàn)用戶自定義的按鈕風(fēng)格src屬性：指向按鈕圖片的位置屬性：指向按鈕圖片的位置ltype=button作用：用于控制執(zhí)行客戶端腳本作用：用于控制執(zhí)行客戶端腳本Val

16、ue值：文本，顯示在按鈕上的標(biāo)簽值：文本，顯示在按鈕上的標(biāo)簽隱藏控件和文件選擇控件隱藏控件和文件選擇控件ltype=hidden作用：用于在表單中包含不希望用戶看見的信息作用：用于在表單中包含不希望用戶看見的信息value值：文本，指派給控件的值，當(dāng)用戶提交表單時，該值與值：文本，指派給控件的值，當(dāng)用戶提交表單時，該值與其它數(shù)據(jù)一起被發(fā)送其它數(shù)據(jù)一起被發(fā)送ltype=file作用：上載文件作用：上載文件value值：文本，要上載的文件在本地的路徑值：文本，要上載的文件在本地的路徑 元素元素l語法語法開始標(biāo)記：必需開始標(biāo)記：必需內(nèi)容：內(nèi)容： 出現(xiàn)在出現(xiàn)在textarea中的初始文本中的初始文本結(jié)

17、束標(biāo)記：必需結(jié)束標(biāo)記：必需l主要屬性：主要屬性：cols屬性：指定文本區(qū)域的列數(shù)屬性：指定文本區(qū)域的列數(shù)rows屬性：指定文本區(qū)域的行數(shù)屬性：指定文本區(qū)域的行數(shù)Name屬性：指定該控件的名字屬性：指定該控件的名字Readonly：使文本區(qū)域不能編輯：使文本區(qū)域不能編輯Tabindex：tab鍵控制順序鍵控制順序l作用：作用：建立一個多行的文本輸入?yún)^(qū)域建立一個多行的文本輸入?yún)^(qū)域文本域控件舉例文本域控件舉例以下代碼創(chuàng)建了一個高以下代碼創(chuàng)建了一個高20字符寬字符寬5字符的文本區(qū)域字符的文本區(qū)域請輸入請輸入菜單菜單/列表元素列表元素l語法語法開始標(biāo)記：必需開始標(biāo)記：必需內(nèi)容：內(nèi)容： option元素元

18、素結(jié)束標(biāo)記：必需結(jié)束標(biāo)記：必需l主要屬性：主要屬性：size屬性：指定列表的高度屬性：指定列表的高度multiple屬性：指定數(shù)據(jù)項可以多選屬性：指定數(shù)據(jù)項可以多選name屬性：指定該控件的名字屬性：指定該控件的名字l作用：建立一個選擇菜單作用：建立一個選擇菜單/列表列表菜單項菜單項/列表項元素列表項元素l語法語法開始標(biāo)記：必需開始標(biāo)記：必需內(nèi)容：內(nèi)容： 文本文本結(jié)束標(biāo)記：可選結(jié)束標(biāo)記：可選l主要屬性：主要屬性：value屬性：指定選中該項提交的值屬性：指定選中該項提交的值selected屬性：指定該項預(yù)先被選擇屬性：指定該項預(yù)先被選擇lable：作為該選項的值被發(fā)送（如果：作為該選項的值被發(fā)

19、送（如果option元素的內(nèi)容太長而元素的內(nèi)容太長而不便處理時，應(yīng)使用該屬性）不便處理時，應(yīng)使用該屬性）l作用：代表一個選擇菜單作用：代表一個選擇菜單/列表的選項列表的選項菜單菜單/列表控件舉例列表控件舉例 學(xué)生學(xué)生 教職員工教職員工 工人工人 學(xué)生學(xué)生 教職員工教職員工 工人工人 標(biāo)簽元素標(biāo)簽元素l語法語法開始標(biāo)記：必需開始標(biāo)記：必需內(nèi)容：文本內(nèi)容：文本結(jié)束標(biāo)記：必需結(jié)束標(biāo)記：必需l主要屬性：主要屬性：for：表示與該元素相聯(lián)系的控件的：表示與該元素相聯(lián)系的控件的id值值l作用：作用：將文本與控件聯(lián)系在一起，將文本與控件聯(lián)系在一起后，用戶就將文本與控件聯(lián)系在一起，將文本與控件聯(lián)系在一起后，用

20、戶就可以單擊這個文本，效果就同單擊控件一樣可以單擊這個文本，效果就同單擊控件一樣多窗口頁面多窗口頁面l包含框架的頁面是一個多窗口頁面，這樣的頁面可以在包含框架的頁面是一個多窗口頁面，這樣的頁面可以在瀏覽器中同時顯示多個超文本瀏覽器中同時顯示多個超文本l多窗口頁面中每個窗口被稱為一個框架或幀，整個頁面多窗口頁面中每個窗口被稱為一個框架或幀，整個頁面看成是框架的集合或幀的集合看成是框架的集合或幀的集合l每個框架可以包含不同的每個框架可以包含不同的Web頁，也可以有獨立的滾動頁，也可以有獨立的滾動條條多窗口頁面的組成多窗口頁面的組成l多窗口頁面的結(jié)構(gòu)由包含框架集元素的多窗口頁面的結(jié)構(gòu)由包含框架集元素

21、的HTML文檔定義文檔定義l多窗口中顯示的頁面往往是獨立的多窗口中顯示的頁面往往是獨立的HTML文檔文檔l框架集元素框架集元素frameset指定窗口的結(jié)構(gòu)，框架元素指定窗口的結(jié)構(gòu)，框架元素frame指定窗口顯示的超文本的指定窗口顯示的超文本的url框架集文檔框架集文檔index.htmindex.htmDocument1.htmDocument1.htmDocument2.htmDocument2.htmDocument3.htmDocument3.htmDocument4.htmDocument4.htm框架集元素框架集元素l語法語法開始標(biāo)記：開始標(biāo)記： 必需必需內(nèi)容：內(nèi)容： frames

22、et元素、元素、frame元素、元素、noframes元素元素 結(jié)束標(biāo)記：結(jié)束標(biāo)記： 必需必需l主要屬性主要屬性id、class、title、style 等通用屬性等通用屬性 cols：告訴瀏覽器將擁有幾個垂直的框架：告訴瀏覽器將擁有幾個垂直的框架rows：告訴瀏覽器將擁有幾個水平的框架：告訴瀏覽器將擁有幾個水平的框架frameborder：是否顯示邊框：是否顯示邊框border： 邊框的寬度邊框的寬度框架集元素的應(yīng)用舉例框架集元素的應(yīng)用舉例rows=*，80 frameborder=yesrows=*，80 cols=80，* frameborder=yes (框架集嵌套框架集嵌套)框架元素

23、框架元素l語法語法開始標(biāo)記：開始標(biāo)記： 必需必需內(nèi)容：空內(nèi)容：空 結(jié)束標(biāo)記：無結(jié)束標(biāo)記：無l主要屬性主要屬性name 框架名稱，如果有文件需要用該窗口打開，可以給超級鏈框架名稱，如果有文件需要用該窗口打開，可以給超級鏈接的接的target屬性指定屬性指定name的值的值src：框架內(nèi)容的鏈接：框架內(nèi)容的鏈接frameborder：框架邊框的寬度：框架邊框的寬度marginwidth：空白的寬度：空白的寬度marginheight：空白的高度：空白的高度noresize：不可改變邊框的大?。翰豢筛淖冞吙虻拇笮crolling：滾動條設(shè)置，當(dāng)內(nèi)容超過框架的顯示范圍是否出現(xiàn)滾：滾動條設(shè)置，當(dāng)內(nèi)容超過框架的顯示范圍是否出現(xiàn)滾動條，有三種取值動條，有三種取值auto、yes、noFrame元素應(yīng)用舉例元素應(yīng)用舉例 goto frame1 點點擊擊鏈接到框架窗口鏈接到框架窗口l超級鏈接元素超級鏈接元素有一個屬性有一個屬性target，可以指定網(wǎng)頁在多窗，可以指定網(wǎng)頁在多窗口頁面中哪一個窗口中打開口頁面中哪一個窗口中打開ltarget屬性的值屬性的值_blank：強(qiáng)制：強(qiáng)制a標(biāo)識的鏈接文檔在一個新瀏覽器窗口打開標(biāo)識的鏈接