第6章 表格與表單

1、讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效第六章 表格與表單 表格的創(chuàng)建 表單相關(guān)標(biāo)記表格樣式的控制表單樣式的控制讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.16.1表格標(biāo)記6.26.2CSS控制表格樣式6.36.3認識表單6.46.4創(chuàng)建表單6.56.5表單控件6.66.6CSS控制表單樣式6.76.7階段案例-制作注冊界面讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.1 表格標(biāo)記 6.1.1 創(chuàng)建表格創(chuàng)建表格 在HTML網(wǎng)頁中，要想創(chuàng)建表格，就需要使用表格相關(guān)的標(biāo)記。創(chuàng)建表格的基本語法格式如下： 單元格內(nèi)的文字 . .讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.1 表格標(biāo)記 6.1.1 創(chuàng)建表格創(chuàng)建表格 在上面的語法

2、中包含三對HTML標(biāo)記，分別為、，他們是創(chuàng)建表格的基本標(biāo)記，缺一不可，下面對他們進行具體地解釋。l：用于定義一個表格。l：用于定義表格中的一行，必須嵌套在標(biāo)記中，在中包含幾對，就有幾行表格。l：用于定義表格中的單元格，必須嵌套在標(biāo)記中，一對中包含幾對，就表示該行中有多少列（或多少個單元格）。讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.1 表格標(biāo)記 6.1.1 創(chuàng)建表格創(chuàng)建表格注意注意:學(xué)習(xí)表格的核心是學(xué)習(xí)標(biāo)記，他就像一個容器，可以容納所有的元素，中甚至可以嵌套表格。但是中只能嵌套，直接在標(biāo)記中輸入文字的做法是不被允許的。讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.1 表格標(biāo)記 6.1.2 標(biāo)記的屬性標(biāo)記的

3、屬性 標(biāo)記的屬性如下表所示。屬性名屬性名含義含義常用屬性值常用屬性值border設(shè)置表格的邊框（默認border=0無邊框） 像素值 cellspacing設(shè)置單元格與單元格邊框之間的空白間距像素值（默認為2像素）cellpadding設(shè)置單元格內(nèi)容與單元格邊框之間的空白間距像素值（默認為1像素）width設(shè)置表格的寬度像素值height設(shè)置表格的高度像素值align設(shè)置表格在網(wǎng)頁中的水平對齊方式left、center、rightbgcolor設(shè)置表格的背景顏色預(yù)定義的顏色值、十六進制#RGB、rgb(r,g,b)background設(shè)置表格的背景圖像url地址讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有

4、效6.1 表格標(biāo)記 6.1.2 標(biāo)記的屬性標(biāo)記的屬性1、border屬性屬性l在標(biāo)記中，border屬性用于設(shè)置表格的邊框，默認為0。代碼如下：2、cellspacing屬性屬性lcellspacing屬性用于設(shè)置單元格與單元格邊框之間的空白間距，默認為2px。代碼如下： 讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.1 表格標(biāo)記 6.1.2 標(biāo)記的屬性標(biāo)記的屬性3、cellpadding屬性屬性lcellpadding屬性用于設(shè)置單元格內(nèi)容與單元格邊框之間的空白間距，默認為1px。代碼如下：注意注意:cellpadding類似于盒子模型的內(nèi)邊距padding，指的是單元格內(nèi)部的距離，cellspac

5、ing則指的是外部單元格與單元格之間的距離?？梢越Y(jié)合盒子模型的內(nèi)外邊距理解cellpadding與cellspacing的不同。 讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.1 表格標(biāo)記 6.1.2 標(biāo)記的屬性標(biāo)記的屬性4、width與與height屬性屬性l默認情況下，表格的寬度和高度靠其自身的內(nèi)容來支撐。要想更改表格的尺寸，就需對其應(yīng)用寬度屬性width或高度屬性height。注意注意:當(dāng)為表格標(biāo)記同時設(shè)置width、height和cellpadding屬性時，cellpadding的顯示效果將不太容易觀察，所以一般在未給表格設(shè)置寬高的情況下測試cellpadding屬性。讓IT教學(xué)更簡單，讓I

6、T學(xué)習(xí)更有效6.1 表格標(biāo)記 6.1.2 標(biāo)記的屬性標(biāo)記的屬性5、align屬性屬性lalign屬性用于定義元素的水平對齊方式，其可選屬性值為left、center、right。值得一提的是，當(dāng)對標(biāo)記應(yīng)用align屬性時，控制的為表格的水平對齊方式，單元格中的內(nèi)容不受影響。6、bgcolor屬性屬性l在標(biāo)記中，bgcolor屬性用于設(shè)置表格的背景顏色。7、background屬性屬性l在標(biāo)記中，background屬性用于設(shè)置表格的背景圖像。讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.1 表格標(biāo)記 6.1.3 標(biāo)記的屬性標(biāo)記的屬性 制作網(wǎng)頁時，有時需要表格中的某一行特殊顯示，這時就可以為行標(biāo)記定義屬

