表格与表单技术分析.ppt

* * * * * * * * * * * * * * * * * * * * * * * 基本语法 select name=“name” size=“1” option value=“value” selected选项一/option option value=“value”选项二/option …… /select 语法解释 selected属性用于设置默认选中项 ，只 能有一个列表选项设置此属性；size属性 只能设置为1，也可不设置此属性，因 为其值默认为1 下拉菜单示例 您的最高学历/学位: select name=“degree option value=“1”博士后/option option value=“2” selected=“selected”博士/option option value=“3”硕士/option option value=“4”学士/option option value=“0”其他/option /select 5)文本域标记textarea 作用 用于制作一个多行多列的文本输入区域 基本语法 textarea name=“name” rows=“value1” cols=“value2” ……(此处输入的为默认文本） /textarea 属 性 描 述 name 设置文本域的名称 rows=“n” 设置文本域的可见行数 cols=“n” 设置文本域可见列数 文本域示例 请留言: textarea name=say rows=“8” cols=“60”/textarea 表单综合示例 6) 表单处理 访问者单击提交按钮或普通按钮后，表单中的信息可以首先使用javascript对输入数据的类型等进行验证，当验证通过后，被发送到网络服务器由表单中的action属性所指定的程序或由javascript脚本函数所指定的程序进行处理。这些处理可以有如下一些形式： – 服务器可以通过电子邮件发回信息 – 服务器可以把信息输入到数据库中 – 服务器可以把信息发布到网络新闻组或网页 – 服务器可以使用输入信息来搜索数据库 小 结 表格以及格式化表格 使用嵌套表格布局网页理解有关表单的相关概念 各种表单标记的使用 表单的数据传送方式有post和get两种，其中post方法传送数据时没有字符数量及字符类型的限制，相对也较安全；而get方法最多只能传送8K的字符，且只能传送ASCII字符，相对安全性也较差，因为它是将数据作为HTTP头的内容附加到URL上，且以纯文本形式进行传送。所以涉及安全性或数据量较大时使用post方法 当使用提交按钮提交表单内容时，表单处理程序可由form中的action属性或onsumbit属性来指定 通过设置input的type属性可获得不同类型的输入域 文本域需要通过rows和cols属性来设置可见区域的大小 思考题 1. 表单包含哪些标记？ 2. 表单数据的提交有哪两种方法？请简述它们的区别 3. 要在网页中添加一个下拉菜单，应如何设置? 4. 用提交按钮提交表单时，应如何设置表单相应标记属性？ 5. 如何在网页中添加一个6行30列的文本域? * * * * * * * * * * * * * * * * * * * * * * 1) 表单组成标记 表单是网页上的一个特定区域，构成这个区域的标记有六种，如表6-1所示。 表6-1 表单标记 标 记 描 述 form 定义一个表单区域以及携带表单的相关信息 input 设置输入表单元素 select 设置菜单或列表元素 optgroup 设置项目分组的菜单或列表 option 定义菜单或列表元素中的项目 textarea 设置表单文本域元素 2) 表单标记form form标记作用： 限定表单的范围，即定义一个区域，表单各元素都要设置在这个区域内，单击提交按钮时，提交的也是这个区域内的数据 携带表单的相关信息，如处理表单的脚本程序的位置、提交表单的方法等 基本语法 form name=“form_name” method=“get/post” action=“url” …… /form 语法解释，见表6-2 表6-2 form标记常用属性 属 性 描 述 name 设置表单名称，用于脚本引用 method 定义表单内容从客户端传送到服务器的方法，包括两种方法：get和post；默认时使用get方法 action 用于定义表单处理程序的位置（相对地址或绝对地址） onsubmit 用于定义表单处理脚本的位置 数据发送形式 数