第十一章表单表格高级

1、HTML5前端开发1表单标签及属性高级表单标签及属性高级2表格标签及属性高级表格标签及属性高级回顾：回顾： 表单的组成：表单的组成：表单域：表单域： 表单控件表单控件 ： 提示信息：提示信息： 1、表单字段集：、表单字段集：1表单标签及属性高级表单标签及属性高级语法：语法： 说明：说明： 相当于一个方框，在字段集中可以包含文本和其他相当于一个方框，在字段集中可以包含文本和其他元素。元素。该元素用于对表单中的元素进行分组并在文档中区该元素用于对表单中的元素进行分组并在文档中区别标出文本。别标出文本。fieldset元素可以嵌套，在其内部可以在设置多个元素可以嵌套，在其内部可以在设置多个field

2、set对象。对象。disabled定义空间禁制可用定义空间禁制可用表单字段集用法表单字段集用法用边框将表单用边框将表单控件分组控件分组2、字段级标题：、字段级标题：语法：语法： 说明：说明： legend元素可以在元素可以在fieldset对象绘制的方框内插入对象绘制的方框内插入一个标题。一个标题。legend元素必须是元素必须是fieldset内的第一个内的第一个元素。元素。字段级标题字段级标题给字段集添加给字段集添加标题标题3、提示信息标签：、提示信息标签：语法：语法： 说明：说明： label元素用来定义标签，为页面上的其他元素指元素用来定义标签，为页面上的其他元素指定提示信息。要将定提

3、示信息。要将label元素绑定到其他的控件上，元素绑定到其他的控件上，可以将可以将label元素的元素的for属性设置为与该控件的属性设置为与该控件的id属属性值相同。性值相同。4、上传文件框：、上传文件框：语法：语法： 说明：说明： type属性值新增的类型有：属性值新增的类型有：file文件类型，可进行文件类型，可进行文件的选择，文件的选择，multiple属性可实现多选属性可实现多选5、图像域：、图像域：语法：语法： 说明：说明：6、邮件格式：、邮件格式：语法：语法： 说明：说明： 邮箱格式输入，邮箱格式输入，html5新增新增required属性属性语法：语法： 说明：说明： 设置必填

4、属性，表示此项为必填项，也可直接设设置必填属性，表示此项为必填项，也可直接设placeholder属性属性语法：语法： 说明：说明： 该属性用于可以显示简短的提示，提示用户该输入该属性用于可以显示简短的提示，提示用户该输入什么样的信息什么样的信息pattern 属性属性语法：语法： 说明：说明：该属性能够提供一种正则表达式，只有用户输入的内容该属性能够提供一种正则表达式，只有用户输入的内容与表达式匹配才是有效的，用户可自定义匹配格式与表达式匹配才是有效的，用户可自定义匹配格式例如：例如：1:用户名验证规则用户名验证规则 : 用户名长度为用户名长度为612并且由字母组成并且由字母组成 patte

5、rn=A-z6,122:密码验证规则密码验证规则 : 密码必须是数组与字母组合密码必须是数组与字母组合 pattern=A-Za-z.*0-9|0-9.*A-Za-z回顾：回顾： 表格的作用：显示数据表格的作用：显示数据;表格的基本结构：表格的基本结构： 1）关于表格的）关于表格的CSS属性属性2）关于表格的布局标签）关于表格的布局标签2表格标签及属性高级表格标签及属性高级1、单元格间距：、单元格间距：语法：语法： border-spacing:value; 说明：说明： 单元格间距单元格间距(该属性必须给该属性必须给table添加添加)表示单元格边框之间的距离，表示单元格边框之间的距离，不可

6、取负值不可取负值2、合并相邻单元格边框：、合并相邻单元格边框：语法：语法： border-collapse:separate/collapse;说明：说明： 作用：合并相邻单元格边框作用：合并相邻单元格边框(该属性必须给该属性必须给table添加添加)separate(边框分开边框分开)默认值；默认值；collapse(边框合并边框合并)3、无内容时单元格的设置：、无内容时单元格的设置：语法：语法： empty-cells:show/hide;说明：说明： 定义当单元格无内容时，是否显示该单元格的边框；定义当单元格无内容时，是否显示该单元格的边框；show：显示：显示 ；hide：隐藏；：隐藏

