HTML02表格和表单

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