2011年高考语文试题(全国卷word版)

HTML&XML网页设计,第17章 表单,HTML表单(Form)是HTML的一个重要部分，主要用于采集和提交用户输入的信息,可以利用表单（Form）来设计交互界面。 “表单”是接受浏览者在网页中的操作，传递给服务器中的程序（如CGI程序），它是动态的，有输入框及按钮等。 使用表单并配合CGI程序，网页能够知道浏览的人做了哪些事情，然后针对这些事情适当地加以回应，就可以做成一个具有交互功能的网页了。,1、表单标签成对标签: 2、首标签和尾标签之间的内容就是一个表单3、表单form中的HTML代码要完成两件事情：一:指出CGI的路径和名称(CGI一种在服务器上运行的应用程序)二:要将表单输入的信息传递给CGI,标签,在HTML中，form的语法结构如下：学习HTML表单(Form)最关键要掌握的有三个要点：表单控件(Form Controls) Action Method,1表单控件 表单控件(Form Controls)，通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。比如上面的例句里，input type= text就是一个表单控件，表示一个单行输入框。,HTML表单(Form)常用控件有：input type=text 单行文本输入框 input type=submit 将表单(Form)里的信息提交给表单里action所指向的文件 input type=checkbox 复选框 input type=radio 单选框 select 下拉框 textArea 多行文本输入框 input type=password 密码输入框(输入的文字用*表示),2action属性WWW是采用客户/服务器工作方式的。在浏览器端得到的用户反馈信息将被传送到Web服务器中，由相应的处理程序进行处理。action属性的作用就是指出该表单所对应的处理程序的位置。它的参数值就是该程序的URL。,3method属性 method属性用于指定该表单的运行方式。属性的参数值为get或post，默认的方式是get。method=“get” :表示该表单主要是从服务器中获取信息，因此它传送给服务器的反馈信息长度不能超过255个字符；method=“post”:表示该表单主要是向服务器发送信息的，它传送给服务器的反馈信息长度没有限制。,3method属性通过 get 或者 post 方法都可以获得 Form 的数据，两者主要区别在于以下几方面：-Get1、URL 改变，在URL 里显示 HTML Form 参数的 name/value 值。2、只适合有少量参数的 HTML Form，因为 URL 长度有字符限制，不能无限长。3、涉及安全性的信息，比如用户密码，不能用 get，因为会在 URL 上显示，不安全。4、Get限制Form表单的数据集的值必须为ASCII字符-Post1、URL 不改变，不在 URL 里显示 HTML Form 的数据。2、Form 提交的信息没有长度限制。在上传文件只能使用Post。3、涉及安全性的信息，如用户密码，应采用 post 方式。4、Post支持整个ISO10646字符集。,3method属性,那什么时候用get，什么时候用post呢？一般是这样来判断的，如果只是为取得和显示数据，用get；一旦涉及数据的保存和更新，那么建议用post。,对表单元素进行组织,如果一个页面的表单项太多,我们最好把它们分组显示,就像使用p标签分开段落一样,可以使用fieldset与legend标签对表单内容分组. ,对表单元素进行组织, IE对legend元素的支持很差。可以考虑用一个具有适当样式的p元素模拟legend的效果。, personal information ,对表单元素进行组织,对表单元素进行组织, 用户名与密码: 用户名: 密码: ,对表单元素进行组织, 性别: 男 女 保密 我最喜爱的: 计算机 旅游 购物 ,创建文本框,是个单标签，没有结束标签必须嵌套在表单标签中使用，用于定义一个用户输入项。标签主要有6个属性，如下所示： 其中type, name为必选属性在不同的输入方式下，标签的格式略有不同，其他五种属性因type的类型不同，含义也不同。,创建文本框,1、type属性用于指定该输入项提供的输入方式,即指出浏览者输入的值是什么类型的2、name属性用于指定相应处理程序中的变量名,Web服务器将把这条输入信息的值赋予name属性规定的变量,标签,type属性 有9种类型type =“text” 文本框type=“password” 密码框type=“radio” 单选框type=“ checkbox” 复选框type=“submit” 提交按钮type=“ reset” 重置按钮type=“ image” 图像按钮type=“ hidden” 隐藏框type=“file” 文件选择输入框, 浏览器会在相应的位置显示一个文本框供用户输入信息type=“text” 表示该输入项的输入信息是字符串 此文本框是一个只能输入一行文字的输入框,文本框text,提交按钮submit与重置按钮reset, ,当type=“submit”时 浏览器会在相应的位置产生一个提交按钮当用户单击该按钮时，浏览器就会将表单的输入信息传送给服务器name, value属性是可选的value属性，用于指定显示在提交按钮上的文字value属性的缺省值是“提交查询内容”在一个表单中必须有提交按钮，不然将无法向服务器传送信息。,当type=“reset”时，浏览器会在相应位置产生一个重置按钮。当用户单击该按钮时，浏览器就会清除表单中所有的输入信息而恢复到初始状态。name, value属性是可以缺省的，value属性用于指定显示在清除按钮上的文字value属性的缺省值是“重置”。一般来说，提交与重置按钮应同时出现。,21,带图像提交/重置按钮button,VoteReset,密码框password,password类型与text类型不同之处：输入内容时用“ ” 来代替每个密码字符，以保证密码的安全。,标注,FOR属性 功能：表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。 用法：姓名,(x)Html提供一种对标签进行标注的方法，可以将标签与相关联的元素正式链接在一起，并且可以将标签用于脚本或其他用途.,注：要将 LABEL 绑定到其它的控件，请将 LABEL 元素的 FOR 属性设置为与该控件的 ID 相同。, 经常来这里 偶尔来看看,单选框radio,注意： 当type=radio时，表示该输入项是一个单选项。单选项必须是唯一的，即用户只能选中表单中所有单选项中的一项作为输入信息。因此，所有属性name都应取相同的值，但属性value的值应是不同的其中的checked属性用于指定该选项在初始时是被选中的。,教师医生导游,25,当type=“checkbox”时，用户可以同时选中表单中的一个或多个复选项作为输入信息。由于选择是多项的，属性name应取不同的值。属性value的参数值就是该项被选中并提交后，Web浏览器要传送给服务器的数据。因此，value属性的参数值必须与选项内容相同或基本相同，该属性是不可缺少的。checked属性用于指定该选项在初始时是被选中的。,复选框checkbox,菠萝香蕉苹果橘子,26,当type=image时，浏览器会在相应位置产生一个图像按钮，当用户单击该按钮时，浏览器就会将表单的输入信息传送给服务器。image类型中的src属性是必须的，它用于设置图像文件的路径。另外，很多在图像标签中使用的属性规定也可以在图像按钮中使用。如：搜狐闪电邮件 新用户注册,图像按钮image,27,当type=hidden时，表示输入项将不在浏览器窗口中显示。如果用户不想显示某些选项而又不愿将它们从文档中删去的话，就可以通过将这些选项中type属性的参数值改为hidden来达到上述目的。使用隐藏域，你想在表单中传递一个参数,但是又不想让访问者看见的时候用到. 这些数据可以被用于前台脚本程序完成某些功能。 如：我们在隐藏域中放置了一个页面号。在实际应用中，如果用户点击了“下一页”，那么后台程序可以通过隐藏域中保存的页面号得知要显示的下一页编号：,隐含框hidden,This is page 10,28,文件选择输入框在文件上传程序中应用最为广泛。文件选择输入框虽然看似复杂，但是在HTML中，只需通过就可以完全实现了。,文件选择输入框file,29,在表单中，通过和标签就可以在浏览器中出现一个下拉式菜单或带有滚动条的菜单，浏览者可以在菜单中选中一个或多个选项。这一点和标签中单选框和多选框使用上相似，只是形式不同。,下拉菜单select/option,30,标签是成对标签首标签和尾标签之间的内容就是一个下拉式菜单的内容标签必须与标签配套使用标签用于定义下拉菜单中的各个选项标签有name、size和multiple三个属性: name属性用于指定下拉菜单的名字。 size属性是可选的，用于定义菜单的长度。size属性的参数值是数字， 表示显示在菜单中的选项数目。当size属性的参数值小于列表框中的列表项数目时，浏览器会为该菜单添加滚动条，用户可以使用滚动条来查看所有的选项。size属性的缺省值为1。 multiple属性用于预选多个选项。,select标签,31,一、标签用来定义菜单中的选项,必须嵌套在标签中使用一个菜单中有几个选项，就要有几个标签与之相对应，选项的具体内容写在每个之后二、标签有两个可选属性：value和selectedvalue属性的参数值是当该项被选中并提交后，Web浏览器传送给服务器的数据。缺省时，浏览器将传送选项的内容。selected属性用来指定选项的初始状态，表示该选项在初始时是被选中的。若在标签中设定multiple属性的话，可以在多个标签中带有selected属性，即同时多个选项被预选。,option标签,32, 苹果 梨 橘子 ,option标签, Volvo Saab Mercedes Audi , 标签 定义选项组。此元素允许您对选项进行分类。,33,多行文本框textarea,请留言.,标签有3个属性：name、rows和属性用于指定文本输入框的名字cols属性用于规定文本输入框的宽度rows属性用于规定文本输入框的高度,用标签可以来定义高度超过一行的文本输入框。,标签是成对标签:文本框初始信息,1、设置表单上的制表符次序在表单元素的标记中，输入tabindex=“n”N是032767之间的任意数字 2、添加键盘快捷键在表单元素的标记中，输入accesskey=“”3、禁用表单元素 在表单元素的标记中输入disabled=“disabled”4、防止元素被修改在表单元素的标记中输入readonly=“readonly”,35,表单在网页中的应用,CGI程序的概念,1. 定义CGI (Common Gateway Interface)通用网关接口的英文缩写形式。是HTTP服务器与你的或其它机器上的程序进行“交谈”的一种工具，其程序须运行在网络服务器上。 简单地说，CGI是服务器和HTML文件之间的接口程序，它负责处理HTML文件与运行在服务器中程序之间的数据交换。2. 功能绝大多数的CGI程序被用来解释处理来自表单的输入信息，并在服务器产生相应的处理，或将相应的信息反馈给浏览器。CGI程序使网页具有交互功能。,36,CGI程序与服务器交互的流程,1,2,3,6,5,4,37,一、 首先在浏览器发出请求，如：浏览者输入查询条件，这 一请求就像对任意一个URL的访问请求一样被传送到服务器。二、服务器接收到这一请求后，根据请求中提供的文件名到CGI-BIN子目录中去执行CGI程序。三、这个CGI程序也许是计算一个值，或者是调用系统下的某个程序，四、该程序将执行结果返回给CGI程序。五、CGI程序又将结果转换成网页服务器能识别的HTML格式。六Web服务器再将HTML格式表达的数据返回给提出请求的Web浏览器，经浏览器对HTML格式返回的数据进行处理后，就是呈现于面前的CGI执行结果了。,38,实现CGI程序交互式访问是网页编写的最高阶段，要求很高，除了需要熟悉HTML以外，还需要熟悉网页服务器所驻留主机的操作系统以及操作系统所支持的某种语言。同时，编写CGI程序之前，必须要求系统管理员开放对CGI-BIN目录的访问权。基于这些原因，一般网页很少使用CGI，当然，当你的网页很庞大时，必然要用到CGI。幸运的是，在Internet上，到外都有现成的CGI程序、你只管下载使用