第十一章表單表格高級(jí)

1、HTML5前端開發(fā)1表單標(biāo)簽及屬性高級(jí)表單標(biāo)簽及屬性高級(jí)2表格標(biāo)簽及屬性高級(jí)表格標(biāo)簽及屬性高級(jí)回顧：回顧： 表單的組成：表單的組成：表單域：表單域： 表單控件表單控件 ： 提示信息：提示信息： 1、表單字段集：、表單字段集：1表單標(biāo)簽及屬性高級(jí)表單標(biāo)簽及屬性高級(jí)語法：語法： 說明：說明： 相當(dāng)于一個(gè)方框，在字段集中可以包含文本和其他相當(dāng)于一個(gè)方框，在字段集中可以包含文本和其他元素。元素。該元素用于對(duì)表單中的元素進(jìn)行分組并在文檔中區(qū)該元素用于對(duì)表單中的元素進(jìn)行分組并在文檔中區(qū)別標(biāo)出文本。別標(biāo)出文本。fieldset元素可以嵌套，在其內(nèi)部可以在設(shè)置多個(gè)元素可以嵌套，在其內(nèi)部可以在設(shè)置多個(gè)field

2、set對(duì)象。對(duì)象。disabled定義空間禁制可用定義空間禁制可用表單字段集用法表單字段集用法用邊框?qū)⒈韱斡眠吙驅(qū)⒈韱慰丶纸M控件分組2、字段級(jí)標(biāo)題：、字段級(jí)標(biāo)題：語法：語法： 說明：說明： legend元素可以在元素可以在fieldset對(duì)象繪制的方框內(nèi)插入對(duì)象繪制的方框內(nèi)插入一個(gè)標(biāo)題。一個(gè)標(biāo)題。legend元素必須是元素必須是fieldset內(nèi)的第一個(gè)內(nèi)的第一個(gè)元素。元素。字段級(jí)標(biāo)題字段級(jí)標(biāo)題給字段集添加給字段集添加標(biāo)題標(biāo)題3、提示信息標(biāo)簽：、提示信息標(biāo)簽：語法：語法： 說明：說明： label元素用來定義標(biāo)簽，為頁面上的其他元素指元素用來定義標(biāo)簽，為頁面上的其他元素指定提示信息。要將定提

3、示信息。要將label元素綁定到其他的控件上，元素綁定到其他的控件上，可以將可以將label元素的元素的for屬性設(shè)置為與該控件的屬性設(shè)置為與該控件的id屬屬性值相同。性值相同。4、上傳文件框：、上傳文件框：語法：語法： 說明：說明： type屬性值新增的類型有：屬性值新增的類型有：file文件類型，可進(jìn)行文件類型，可進(jìn)行文件的選擇，文件的選擇，multiple屬性可實(shí)現(xiàn)多選屬性可實(shí)現(xiàn)多選5、圖像域：、圖像域：語法：語法： 說明：說明：6、郵件格式：、郵件格式：語法：語法： 說明：說明： 郵箱格式輸入，郵箱格式輸入，html5新增新增required屬性屬性語法：語法： 說明：說明： 設(shè)置必填

4、屬性，表示此項(xiàng)為必填項(xiàng)，也可直接設(shè)設(shè)置必填屬性，表示此項(xiàng)為必填項(xiàng)，也可直接設(shè)placeholder屬性屬性語法：語法： 說明：說明： 該屬性用于可以顯示簡短的提示，提示用戶該輸入該屬性用于可以顯示簡短的提示，提示用戶該輸入什么樣的信息什么樣的信息pattern 屬性屬性語法：語法： 說明：說明：該屬性能夠提供一種正則表達(dá)式，只有用戶輸入的內(nèi)容該屬性能夠提供一種正則表達(dá)式，只有用戶輸入的內(nèi)容與表達(dá)式匹配才是有效的，用戶可自定義匹配格式與表達(dá)式匹配才是有效的，用戶可自定義匹配格式例如：例如：1:用戶名驗(yàn)證規(guī)則用戶名驗(yàn)證規(guī)則 : 用戶名長度為用戶名長度為612并且由字母組成并且由字母組成 patte

