Web前端開發(fā)任務(wù)式教程（HTML5+CSS3）（微課版） 課件模塊3 表格與表單元素

《Web開發(fā)任務(wù)式教程》

模塊3表格與表單元素《Web前端開發(fā)任務(wù)式教程》表格與表單元素本模塊介紹網(wǎng)頁開發(fā)中的表格與表單元素，表格可用于數(shù)據(jù)統(tǒng)計(jì)和進(jìn)行內(nèi)容布局，表單用于接收用戶的輸入信息，是實(shí)現(xiàn)網(wǎng)頁功能的基礎(chǔ)。任務(wù)3.1設(shè)計(jì)通訊錄表格任務(wù)3.2設(shè)計(jì)收貨地址表單表格與表單元素學(xué)習(xí)目標(biāo)【知識(shí)目標(biāo)】1）掌握table、tr、td、th等表格元素的屬性及用法。2）掌握form、input、textarea、下拉列表等表單元素的屬性及用法?！灸芰δ繕?biāo)】1）能夠使用表格元素設(shè)計(jì)數(shù)據(jù)表。2）能夠使用表格元素進(jìn)行內(nèi)容布局。3）能夠使用表單元素獲取用戶的輸入信息。《Web前端開發(fā)任務(wù)式教程》通訊錄使用非常普遍，請(qǐng)參考圖3-1設(shè)計(jì)一個(gè)通訊錄表格，要求如下。1）表格頭部顯示“通訊錄”標(biāo)題，在頁腳匯總通訊錄“總?cè)藬?shù)”。2）表格的序號(hào)、姓名背景顏色相同，電話號(hào)碼是另外一種背景顏色。3）同一個(gè)人的多個(gè)電話號(hào)碼能夠匯總顯示。表格與表單元素任務(wù)3.1設(shè)計(jì)通訊錄表格圖3-1通訊錄表格《Web前端開發(fā)任務(wù)式教程》表格與表單元素3.1.1基本表格元素表格元素table元素定義表格。一個(gè)表格可以包含若干行，tr元素定義表格的行。每一行又可以包含若干列，列又稱為單元格，td元素定義標(biāo)準(zhǔn)單元格。表格的表頭往往具有加粗加黑的格式，th元素定義具有表頭格式的單元格。表格屬性表格常用屬性如表3-1所示。有的屬性，例如border和align可以直接用屬性名進(jìn)行設(shè)置，在表格元素標(biāo)簽開頭中輸入屬性首字母能夠聯(lián)想出屬性名；有的屬性，例如bgcolor，在表格元素標(biāo)簽開頭中輸入屬性首字母不能聯(lián)想出屬性名，推薦通過style屬性進(jìn)行設(shè)置，style屬性主要設(shè)置元素的外觀樣式。《Web前端開發(fā)任務(wù)式教程》表格與表單元素表3-1 表格的屬性《Web前端開發(fā)任務(wù)式教程》屬性名說明border設(shè)置表格邊框的寬度，取值為像素值（pixels）border-collapse設(shè)置是否把表格邊框合并為單一的邊框，取值說明如下。separate：默認(rèn)值。邊框會(huì)被分開。不會(huì)忽略border-spacing和empty-cells屬性collapse：邊框可能會(huì)合并為一個(gè)單一邊框。忽略border-spacing和empty-cells屬性border-spacing設(shè)置相鄰單元格邊框之間的距離。取值格式為lengthlength，使用px、cm等單位，不允許使用負(fù)值。如果定義兩個(gè)length參數(shù)，那么第1個(gè)設(shè)置水平距離，第2個(gè)設(shè)置垂直距離。如果只定義1個(gè)length參數(shù)，參數(shù)會(huì)拷貝，水平和垂直距離都是這個(gè)值bgcolor設(shè)置表格的背景顏色，支持常用顏色格式，取值說明如下。rgb(x,x,x)：顏色函數(shù)#xxxxxx：16進(jìn)制顏色值colorname：顏色名cellpadding設(shè)置單元格邊框與單元內(nèi)容之間的空白，取值為像素值或百分比cellspacing設(shè)置單元格之間的空白，取值為像素值或百分比表格與表單元素續(xù)表《Web前端開發(fā)任務(wù)式教程》屬性名說明width設(shè)置表格的寬度，取值為像素值或百分比align設(shè)置表格相對(duì)周圍元素的對(duì)齊方式，取值說明如下。left：靠左對(duì)齊center：居中對(duì)齊right：靠右對(duì)齊caption-side設(shè)置表格標(biāo)題的位置，取值說明如下。top：默認(rèn)值，把表格標(biāo)題定位在表格之上bottom：把表格標(biāo)題定位在表格之下empty-cells設(shè)置是否顯示表格的空單元格和空單元格的邊框和背景，取值說明如下。hide：不在空單元格周圍繪制邊框show：在空單元格周圍繪制邊框，默認(rèn)值table-layout設(shè)置表格單元格、行、列尺寸的計(jì)算方法，取值說明如下。automatic：默認(rèn)值，列寬度由單元格內(nèi)容設(shè)定fixed：列寬度由表格寬度和列寬度設(shè)定表格與表單元素【例3-1】用表格元素設(shè)計(jì)一個(gè)標(biāo)準(zhǔn)通訊錄，網(wǎng)頁顯示效果如圖3-2所示?！禬eb前端開發(fā)任務(wù)式教程》圖3-2基本通訊錄表格【例3-2】修改例3-1，設(shè)置表格寬度為80%，使表格在網(wǎng)頁中水平居中對(duì)齊，單元格內(nèi)邊距為15px，單元格邊框?yàn)閷?shí)線，修改后網(wǎng)頁顯示效果如圖3-3所示。圖3-3 設(shè)置了內(nèi)邊距和寬度的通訊錄表格表格與表單元素3.單元格屬性單元格包括表頭單元格th和內(nèi)容單元格td，是表格的基本組成單位，常用屬性如表3-2所示。表3-2單元格（th/td）的屬性《Web前端開發(fā)任務(wù)式教程》屬性名說明align規(guī)定單元格內(nèi)容的水平排列方式，取值說明如下。left：靠左對(duì)齊，默認(rèn)值center：居中對(duì)齊right：靠右對(duì)齊justify：分散對(duì)齊char：字符對(duì)齊valign規(guī)定單元格內(nèi)容的垂直排列方式，取值說明如下。top：頂部對(duì)齊middle：居中對(duì)齊，默認(rèn)值bottom：底部對(duì)齊baseline：基線對(duì)齊bgcolor規(guī)定表格單元格的背景顏色，支持常用顏色格式，取值說明如下。rgb(x,x,x)：顏色函數(shù)#xxxxxx：16進(jìn)制顏色值colorname：顏色名colspan規(guī)定單元格可橫跨的列數(shù)，取值為數(shù)字rowspan規(guī)定單元格可橫跨的行數(shù)，取值為數(shù)字nowrap規(guī)定單元格中的內(nèi)容是否折行，取值為nowrapwidth規(guī)定單元格的寬度，取值為像素值或百分比表格與表單元素4.單元格合并表格單元格可以合并，合并步驟如下。1）根據(jù)需要設(shè)置單元格合并屬性。2）根據(jù)需要合并單元格數(shù)據(jù)。3）刪除被合并掉的單元格?！纠?-3】修改例3-2，用合并單元格行的方式合并單元格同類項(xiàng)，清晰表格的顯示，使網(wǎng)頁顯示效果如圖3-4所示?！禬eb前端開發(fā)任務(wù)式教程》1）復(fù)制例3-2HTML文件，并重命名為demo3.html。2）設(shè)置表格第2行的第1列和第2列的跨行單元格合并屬性。3）刪除表格第3行被合并的列。圖3-4合并了單元格行的通訊錄表格表格與表單元素【例3-4】修改例3-2，用合并單元格列的方式合并單元格同類項(xiàng)，清晰表格的顯示，使網(wǎng)頁顯示效果如圖3-5所示?！禬eb前端開發(fā)任務(wù)式教程》1）復(fù)制例3-2HTML文件，并重命名為demo4.html。2）設(shè)置表格第1行的跨列單元格合并屬性。3）設(shè)置表格第4行的跨列單元格合并屬性，并設(shè)置文字居中對(duì)齊，使顯示更為美觀。4）修改表格第2行，將第3行的電話號(hào)碼合并過來。5）刪除表格原來第3行的代碼。圖3-5合并了單元格列的通訊錄表格表格與表單元素3.1.2復(fù)雜表格元素為了使表格結(jié)構(gòu)更為清晰，顯示內(nèi)容更為豐富，還可以使用復(fù)雜表格元素定義表格，包括caption、col、colgroup、thead、tfoot、tbody等元素。元素含義及屬性取值說明如表3-3所示。表3-3復(fù)雜表格元素及其屬性《Web前端開發(fā)任務(wù)式教程》元素名元素說明元素屬性caption定義表格的標(biāo)題align屬性，規(guī)定標(biāo)題的水平對(duì)齊方式，屬性取值說明如下。left：靠左對(duì)齊center：居中對(duì)齊，默認(rèn)值right：靠右對(duì)齊top：頂部對(duì)齊bottom：底部對(duì)齊表格與表單元素續(xù)表《Web前端開發(fā)任務(wù)式教程》元素名元素說明元素屬性thead定義表格的表頭align屬性，規(guī)定表頭內(nèi)容的水平對(duì)齊方式，屬性取值說明如下。left：靠左對(duì)齊center：居中對(duì)齊，默認(rèn)值right：靠右對(duì)齊justify：分散對(duì)齊char：字符對(duì)齊valign屬性，規(guī)定表頭內(nèi)容的垂直對(duì)齊方，屬性取值說明如下。top：頂部對(duì)齊middle：居中對(duì)齊，默認(rèn)值bottom：底部對(duì)齊baseline：基線對(duì)齊tbody定義表格的主體內(nèi)容align和valign屬性，取值及含義同thead元素，水平默認(rèn)值左對(duì)齊，垂直默認(rèn)居中tfoot定義表格的頁腳align和valign屬性，取值及含義同tbody元素col定義表格的列align和valign屬性，取值及含義同thead元素span屬性，取值為整數(shù)，規(guī)定col元素橫跨的列數(shù)width屬性，取值可以是pixels，%，relative_length，規(guī)定col元素的寬度colgroup定義表格列的分組，能夠?qū)Ρ砀裰械牧羞M(jìn)行組合，方便按列格式化align、valign、span、width屬性，取值及含義同col元素表格與表單元素3.1.3任務(wù)實(shí)現(xiàn)1.技術(shù)分析1）使用復(fù)雜表格元素清晰表格的結(jié)構(gòu)。2）使用colgroup元素對(duì)表格元素進(jìn)行分組，從而能夠按組設(shè)置背景色。2.編碼實(shí)現(xiàn)1）復(fù)制例3-3HTML文件，重命名為task1.html。2）為task1.html文件增加標(biāo)題設(shè)計(jì)，在table元素里嵌套添加caption元素。3）按列設(shè)計(jì)表格的樣式，在table元素里嵌套添加colgroup元素。4）將表頭行放在thead元素內(nèi)，將表格內(nèi)容行放在tbody元素內(nèi)，清晰表格的結(jié)構(gòu)。并設(shè)置表格內(nèi)容行居中對(duì)齊，美化內(nèi)容顯示。5）設(shè)計(jì)表格頁腳，并放在tfoot元素內(nèi)，將tfoot元素放在table元素內(nèi)?！禬eb前端開發(fā)任務(wù)式教程》電子商務(wù)系統(tǒng)中，新用戶購買商品時(shí)都需要填寫收貨地址，請(qǐng)參考圖3-6設(shè)計(jì)一個(gè)收貨地址信息錄入表單，要求如下。1）通過下拉選擇輸入收貨地址地區(qū)。2）通過復(fù)選框設(shè)置是否為默認(rèn)地址。3）必填信息前面加紅色星號(hào)。4）表單元素對(duì)齊美觀。表格與表單元素任務(wù)3.2設(shè)計(jì)收貨地址表單圖3-6收貨地址表單《Web前端開發(fā)任務(wù)式教程》表格與表單元素3.2.1form元素表單用于收集用戶的輸入，form元素是表單元素的容器元素，能夠接收表單提交的信息。常用屬性如表3-4所示。表3-4form元素的屬性《Web前端開發(fā)任務(wù)式教程》屬性名說明action規(guī)定表單提交時(shí)執(zhí)行的動(dòng)作，往往定義向何處發(fā)送表單數(shù)據(jù)，通常會(huì)發(fā)送到web服務(wù)器上指定的網(wǎng)頁method規(guī)定表單提交時(shí)所用的HTTP方法，取值說明如下。get：默認(rèn)方法，以“名稱/值”對(duì)的形式將表單數(shù)據(jù)追加到URL，表單數(shù)據(jù)在網(wǎng)頁地址欄中可見，不適合敏感數(shù)據(jù)的的提交，適合少量數(shù)據(jù)的提交，URL的長(zhǎng)度被限制為2048個(gè)字符，適合將結(jié)果添加為書簽的表單提交，使用方便，如Google查詢字符串中包含的數(shù)據(jù)使用這種方式post：將表單數(shù)據(jù)附加在HTTP請(qǐng)求的正文中，大小不受，可用于發(fā)送大量數(shù)據(jù)，數(shù)據(jù)不會(huì)在URL中顯示，安全性更高，但是無法提交添加了書簽的表單target規(guī)定在何處打開action提交的URL，取值說明如下。_blank：在新窗口或選項(xiàng)卡中打開_self：默認(rèn)值，在當(dāng)前窗口中打開_parent：在父框架中打開_top：在窗口的整個(gè)body元素中打開framename：在命名的iframe中打開name規(guī)定表單的名稱novalidate規(guī)定瀏覽器不驗(yàn)證表單表格與表單元素3.2.2input元素input元素用于收集用戶輸入的信息，根據(jù)type屬性值的不同，輸入字段可以是文本字段、復(fù)選框、掩碼后的文本、單選按鈕、按鈕等。input元素的常用屬性如表3-5所示。表3-5input元素的屬性《Web前端開發(fā)任務(wù)式教程》屬性名說明checked規(guī)定input元素首次加載時(shí)被選中max定義輸入字段的最大值，需要與“min”屬性配合使用來創(chuàng)建合法的取值范圍，取值說明如下。number：數(shù)字date：日期min規(guī)定輸入字段的最小值，需要與“max”屬性配合使用來創(chuàng)建合法的取值范圍，取值及含義同max屬性maxlength定義輸入字段的最大字符數(shù)，取值為數(shù)字multiple定義允許元素使用一個(gè)以上的值name定義元素的名稱pattern定義輸入字段值的模式或格式，取值為正則表達(dá)式，如pattern="[0-9]"表示輸入值必須是0到9之間的數(shù)字表格與表單元素續(xù)表《Web前端開發(fā)任務(wù)式教程》屬性名說明placeholder定義輸入字段的提示信息readonly規(guī)定輸入字段為只讀字段required規(guī)定輸入字段必須有輸入值type規(guī)定input元素的類型，取值說明如下。button：按鈕checkbox：復(fù)選框file：文件hidden：隱藏字段image：圖像password：密碼輸入框radio：?jiǎn)芜x按鈕，同組的單選按鈕“name”屬性值必須相同reset：重置按鈕submit：提交按鈕text：文本字段src定義提交按鈕顯示的圖像URLvalue定義input元素的值size定義輸入字段的寬度，取值為數(shù)字表格與表單元素【例3-5】使用表單元素設(shè)計(jì)一個(gè)顯示效果如圖3-7所示的用戶注冊(cè)網(wǎng)頁。圖3-7用戶注冊(cè)網(wǎng)頁《Web前端開發(fā)任務(wù)式教程》表格與表單元素3.2.3下拉列表select元素創(chuàng)建下拉列表，列表中的每一個(gè)選項(xiàng)用option元素定義。select元素的屬性如表3-6所示，option元素的屬性如表3-7所示。表3-6select元素的屬性《Web前端開發(fā)任務(wù)式教程》屬性名說明multiple定義可以選擇多個(gè)選項(xiàng)name定義下拉列表的名稱required定義文本區(qū)域必填size定義下拉列表中可見選項(xiàng)的數(shù)目，取值為數(shù)字表3-7option元素的屬性屬性名說明disabled定義選項(xiàng)在首次加載時(shí)被禁用label定義使用optgroup元素時(shí)所使用的標(biāo)注selected定義選項(xiàng)首次顯示在列表中時(shí)表現(xiàn)為選中狀態(tài)value定義送往服務(wù)器的選項(xiàng)值表格與表單元素【例3-6】修改例3-5，改用下拉列表選擇性別和興趣愛好，網(wǎng)頁顯示效果如圖3-8所示。圖3-8用戶注冊(cè)網(wǎng)頁的另外一種實(shí)現(xiàn)方式《Web前端開發(fā)任務(wù)式教程》復(fù)制例3-5項(xiàng)目，將其中的HTML文件重命名為demo6.html，修改其中有關(guān)性別和興趣愛好選擇的代碼。表格與表單元素3.2.4textarea元素textarea元素定義文本域，能夠?qū)崿F(xiàn)文本的多行輸入，較input元素實(shí)現(xiàn)的文本輸入具有可容納無限數(shù)量文字的特點(diǎn)，文本的默認(rèn)字體是等寬字體（Courier），常用屬性如表3-8所示