7、；4、显示单元、行和列的算法、显示单元、行和列的算法(加快运行的速度加快运行的速度)：语法：语法： table-layout:auto/fixed;说明：说明： 定义表格的布局算法，设置定义表格的布局算法，设置fixed，文本为英文字，文本为英文字母且无空格时，内容超出单元格宽度则固定不变；母且无空格时，内容超出单元格宽度则固定不变；如没设宽则平均分配；设置如没设宽则平均分配；设置auto时，则随内容宽度时，则随内容宽度而定；而定；(fixed：固定宽，不会随内容多少改变单元格宽：固定宽，不会随内容多少改变单元格宽,宽宽度可以明确定义，没有定义时则宽度会平均分配，度可以明确定义，没有定义时则宽

8、度会平均分配，高度则会随内容变化高度则会随内容变化)5、设置表格标题：、设置表格标题：语法：语法： 标题内容标题内容说明：说明： caption:表格标题表格标题表格标题位置：表格标题位置：caption-side:top/right/bottom/left说明：说明：left,right位置只有火狐识别，位置只有火狐识别，top,bottom IE6以上版本支持，以上版本支持，ie6以下版本不支持其它属性值，以下版本不支持其它属性值，只识别只识别top;6、隔行变色设置：、隔行变色设置：语法：语法： 双数行：双数行： tr:nth-child(2n) 单数行：单数行： tr:nth-chil

9、d(2n+1) 说明：说明： 设置单数单元格的样式和双数单元格的样式设置单数单元格的样式和双数单元格的样式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、数据列分组、数据列分组(1) (

11、2) 说明：说明：1）col和和colgroup元素会根据从左到右的顺序依次对数据表元素会根据从左到右的顺序依次对数据表格进行分组。格进行分组。2）span属性显示指定相邻几列组成一组，属性显示指定相邻几列组成一组，span属性值默认属性值默认为为1，默认时仅定义一列为一组。，默认时仅定义一列为一组。3）可以通过给）可以通过给table添加添加rules=groups属性来给分组列添属性来给分组列添加组的分割线。加组的分割线。注意：虽然注意：虽然col和和colgroup具有相同的功能，但是，我们只具有相同的功能，但是，我们只能使用能使用colgroup元素来设置表格内容部分分割线（元素来设置

12、表格内容部分分割线（rules）应该处于的位置，而应该处于的位置，而col没有这个功能。没有这个功能。th:定义表格内的表头单元格。定义表格内的表头单元格。HTML 表单中有两种类型的单元格：表单中有两种类型的单元格：表头单元格表头单元格 - 包含表头信息（由包含表头信息（由 th 元素创建）元素创建）标准单元格标准单元格 - 包含数据（由包含数据（由 td 元素创建）元素创建）th 元素内部的文本通常会呈现为居中的粗体文本，而元素内部的文本通常会呈现为居中的粗体文本，而 td 元元素内的文本通常是左对齐的普通文本。素内的文本通常是左对齐的普通文本。3、数据行分组、数据行分组 表头表头 表体表

13、体 表尾表尾说明：一个说明：一个table中，只能包含一个中，只能包含一个thead,一个一个tfoot,但可包但可包含多个含多个tbody。说明：说明：thead 元素应该与元素应该与 tbody 和和 tfoot 元素结合起来使用。元素结合起来使用。tbody 元素用于对元素用于对 HTML 表格中的主体内容进行分组，表格中的主体内容进行分组， tfoot 元素用于对元素用于对 HTML 表格中的表注（页脚）内容进行分表格中的表注（页脚）内容进行分组。组。它们的出现次序是：它们的出现次序是：thead、tfoot、tbody，这样浏览器就，这样浏览器就可以在收到所有数据前呈现页脚了。必须在可以在收到所有数据前呈现页脚了。必须在 table 元素内部元素内部使用这些标签。使用这些标签。提示：在默认情况下这些元素不会影响到表格的布局。不过提示：在默认情况下这些元素不会影响到表格的布局。不过，可以使用，可以使用 CSS 使这些元素改变表格的外观。使这些元素改变表格的外观。详细描述：详细描述：thead、tfoot 以及以及 tbody 元素使我们有能力对表格中的行元素使我们有能力对表格中的行进行分组。当创建某个表格时，也许希