1、讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效計(jì)算機(jī)學(xué)院計(jì)算機(jī)學(xué)院Web基礎(chǔ)第六章 表格與表單表格的創(chuàng)建表單相關(guān)標(biāo)記表格樣式的控制表單樣式的控制 目錄第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)26.16.1表格標(biāo)記6.26.2CSS控制表格樣式6.36.3認(rèn)識(shí)表單6.46.4創(chuàng)建表單6.56.5表單控件6.66.6CSS控制表單樣式6.76.7階段案例-制作注冊(cè)界面第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)36.1 表格標(biāo)記 6.1.1 創(chuàng)建表格創(chuàng)建表格 使用表格相關(guān)的標(biāo)記創(chuàng)建 。創(chuàng)建表格的基本語(yǔ)法格式如下： 單元格內(nèi)的文字 . .第六章第六章

2、表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)46.1 表格標(biāo)記 6.1.1 創(chuàng)建表格創(chuàng)建表格 在上面的語(yǔ)法中包含三對(duì)HTML標(biāo)記，、，他們是創(chuàng)建表格的基本標(biāo)記，缺一不可缺一不可。l ：用于定義一個(gè)表格表格。l ：用于定義表格中的一行一行，必須嵌套在必須嵌套在標(biāo)記標(biāo)記中中，在中包含幾對(duì)，就有幾行表格。l ：用于定義表格中的單元格單元格，必須嵌套在標(biāo)記中、一對(duì)中包含幾對(duì)，就表示該行中有多少列（或多少個(gè)單元格）。l exmple 01第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)56.1 表格標(biāo)記 6.1.1 創(chuàng)建表格創(chuàng)建表格注意注意:標(biāo)記就像一個(gè)容器，可以容

3、納所有的元素，中甚至可以嵌套表格。但是中只能嵌套，不允不允許許直接在標(biāo)記中輸入文字。第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)66.1 表格標(biāo)記 6.1.2 標(biāo)記的屬性標(biāo)記的屬性屬性名屬性名含義含義常用屬性值常用屬性值border設(shè)置表格的邊框（默認(rèn)border=0無邊框） 像素值 cellspacing設(shè)置單元格與單元格邊框之間的空白間距像素值（默認(rèn)為2像素）cellpadding設(shè)置單元格內(nèi)容與單元格邊框之間的空白間距像素值（默認(rèn)為1像素）width設(shè)置表格的寬度像素值height設(shè)置表格的高度像素值align設(shè)置表格在網(wǎng)頁(yè)中的水平對(duì)齊方式left、cente

4、r、rightbgcolor設(shè)置表格的背景顏色預(yù)定義的顏色值、十六進(jìn)制#RGB、rgb(r,g,b)background設(shè)置表格的背景圖像url地址第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)76.1 表格標(biāo)記 6.1.2 標(biāo)記的屬性標(biāo)記的屬性1、border屬性屬性l 在標(biāo)記中，border屬性用于設(shè)置表格的邊框，默認(rèn)為0。 2、cellspacing屬性lcellspacing屬性用于設(shè)置單元格與單元格邊框之間邊框之間的空白間距，默認(rèn)為2px。代碼如下：第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)86.1 表格標(biāo)記 6.1.2 標(biāo)記的

5、屬性標(biāo)記的屬性3、cellpadding屬性屬性l cellpadding屬性用于設(shè)置單元格內(nèi)容單元格內(nèi)容與單元格邊框單元格邊框之間的空白間距，默認(rèn)為1px。代碼如下：注意注意:cellpadding類似于盒子模型的內(nèi)邊距padding，指的是單元格內(nèi)部的距離單元格內(nèi)部的距離，cellspacing則指的是外部單元格與單元格之間的距離外部單元格與單元格之間的距離。可以結(jié)合盒子模型的內(nèi)外邊距理解cellpadding與cellspacing的不同。 第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)96.1 表格標(biāo)記 6.1.2 標(biāo)記的屬性標(biāo)記的屬性4、width與與hei

6、ght屬性屬性l 默認(rèn)情況下，表格的寬度和高度靠其自身的內(nèi)容來支撐。要想更改表格的尺寸，就需對(duì)其應(yīng)用寬度屬性width或高度屬性height。注意注意:當(dāng)為表格標(biāo)記同時(shí)設(shè)置width、height和cellpadding屬性時(shí)，cellpadding的顯示效果將不太容易觀察，所以一般在未給表格設(shè)置寬高的情況下測(cè)試cellpadding屬性。第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)106.1 表格標(biāo)記 6.1.2 標(biāo)記的屬性標(biāo)記的屬性5、align屬性屬性l align屬性用于定義元素的水平對(duì)齊方式，其可選屬性值為left、center、right。值得一提的是，