7、性。屬性名屬性名含義含義常用屬性值常用屬性值height設(shè)置行高度 像素值 align設(shè)置一行內(nèi)容的水平對齊方式left、center、rightvalign設(shè)置一行內(nèi)容的垂直對齊方式top、middle、bottombgcolor設(shè)置行背景顏色預(yù)定義的顏色值、十六進制#RGB、rgb(r,g,b)background設(shè)置行背景圖像url地址讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.1 表格標(biāo)記 6.1.3 標(biāo)記的屬性標(biāo)記的屬性 值得一提的是，學(xué)習(xí)的屬性時需要注意以下幾點：l 標(biāo)記無寬度屬性width，其寬度取決于表格標(biāo)記。l 可以對標(biāo)記應(yīng)用valign屬性，用于設(shè)置一行內(nèi)容的垂直對齊方式。l 雖

8、然可以對標(biāo)記應(yīng)用background屬性，但是在標(biāo)記中此屬性兼容問題嚴(yán)重。讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.1 表格標(biāo)記 6.1.4 標(biāo)記的屬性標(biāo)記的屬性 在網(wǎng)頁制作過程中，有時僅僅需要對某一個單元格進行控制，這時就可以為單元格標(biāo)記定義屬性，其常用屬性如下表所示。屬性名屬性名含義含義常用屬性值常用屬性值width設(shè)置單元格的寬度像素值 height設(shè)置單元格的高度像素值align設(shè)置單元格內(nèi)容的水平對齊方式left、center、rightvalign設(shè)置單元格內(nèi)容的垂直對齊方式top、middle、bottombgcolor設(shè)置單元格的背景顏色預(yù)定義的顏色值、十六進制#RGB、rgb(r

9、,g,b)background設(shè)置單元格的背景圖像url地址colspan設(shè)置單元格橫跨的列數(shù)（用于合并水平方向的單元格）正整數(shù)rowspan設(shè)置單元格豎跨的行數(shù)（用于合并豎直方向的單元格）正整數(shù)讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.1 表格標(biāo)記 6.1.4 標(biāo)記的屬性標(biāo)記的屬性注意注意:1、在標(biāo)記的屬性中，重點掌握colspan和rolspan，其他的屬性了解即可，不建議使用，均可用CSS樣式屬性替代。2、當(dāng)對某一個標(biāo)記應(yīng)用width屬性設(shè)置寬度時，該列中的所有單元格均會以設(shè)置的寬度顯示。3、當(dāng)對某一個標(biāo)記應(yīng)用height屬性設(shè)置高度時，該行中的所有單元格均會以設(shè)置的高度顯示。讓IT教學(xué)更簡

10、單，讓IT學(xué)習(xí)更有效6.1 表格標(biāo)記 6.1.5 標(biāo)記標(biāo)記及其及其屬性屬性 表頭一般位于表格的第一行或第一列，其文本加粗居中，如下圖所示，即為設(shè)置了表頭的表格。設(shè)置表頭非常簡單，只需用表頭標(biāo)記替代相應(yīng)的單元格標(biāo)記即可。讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.1 表格標(biāo)記 6.1.6 表格的結(jié)構(gòu)表格的結(jié)構(gòu) 在使用表格進行布局時，可以將表格劃分為頭部、主體和頁腳，具體 如下所示：l ：用于定義表格的頭部，必須位于標(biāo)記中，一般包含網(wǎng)頁的logo和導(dǎo)航等頭部信息。l ：用于定義表格的頁腳，位于標(biāo)記中標(biāo)記之后，一般包含網(wǎng)頁底部的企業(yè)信息等。l ：用于定義表格的主體，位于標(biāo)記中標(biāo)記之后，一般包含網(wǎng)頁中除頭部

11、和底部之外的其他內(nèi)容。讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.2 CSS控制表格樣式 6.2.1 CSS控制表格邊框控制表格邊框 而使用CSS邊框樣式屬性border可以輕松地控制表格的邊框。注意注意:1、 border-collapse屬性的屬性值除了collapse（合并）之外，還可以為separate（分離），默認為separate。2、當(dāng)表格的border-collapse屬性設(shè)置為collapse時， HTML中設(shè)置的cellspacing屬性值無效。3、行標(biāo)記無border樣式屬性，本書不再做具體的演示，初學(xué)者可以自己測試加深理解。讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.2 CSS控制

