《HTML02表格和表单.ppt》由会员分享，可在线阅读，更多相关《HTML02表格和表单.ppt（28页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、HTML表格和表单1回顾l使用基本标记标题标记标题标记段落标记段落标记块标记块标记字符级标记字符级标记列表列表水平标尺标记水平标尺标记字体标记字体标记l在 HTML 文档中插入图像2目标l使用表格l使用表单3表的布局列行列标题4创建表数据单元格1数据单元格2数据单元格3数据单元格4数据单元格5数据单元格65与表相关的标记 表标记表格主体 标题标记 行标记 表格头列标记 单元格标记6使用表的相关标记创建表创建表一月二月三月四月五月六月1000550240150027651240300024302500125090034007插入行或列1.要在表格中插入新行，只要在新行要出现的地方插入 和 标记即
2、可。2.要在表格中插入新列，需要在每行相应的位置添加单元格。8插入行使用表 数据单元格1 数据单元格2 数据单元格3 数据单元格4 数据单元格5 数据单元格6 新行1 新行2 新行39删除行或列1.要删除行，需要删除相应的 标记及该 标记内的所有 标记。2.要删除列，应将定义该列的所有 标记都删除。10合并单元格1.在在 或或 标记中使用标记中使用 COLSPAN 属性，可以设置单元格所跨的列数，例如属性，可以设置单元格所跨的列数，例如COLSPAN=3表示跨表示跨3列。列。2.在在 或或 标记中使用标记中使用 ROWSPAN 属性，可以设置单元格所跨的行数，例如属性，可以设置单元格所跨的行数
3、，例如ROWSPAN=3表示跨表示跨3行。行。11合并单元格示例创建表第一季度第二季度一月二月三月四月五月六月10005502401500276512403000243025001250900340012增加单元间隔和单元填充1.CELLSPACING 属性定义单元格之间的间距（以像素为单位）。CELLPADDING 属性定义表的单元格边界与单元格内容之间的间距（以像素为单位）。2.13单元格中数据的对齐方式lalign=leftlalign=centerlalign=rightnvalign=topnvalign=middlenvalign=bottom数据单元格 114表单简介l表单的用途
4、用户注册某种服务时，收集其姓名、地址、电话号码、电子邮件地址和其他信息。收集购买物品所需的信息。例如，如果想通过 Internet 购买一本书，就需要填写姓名、邮政地址和付款方式等。15一个样本表单16表单标记的常用属性action此属性指定处理提交的表单的程序的位置。语法为：action=URLenctype指定表单数据的编码方式：application/x-www-form-urlencoded-窗体数据被编码为名称/值对.这是标准的编码格式.multipart/form-data 以二进制流的方式处理表单数据,这种编码方式会把文件域指定的文件内容也封装到请求参数里text/plain-窗
5、体数据以纯文本形式进行编码,其中不含任何控件或格式字符，这种编码方式当表单的action属性mailto:URL的形式较方便，主要适用于直接通过表单发送邮件method此属性指定向服务器发送数据的方法。如果值为GET，浏览器将创建一个请求，该请求包含页面URL、一个问号和表单的值。浏览器会将该查询返回给URL中指定的脚本，以进行处理。如果将值指定为POST，表单上的数据会作为一个数据块发送到脚本，而不使用任何请求字符串。语法为：METHOD=(GET|POST)target_blank，_parent,_self,_top，指定名称例如，要使用POST方法将表单提交给“processform”
6、程序，可编程如下：.表单内容表单内容.17表单中的几种元素INPUT此元素的TYPE属性指定表单元素的类型。可用的选项有TEXT、PASSWORD、FILE、HIDDEN、CHECKBOX、RADIO、SUBMIT、RESET、BUTTON和IMAGE。默认值为TEXT。TEXTAREA文本输入区域SELECT下拉列表或多选列表，multiple属性（标记属性）表示控件为多选列表OPTION标记用来定义列表中的一个选项OPTGROUP标记用来给OPTION进行分组，LABEL属性定义分组名称LABEL用来定义表单控件的标头信息FOR 属性用来与控件关联，设置值应与控件ID相同FIELDSETF
7、IELDSET标记用来将表单中相关的元素进行分组LEGEND标记分组的标题，默认显示中在左上角18Input Type 属性lTEXT 默认值：文本输入框lPASSWORD：密码输入框lHIDDEN：隐藏域lFILE：文件上传控件lCHECKBOX：复选框lRADIO：单选按钮lSUBMIT：提交按钮lRESET：重置按钮lBUTTON：普通按钮lIMAGE：图像提交按钮19示例：表单示例证券调查示例投资经验新手中级专家投资类型股票期权互惠基金今年选择什么证券？20其他输入元素lTextArea 元素colsrows21示例：表单示例证券调查示例有对其他投资者的建议吗？图4.3：示例2的输出结
8、果发送重置 22列表（下拉框）元素lSELECT 元素namesizemultiple23示例：表单示例表单示例证券调查示例证券调查示例您用什么方式购买证券？您用什么方式购买证券？1)网上交易网上交易2)电话交易电话交易3)经纪人代理经纪人代理4)其他其他 24表单中元素的公共属性ID此属性指定表单元素的唯一ID标识。NAME此属性指定表单元素的名称。例如，如果表单上有几个文本框，可以按照名称来标识它们-TEXT1、TEXT2或用户选择的任何名称。TITLE提示信息DISABLED标识属性，禁用输入项。TABINDEX定义Tab键的访问顺序。ACCESSKEY定义输入项的快捷访问方式。ALT+
9、设置字符25创建表单l控制表单元素Tab 键顺序访问键 禁用元素26示例：求职申请表姓名：求职意向网站设计师网管网站开发人员工作经历无一年三年五年附注请在这里键入附注。发送确认 27总结：l使用HTML标记创建表格，并通过相关的属性设置表格的格式。lCOLSPAN和ROWSPAN属性用于设置跨列和跨行的单元格。l表单元素用于接受用户的输入并提供一些交互式操作。l标记用于在页面上创建我们称为表单的区域。l元素用于定义表单上表单元素的类型和外观。lTEXTAREA元素用于创建多行文本输入框。lSELECT元素用于向用户显示选项列表。l元素的tabindex属性确定元素通过TAB键接收焦点的顺序。28