7、當(dāng)對(duì)標(biāo)記應(yīng)用align屬性時(shí)，控制的為表格的水平對(duì)齊方式表格的水平對(duì)齊方式，單元格中的內(nèi)容不受影響單元格中的內(nèi)容不受影響。6、bgcolor屬性屬性l 在標(biāo)記中，bgcolor屬性用于設(shè)置表格的背景背景顏色顏色。7、background屬性屬性l 在標(biāo)記中，background屬性用于設(shè)置表格的背景背景圖像圖像。l 案例1第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)116.1 表格標(biāo)記 6.1.3 標(biāo)記的屬性標(biāo)記的屬性 制作網(wǎng)頁(yè)時(shí)，有時(shí)需要表格中的某一行特殊顯示，這時(shí)就可以為行標(biāo)記定義屬性。屬性名屬性名含義含義常用屬性值常用屬性值height設(shè)置行高度 像素值 al

8、ign設(shè)置一行內(nèi)容的水平對(duì)齊方式left、center、rightvalign設(shè)置一行內(nèi)容的垂直對(duì)齊方式top、middle、bottombgcolor設(shè)置行背景顏色預(yù)定義的顏色值、十六進(jìn)制#RGB、rgb(r,g,b)background設(shè)置行背景圖像url地址example 02第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)126.1 表格標(biāo)記 6.1.3 標(biāo)記的屬性標(biāo)記的屬性 需要注意以下幾點(diǎn)：l 標(biāo)記無寬度屬性無寬度屬性width，其寬度取決于表格標(biāo)記。l 可以對(duì)標(biāo)記應(yīng)用valign屬性，用于設(shè)置一行內(nèi)容的垂直對(duì)齊垂直對(duì)齊方式。l 雖然可以對(duì)標(biāo)記應(yīng)用backg

9、round屬性，但是在標(biāo)記中此屬性兼容問題嚴(yán)重。第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)136.1 表格標(biāo)記 6.1.4 標(biāo)記的屬性標(biāo)記的屬性 對(duì)某一個(gè)單元格進(jìn)行控制，可以為單元格標(biāo)記定義屬性。屬性名屬性名含義含義常用屬性值常用屬性值width設(shè)置單元格的寬度像素值 height設(shè)置單元格的高度像素值align設(shè)置單元格內(nèi)容的水平對(duì)齊方式left、center、rightvalign設(shè)置單元格內(nèi)容的垂直對(duì)齊方式top、middle、bottombgcolor設(shè)置單元格的背景顏色預(yù)定義的顏色值、十六進(jìn)制#RGB、rgb(r,g,b)background設(shè)置單元格的

10、背景圖像url地址colspan設(shè)置單元格橫跨的列數(shù)（用于合并水平方向的單元格）正整數(shù)rowspan設(shè)置單元格豎跨的行數(shù)（用于合并豎直方向的單元格）正整數(shù)example 03第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)146.1 表格標(biāo)記 6.1.4 標(biāo)記的屬性標(biāo)記的屬性注意注意:1、在標(biāo)記的屬性中，重點(diǎn)掌握colspan和rolspan，其他的屬性了解即可，不建議使用，均可用CSS樣式屬性替代。2、當(dāng)對(duì)某一個(gè)標(biāo)記應(yīng)用width屬性設(shè)置寬度時(shí)，該列中的所有單元該列中的所有單元格均會(huì)以設(shè)置的寬度顯示。格均會(huì)以設(shè)置的寬度顯示。3、當(dāng)對(duì)某一個(gè)標(biāo)記應(yīng)用height屬性設(shè)置高

11、度時(shí)，該行中的所有單該行中的所有單元格均會(huì)以設(shè)置的高度顯示。元格均會(huì)以設(shè)置的高度顯示。案例案例2第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)156.1 表格標(biāo)記 6.1.5 標(biāo)記標(biāo)記及其及其屬性屬性 表頭一般位于表格的第一行或第一列，其文本加粗居中文本加粗居中，如下圖所示，即為設(shè)置了表頭的表格。設(shè)置表頭非常簡(jiǎn)單，只需用表頭標(biāo)記替代相應(yīng)的單元格標(biāo)記即可。案例案例3第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)166.1 表格標(biāo)記 6.1.6 表格的結(jié)構(gòu)表格的結(jié)構(gòu) 在使用表格進(jìn)行布局時(shí)，可以將表格劃分為頭部、主體和頁(yè)腳頭部、主體和頁(yè)腳，：用于定