12、表格樣式 6.2.2 CSS控制控制單元格邊距單元格邊距 使用標(biāo)記的屬性美化表格時，可以通過cellpadding和cellspacing分別控制單元格內(nèi)容與邊框之間的距離以及相鄰單元格邊框之間的距離。注意注意:行標(biāo)記無內(nèi)邊距屬性padding和外邊距屬性margin，本書不再做具體的演示，初學(xué)者可以自己測試加深理解。讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.2 CSS控制表格樣式 6.2.3 CSS控制單元格的寬高控制單元格的寬高 單元格的寬度和高度，有著和其他元素不同的特性，主要表現(xiàn)在單元格之間的互相影響上。 對同一行中的單元格定義不同的高度，或?qū)ν涣兄械膯卧穸x不同的寬度時，最終的寬度或

13、高度將取其中的較大者。讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.3 認識表單 在HTML中，一個完整的表單通常由表單控件（也稱為表單元素）、提示信息和表單域3個部分構(gòu)成，如下圖所示，即為一個簡單的HTML表單界面及其構(gòu)成。讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.3 認識表單 對于表單構(gòu)成中的表單控件、提示信息和表單域，初學(xué)者可能比較難理解，對他們的具體解釋如下：l 表單控件：包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、重置按鈕等。l 提示信息：一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。l 表單域：他相當(dāng)于一個容器，用來容納所有的表單控件和提示信息，

14、可以通過他定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無法傳送到后臺服務(wù)器。讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.3 認識表單 在表單的3部分構(gòu)成中，表單控件是表單的核心，常用的表單控件如下表所示。表單控件表單控件描述描述表單輸入控件（可定義多種表單項）定義多行文本框 定義一個下拉列表（必須包含列表項）讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.4 創(chuàng)建表單 在HTML中，標(biāo)記被用于定義表單域，即創(chuàng)建一個表單，以實現(xiàn)用戶信息的收集和傳遞， 中的所有內(nèi)容都會被提交給服務(wù)器。創(chuàng)建表單的基本語法格式如下： 在上面的語法中，與之間的表單控件是由用戶自定義

15、的，action、method和name為表單標(biāo)記的常用屬性。l Action在表單收集到信息后，需要將信息傳遞給服務(wù)器進行處理，action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。 各種表單控件讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.4 創(chuàng)建表單l methodmethod屬性用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post。l namename屬性用于指定表單的名稱，以區(qū)分同一個頁面中的多個表單。注意注意:標(biāo)記的屬性并不會直接影響表單的顯示效果。要想讓一個表單有意義，就必須在與之間添加相應(yīng)的表單控件。讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.5 表單控件 6.5.1 inpu

16、t控件控件 input控件的基本語法格式如下： 在上面的語法中，標(biāo)記為單標(biāo)記，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型。除了type屬性之外，標(biāo)記還可以定義很多其他的屬性，其常用屬性如下表所示。讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.5 表單控件 6.5.1 input控件控件屬性屬性屬性值屬性值描述描述typetext單行文本輸入框password密碼輸入框radio單選按鈕checkbox復(fù)選框button普通按鈕submit提交按鈕reset重置按鈕image圖像形式的提交按鈕hidden隱藏域file文件域name由用戶自定義控件的名稱value由用戶自定義in

17、put控件中的默認文本值size正整數(shù)input控件在頁面中的顯示寬度readonlyreadonly該控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁面時禁用該控件（顯示為灰色）checkedchecked定義選擇控件默認被選中的項maxlength正整數(shù)控件允許輸入的最多字符數(shù)讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.5 表單控件 6.5.2 textarea控件控件 如果需要輸入大量的信息，就需要用到標(biāo)記。通過textarea控件可以輕松地創(chuàng)建多行文本輸入框，其基本語法格式如下： 文本內(nèi)容讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.5 表單控件 6.5.2 textare

18、a控件控件 在上面的語法格式中，cols和rows為標(biāo)記的必須屬性，其中cols用來定義多行文本輸入框每行中的字符數(shù)，rows用來定義多行文本輸入框顯示的行數(shù)，他們的取值均為正整數(shù)。注意注意:各瀏覽器對cols和rows屬性的理解不同，當(dāng)對textarea控件應(yīng)用cols和rows屬性時，多行文本輸入框在各瀏覽器中的顯示效果可能會有差異。所以在實際工作中，更常用的方法是使用CSS的width和height屬性來定義多行文本輸入框的寬高。讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.5 表單控件 6.5.3 select控件控件 下圖為一個下拉菜單，當(dāng)點擊下拉符號“ ”時，會出現(xiàn)一個選擇列表。在HTML中，要想制作如下圖所示的下拉菜單，就需要使用select控件。讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.5 表單控件 6.5.3 select控件控件 使用select控件定義下拉菜單的基本語法格式如下： 在上面的語法中，標(biāo)記用于在表單中添加一個下拉菜單，用于定義下拉菜單中的具體選項，每對中至少應(yīng)包含一對。 選項1 選項2 選項3 . 讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效6.5 表單控件 6.5.3 select控件控件 值得一提的是，在HTML中，可以為和標(biāo)記定義屬性，以改變下拉菜單的外觀顯示效果，具體如下表所示。標(biāo)記名標(biāo)記名