5、rn=A-z6,122:密碼驗(yàn)證規(guī)則密碼驗(yàn)證規(guī)則 : 密碼必須是數(shù)組與字母組合密碼必須是數(shù)組與字母組合 pattern=A-Za-z.*0-9|0-9.*A-Za-z回顧：回顧： 表格的作用：顯示數(shù)據(jù)表格的作用：顯示數(shù)據(jù);表格的基本結(jié)構(gòu)：表格的基本結(jié)構(gòu)： 1）關(guān)于表格的）關(guān)于表格的CSS屬性屬性2）關(guān)于表格的布局標(biāo)簽）關(guān)于表格的布局標(biāo)簽2表格標(biāo)簽及屬性高級(jí)表格標(biāo)簽及屬性高級(jí)1、單元格間距：、單元格間距：語法：語法： border-spacing:value; 說明：說明： 單元格間距單元格間距(該屬性必須給該屬性必須給table添加添加)表示單元格邊框之間的距離，表示單元格邊框之間的距離，不可

6、取負(fù)值不可取負(fù)值2、合并相鄰單元格邊框：、合并相鄰單元格邊框：語法：語法： border-collapse:separate/collapse;說明：說明： 作用：合并相鄰單元格邊框作用：合并相鄰單元格邊框(該屬性必須給該屬性必須給table添加添加)separate(邊框分開邊框分開)默認(rèn)值；默認(rèn)值；collapse(邊框合并邊框合并)3、無內(nèi)容時(shí)單元格的設(shè)置：、無內(nèi)容時(shí)單元格的設(shè)置：語法：語法： empty-cells:show/hide;說明：說明： 定義當(dāng)單元格無內(nèi)容時(shí)，是否顯示該單元格的邊框；定義當(dāng)單元格無內(nèi)容時(shí)，是否顯示該單元格的邊框；show：顯示：顯示 ；hide：隱藏；：隱藏

7、；4、顯示單元、行和列的算法、顯示單元、行和列的算法(加快運(yùn)行的速度加快運(yùn)行的速度)：語法：語法： table-layout:auto/fixed;說明：說明： 定義表格的布局算法，設(shè)置定義表格的布局算法，設(shè)置fixed，文本為英文字，文本為英文字母且無空格時(shí)，內(nèi)容超出單元格寬度則固定不變；母且無空格時(shí)，內(nèi)容超出單元格寬度則固定不變；如沒設(shè)寬則平均分配；設(shè)置如沒設(shè)寬則平均分配；設(shè)置auto時(shí)，則隨內(nèi)容寬度時(shí)，則隨內(nèi)容寬度而定；而定；(fixed：固定寬，不會(huì)隨內(nèi)容多少改變單元格寬：固定寬，不會(huì)隨內(nèi)容多少改變單元格寬,寬寬度可以明確定義，沒有定義時(shí)則寬度會(huì)平均分配，度可以明確定義，沒有定義時(shí)則寬

8、度會(huì)平均分配，高度則會(huì)隨內(nèi)容變化高度則會(huì)隨內(nèi)容變化)5、設(shè)置表格標(biāo)題：、設(shè)置表格標(biāo)題：語法：語法： 標(biāo)題內(nèi)容標(biāo)題內(nèi)容說明：說明： caption:表格標(biāo)題表格標(biāo)題表格標(biāo)題位置：表格標(biāo)題位置：caption-side:top/right/bottom/left說明：說明：left,right位置只有火狐識(shí)別，位置只有火狐識(shí)別，top,bottom IE6以上版本支持，以上版本支持，ie6以下版本不支持其它屬性值，以下版本不支持其它屬性值，只識(shí)別只識(shí)別top;6、隔行變色設(shè)置：、隔行變色設(shè)置：語法：語法： 雙數(shù)行：雙數(shù)行： tr:nth-child(2n) 單數(shù)行：單數(shù)行： tr:nth-chil

9、d(2n+1) 說明：說明： 設(shè)置單數(shù)單元格的樣式和雙數(shù)單元格的樣式設(shè)置單數(shù)單元格的樣式和雙數(shù)單元格的樣式Html5新增新增（二）、表格布局元素（二）、表格布局元素表格表格 描述描述 定義表格定義表格 定義表格標(biāo)題定義表格標(biāo)題 定義表格列標(biāo)題定義表格列標(biāo)題 定義表格的行定義表格的行 定義表格單元定義表格單元 定義表格的頁眉定義表格的頁眉 定義表格的主體定義表格的主體 定義表格的頁腳定義表格的頁腳 定義用于表格列的屬性定義用于表格列的屬性 定義表格列的組定義表格列的組 1、html重要屬性：重要屬性：1）colspan=value 合并列合并列2）rowspan=value 和并行和并行3）va

