第十一章表單表格高級

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

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

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

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

5、rn=A-z6,122:密碼驗證規(guī)則密碼驗證規(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）關于表格的）關于表格的CSS屬性屬性2）關于表格的布局標簽）關于表格的布局標簽2表格標簽及屬性高級表格標簽及屬性高級1、單元格間距：、單元格間距：語法：語法： border-spacing:value; 說明：說明： 單元格間距單元格間距(該屬性必須給該屬性必須給table添加添加)表示單元格邊框之間的距離，表示單元格邊框之間的距離，不可

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

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

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

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

10、lign=top/bottom/middle/baseline 垂直對齊方式垂直對齊方式 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元素會根據(jù)從左到右的順序依次對數(shù)據(jù)表元素會根據(jù)從左到右的順序依次對數(shù)據(jù)表格進行分組。格進行分組。2）span屬性顯示指定相鄰幾列組成一組，屬性顯示指定相鄰幾列組成一組，span屬性值默認屬性值默認為為1，默認時僅定義一列為一組。，默認時僅定義一列為一組。3）可以通過給）可以通過給table添加添加rules=groups屬性來給分組列添屬性來給分組列添加組的分割線。加組的分割線。注意：雖然注意：雖然col和和colgroup具有相同的功能，但是，我們只具有相同的功能，但是，我們只能使用能使用colgroup元素來設置表格內(nèi)容部分分割線（元素來設置

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

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