12、義表格的頭部，必須位于標(biāo)記中，一般包含網(wǎng)頁(yè)的logo和導(dǎo)航等頭部信息。l ：用于定義表格的頁(yè)腳，位于標(biāo)記中標(biāo)記之后，一般包含網(wǎng)頁(yè)底部的企業(yè)信息等。l ：用于定義表格的主體，位于標(biāo)記中標(biāo)記之后，一般包含網(wǎng)頁(yè)中除頭部和底部之外的其他內(nèi)容。l example 04第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)176.2 CSS控制表格樣式 6.2.1 CSS控制表格邊框控制表格邊框 使用CSS邊框樣式屬性border可以輕松地控制表格的邊框。 example 05注意注意:1、 border-collapse屬性的屬性值除了collapse（合并）之外，還可以為separa

13、te（分離），默認(rèn)為separate。2、當(dāng)表格的border-collapse屬性設(shè)置為collapse時(shí)， HTML中設(shè)置的cellspacing屬性值無效。3、行標(biāo)記行標(biāo)記無無border樣式屬性樣式屬性。案例案例4第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)186.2 CSS控制表格樣式 6.2.2 CSS控制控制單元格邊距單元格邊距 使用標(biāo)記的屬性美化表格時(shí)，通過cellpadding和cellspacing分別控制單元格內(nèi)容與邊框之間的距離以及相鄰單元格邊框之間的距離。 example 06注意：注意：可對(duì)可對(duì)td使用使用padding屬性設(shè)置單元格內(nèi)容

14、與邊框之間的距離屬性設(shè)置單元格內(nèi)容與邊框之間的距離td標(biāo)記無標(biāo)記無margin屬性屬性,只能對(duì)只能對(duì)table設(shè)置設(shè)置cellspacing行標(biāo)記行標(biāo)記無內(nèi)邊距屬性無內(nèi)邊距屬性padding和外邊距屬性和外邊距屬性margin。第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)196.2 CSS控制表格樣式 6.2.3 CSS控制單元格的寬高控制單元格的寬高 單元格的寬度和高度，有著和其他元素不同的特性，主要表現(xiàn)在單元格之間的互相影響上。 example 07 對(duì)同一行中的單元格定義不同的高度同一行中的單元格定義不同的高度，或?qū)ν涣兄械膯卧穸ㄍ涣兄械膯卧穸x不同的

15、寬度義不同的寬度時(shí)，最終的寬度或高度將取其中的較大者較大者。 案例5第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)206.3 認(rèn)識(shí)表單表單是網(wǎng)頁(yè)上用于輸入信息的區(qū)域輸入信息的區(qū)域，它的主要功能是收集用戶信息，并將它們傳遞給后臺(tái)服務(wù)器，實(shí)現(xiàn)網(wǎng)頁(yè)與用戶的溝通。HTML中，一個(gè)完整的表單表單通常由表單控件表單控件（也稱為表單元素）、提示提示信息信息和表單域表單域3個(gè)部分構(gòu)成。第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)216.3 認(rèn)識(shí)表單l 表單控件：包含了具體的表單功能項(xiàng)具體的表單功能項(xiàng)，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、重置按鈕

16、等。l 提示信息：一個(gè)表單中通常還需要包含一些說明性的文字，提示用戶進(jìn)行填寫和操作。l 表單域：相當(dāng)于一個(gè)容器，用來容納所有的表單控件和提示信息容納所有的表單控件和提示信息，可以通過他定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無法傳送到后臺(tái)服務(wù)器。l example 08第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)226.3 認(rèn)識(shí)表單 在表單的3部分構(gòu)成中，表單控件表單控件是表單的核心，常用的表單控件如下表所示。表單控件表單控件描述描述表單輸入控件（可定義多種表單項(xiàng)）定義多行文本框 定義一個(gè)下拉列表（必須包含列