10、lign=top/bottom/middle/baseline 垂直對(duì)齊方式垂直對(duì)齊方式 4）rules=groups/rows/cols/all/none 添加組分隔線添加組分隔線 說明：說明： rows:位于行之間的線條位于行之間的線條 cols:位于列之間的線條位于列之間的線條 all：位于行和列之間的線條：位于行和列之間的線條 none:沒有線條沒有線條 groups:位于行組和列組之間的線條位于行組和列組之間的線條rules 屬性無法在屬性無法在 Internet Explorer、Chrome 或者或者 Safari 中正中正確地顯示。確地顯示。2、數(shù)據(jù)列分組、數(shù)據(jù)列分組(1) (

11、2) 說明：說明：1）col和和colgroup元素會(huì)根據(jù)從左到右的順序依次對(duì)數(shù)據(jù)表元素會(huì)根據(jù)從左到右的順序依次對(duì)數(shù)據(jù)表格進(jìn)行分組。格進(jìn)行分組。2）span屬性顯示指定相鄰幾列組成一組，屬性顯示指定相鄰幾列組成一組，span屬性值默認(rèn)屬性值默認(rèn)為為1，默認(rèn)時(shí)僅定義一列為一組。，默認(rèn)時(shí)僅定義一列為一組。3）可以通過給）可以通過給table添加添加rules=groups屬性來給分組列添屬性來給分組列添加組的分割線。加組的分割線。注意：雖然注意：雖然col和和colgroup具有相同的功能，但是，我們只具有相同的功能，但是，我們只能使用能使用colgroup元素來設(shè)置表格內(nèi)容部分分割線（元素來設(shè)置

12、表格內(nèi)容部分分割線（rules）應(yīng)該處于的位置，而應(yīng)該處于的位置，而col沒有這個(gè)功能。沒有這個(gè)功能。th:定義表格內(nèi)的表頭單元格。定義表格內(nèi)的表頭單元格。HTML 表單中有兩種類型的單元格：表單中有兩種類型的單元格：表頭單元格表頭單元格 - 包含表頭信息（由包含表頭信息（由 th 元素創(chuàng)建）元素創(chuàng)建）標(biāo)準(zhǔn)單元格標(biāo)準(zhǔn)單元格 - 包含數(shù)據(jù)（由包含數(shù)據(jù)（由 td 元素創(chuàng)建）元素創(chuàng)建）th 元素內(nèi)部的文本通常會(huì)呈現(xiàn)為居中的粗體文本，而元素內(nèi)部的文本通常會(huì)呈現(xiàn)為居中的粗體文本，而 td 元元素內(nèi)的文本通常是左對(duì)齊的普通文本。素內(nèi)的文本通常是左對(duì)齊的普通文本。3、數(shù)據(jù)行分組、數(shù)據(jù)行分組 表頭表頭 表體表

13、體 表尾表尾說明：一個(gè)說明：一個(gè)table中，只能包含一個(gè)中，只能包含一個(gè)thead,一個(gè)一個(gè)tfoot,但可包但可包含多個(gè)含多個(gè)tbody。說明：說明：thead 元素應(yīng)該與元素應(yīng)該與 tbody 和和 tfoot 元素結(jié)合起來使用。元素結(jié)合起來使用。tbody 元素用于對(duì)元素用于對(duì) HTML 表格中的主體內(nèi)容進(jìn)行分組，表格中的主體內(nèi)容進(jìn)行分組， tfoot 元素用于對(duì)元素用于對(duì) HTML 表格中的表注（頁腳）內(nèi)容進(jìn)行分表格中的表注（頁腳）內(nèi)容進(jìn)行分組。組。它們的出現(xiàn)次序是：它們的出現(xiàn)次序是：thead、tfoot、tbody，這樣瀏覽器就，這樣瀏覽器就可以在收到所有數(shù)據(jù)前呈現(xiàn)頁腳了。必須在可以在收到所有數(shù)據(jù)前呈現(xiàn)頁腳了。必須在 table 元素內(nèi)部元素內(nèi)部使用這些標(biāo)簽。使用這些標(biāo)簽。提示：在默認(rèn)情況下這些元素不會(huì)影響到表格的布局。不過提示：在默認(rèn)情況下這些元素不會(huì)影響到表格的布局。不過，可以使用，可以使用 CSS 使這些元素改變表格的外觀。使這些元素改變表格的外觀。詳細(xì)描述：詳細(xì)描述：thead、tfoot 以及以及 tbody 元素使我們有能力對(duì)表格中的行元素使我們有能力對(duì)表格中的行進(jìn)行分組。當(dāng)創(chuàng)建某個(gè)表格時(shí)，也許希