第6章 表格与表单

要在第6章表格和表格、表格创建表格特定的标签、表格样式的控制表格样式控制、6.1表格标签、6.1.1表格创建HTML网页中创建表格，必须使用表格特定的标签。创建表格的默认语法格式如下：储存格中的文字.6.1表格标记，6.1.1表格创建上面的语法有三对HTML标记，每个都是、等，它们是创建表格的基本标记。一个是必需的标记，下面详细介绍。用于定义表。用于定义表中必须嵌套在标记内且必须在中包含几对的行。用于定义表格中的单元格，必须嵌套在标记内，并且一对包含几个对，指示该行中有多少列(或多少个单元格)。请记住，创建6.1表标签、6.1.1表和：学习表的核心是学习标签，例如容纳所有元素并在其中嵌套表的容器。但是，只能嵌套，不允许直接在标记中输入字符。6.1表格标记、6.1.2标记的属性和标记的属性如下表所示：6.1表格标记、6.1.2标记的属性、1和border属性位于标记中，border属性用于设置表格边框，默认值为0。代码如下：2，cellspacing属性cellspacing属性用于设置单元格和单元格边框之间的空格间距，默认值为2px。代码使用、6.1表格标记、6.1.2标记的属性、3、cellpadding属性cellpadding属性设置单元格内容和单元格边框之间的空格间距，默认值为1px。代码如下：cellpadding类似于方块模型的内部边界padding，参考储存格内部距离，cellspacing表示外部储存格和储存格之间的距离。您可以结合方块模型的内部和外部边界，以了解cellpadding和cellspacing之间的差异。6.1表格标记、6.1.2标记的属性以及4、width和height属性默认情况下由表格的宽度和高度本身的内容支持。要更改表格的大小，请应用宽度属性width或高度属性height。在，中，为表格标记设置width、height和cellpadding属性时，cellpadding无法正确显示，因此通常在不为表格设置宽度的情况下测试单元格padding属性。6.1表格标记、6.1.2标记的属性、5和align属性align属性定义了可选属性值为left、center和right的元素的水平对齐方式。有趣的是，将align属性应用于标签时，控制表格的水平对齐，单元格的内容不受影响。6、在bgcolor属性标记中，bgcolor属性用于设置表格的背景颜色。7、在background属性标签中，background属性是用来设定表格的背景影像。6.1表格标记、6.1.3标记的属性、创建web页面时可以定义行标记属性的表格中的特定行。6.1表格标记、6.1.3标记的属性以及要学习的属性应注意以下事项：无标记宽度属性width，其宽度取决于表格标记。您可以将valign属性套用至标签，以设定一列内容的垂直对齐方式。您可以将background属性应用于标签，但是标签中此属性的兼容性问题很严重。6.1表格标记、6.1.4标记属性，有时在web页面合成过程中只需要控制某些单元格。在这种情况下，可以为单元格标记定义属性，如下表所示：6.1表格标签、6.1.4标签的属性、1、标签的属性集中于colspan和rollspan，其它属性易于理解、不推荐，可以由CSS样式属性替换。2、将width属性应用于标记以设置宽度时，该列中的所有单元格都将以设置的宽度显示。3，将height属性设置高度应用于标签时，该行中的所有单元格都显示为设置的高度。6.1表格标签、6.1.5标签及其属性、表头通常位于表格的第一列或第一栏，文字以粗体置中，且表头已设定的表格如下图所示。标头设定非常简单，您可以使用标头标签取代相应的储存格标签。6.1表格标签、6.1.6表格的结构、使用表格进行配置时，您可以将表格分成头、本文和页尾，如下所示：用于定义表的头部，必须位于标记中，通常包含标题信息，如网页的logo和导航。用于定义表的页脚，标记后通常包含web页底部的企业信息等。位于标记的标记之后，通常用于定义包含网页头和底部以外的其他内容的表格的正文。6.2CSS控制表格样式，6.2.1CSS控制表格边框，而CSS边框样式属性border使您可以轻松地控制表格边框。1、border-collapse属性的属性值除collapse(合并)外，还可以为separate(分离)，默认值为separate。2、如果表格的border-collapse属性设置为collapse，则HTML中设置的cellspacing属性值无效。3、没有行标签的border风格属性，这本书不再做具体的演示，初学者可以自行测试理解。6.2CSS控制表格样式，6.2.2CSS控制单元格边距，使用标签的属性调整表格时，cellpadding和cellspacing分别控制单元格内容和边框之间的距离以及相邻单元格边框之间的距离。行标记无内陷属性padding和外部边距属性margin在本书中不再进行具体的演示，初学者可以直接测试深入理解。6.2CSS控制表格样式，6.2.3CSS控制单元格的宽度、单元格的宽度和高度，具有与其它元素不同的属性，主要出现在单元格之间的交互中。如果为同一行中的单元格定义不同的高度，或为同一列中的单元格定义不同的宽度，则最终宽度或高度将使用其中较大的值。6.3在HTML中，整个表单通常由三部分组成：表单控件(也称为表单元素)、提示信息和表单域，如下图所示。6.3对于表单配置中的表单控件、提示信息和表单域，初学者可能难以理解。对此的说明如下：表单控件：包含特定的表单功能项目，如单行文本输入框、密码输入框、复选框、提交按钮和重置按钮。提示信息：通常，表格需要一些说明性文字来显示创建和操作提示。表单域：类似于包含所有表单控件和提示信息的容器。您可以定义用于处理表单数据的程序的URL地址以及向服务器提交数据的方式。如果未定义表单域，则表单中的数据不会传递到后台服务器。6.3识别表单，在表单的第3部分配置中，表单控件是表单的核心，常用的表单控件如下表所示：创建6.4表单，在HTML中，标签用于定义表单域。也就是说，创建用于收集和传递用户信息的表格，并将的所有内容提交给服务器。创建表单的默认语法格式如下：在上面的语法中，和之间的表单控件由用户自定义，action、method和name是表单标签的通用属性。Action要求表单收集信息，然后将信息传递给服务器进行处理，action属性用于指定接收和处理表单数据的服务器程序的URL地址。各种表单控件、创建6.4表单和methodmethod属性设置如何使用get或post值提交表单数据。Namename属性用于命名表单，以区分同一页面上的多个表单。标签的属性对表单显示没有直接影响。要使一个表单有意义，必须在和之间添加相应的表单控件。6.5表单控件、6.5.1input控件和input控件的默认语法格式为：在上面的语法中，标签是单个标签，type属性是最基本的属性，具有指定各种控件类型的多个值。标签除了type属性外，还可以定义许多其它属性，其公用属性如下表所示：6.5表单控件、6.5.1input控件、6.5表单控件、6.5.2textarea控件、如果需要输入大量信息，则必须使用标记。使用Textarea控件时，文本内容、6.5表单控件、6.5.2textarea控件、上述语法格式中的cols和rows是标记的必需属性，其中cols定义多行文本输入框每行中的字符数，rows定义多行文本输入框的行数，该文本框显示为正整数。由于不同的、浏览器对cols和rows属性的理解不同，因此将cols和rows属性应用于textarea控件时，浏览器中的多行文本输入框可能会显示不同的内容。因此，在实际工作中，更常用的方法是使用CSS的width和height属性定义多行文本输入框的宽度。6.5表单控件，6.5.3select控件，下图显示了下拉菜单，单击下拉符号“”时的选择列表。在HTML中创建下拉菜单需要select控件，如下图所示。6.5表单控件、6.5.3select控件、select控件定义下拉菜单的默认语法格式如下：在上面的语法中，标记用于向表单中添加下拉菜单，每个对包含一个或多个对。选项1选项2选项3.6.5表单控件、6.5.3select控件、其中，您可以在HTML中定义和标记的属性，以更改下拉菜单的外观，如下表所示：6.6CSS控制表单样式，使用CSS轻松控制表单控件的样式，主要控制表单控件的字体、边框、背景、内陷等。使用CSS控制表单样式时，初学者也应注意以下几个问题：Form是块元素，因此重置浏览器的默认样式时，请确保清除内陷padding和外边界margin。input控件默认具有边框效果，在使用标签定义各种按钮时通常需要清除边框。通常，应在文本框和密码框中设置2到3个