17、表項(xiàng)）第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)236.4 創(chuàng)建表單 在HTML中，標(biāo)記被用于定義表單域定義表單域，即創(chuàng)建一個(gè)表單，以實(shí)現(xiàn)用戶信息的收集和傳遞， 中的所有內(nèi)容都會(huì)被提交給服務(wù)器提交給服務(wù)器。創(chuàng)建表單的基本語(yǔ)法格式如下： 各種表單控件在上面的語(yǔ)法中，與之間的表單控件是由用戶自定義的，action、method和name為表單標(biāo)記的常用屬性。laction在表單收集到信息后，需要將信息傳遞給服務(wù)器進(jìn)行處理，action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的服務(wù)器程序的url地址地址。第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 w

18、eb基礎(chǔ)246.4 創(chuàng)建表單l methodmethod屬性用于設(shè)置表單數(shù)據(jù)的提交方式提交方式，其取值為get或post。l name屬性用于指定表單的名稱，以區(qū)分同一個(gè)頁(yè)面中的多個(gè)表單。注意注意:標(biāo)記的屬性并不會(huì)直接影響表單的顯示效果。要想讓一個(gè)表單有意義，就必須在與之間添加相應(yīng)的表單控件。第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)256.5 表單控件 6.5.1 input控件控件 input控件的基本語(yǔ)法格式如下：標(biāo)記為單標(biāo)記，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型。除了type屬性之外，標(biāo)記還可以定義很多其他的屬性第六章第六章

19、表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)266.5 表單控件 6.5.1 input控件控件屬性屬性屬性值屬性值描述描述typetext單行文本輸入框password密碼輸入框radio單選按鈕checkbox復(fù)選框button普通按鈕submit提交按鈕reset重置按鈕image圖像形式的提交按鈕hidden隱藏域file文件域name由用戶自定義控件的名稱value由用戶自定義input控件中的默認(rèn)文本值size正整數(shù)input控件在頁(yè)面中的顯示寬度readonlyreadonly該控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁(yè)面時(shí)禁用該控件

20、（顯示為灰色）checkedchecked定義選擇控件默認(rèn)被選中的項(xiàng)maxlength正整數(shù)控件允許輸入的最多字符數(shù)第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)276.5 表單控件 6.5.1 input控件控件example 09 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標(biāo)用戶改進(jìn)了可用性。如果在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同。label 綁定到哪個(gè)表單元素。常將

21、input與label標(biāo)記聯(lián)合使用example 10案例案例6案例案例7第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)286.5 表單控件 6.5.2 textarea控件控件 通過textarea控件可以輕松地創(chuàng)建多行文本輸入框多行文本輸入框，其基本語(yǔ)法格式如下： 文本內(nèi)容cols和rows為標(biāo)記的必須屬性必須屬性，其中cols用來定義多行文本輸入框每行中的字符數(shù)，rows用來定義多行文本輸入框顯示的行數(shù)，他們的取值均為正整數(shù)。第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)296.5 表單控件 6.5.2 textarea控件控件注意注意

22、:各瀏覽器對(duì)cols和rows屬性的理解不同，當(dāng)對(duì)textarea控件應(yīng)用cols和rows屬性時(shí)，多行文本輸入框在各瀏覽器中的顯示效果可能會(huì)有差異。所以在實(shí)際工作中，更常用的方法是使用CSS的width和height屬性來定義多行文本輸入框的寬高。example 11案例8第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)306.5 表單控件 6.5.3 select控件控件 在HTML中，要想制作如下圖所示的下拉菜單，就需要使用select控件。第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)316.5 表單控件 6.5.3 select控件控

23、件 使用select控件定義下拉菜單的基本語(yǔ)法格式如下： 選項(xiàng)1 選項(xiàng)2 選項(xiàng)3 . 標(biāo)記用于在表單中添加一個(gè)下拉菜單，用于定義下拉菜單中的具體選項(xiàng)具體選項(xiàng)，每對(duì)中至少應(yīng)包含一對(duì)。第六章第六章 表格與表單表格與表單2022-3-7計(jì)算機(jī)學(xué)院 web基礎(chǔ)326.5 表單控件 6.5.3 select控件控件 在HTML中，可以為和標(biāo)記定義屬性，以改變下拉菜單的外觀顯示效果，具體如下表所示。標(biāo)記名標(biāo)記名常用屬性常用屬性描述描述size指定下拉菜單的可見選項(xiàng)數(shù)（取值為正整數(shù)）。multiple定義multiple=multiple時(shí)，下拉菜單將具有多項(xiàng)選擇的功能，方法為按住Ctrl鍵的同時(shí)選擇多項(xiàng)。selected定義selected = selected 時(shí)，