第12章神奇的表单.pptxVIP

第12章 神奇的表单 之前的所有网页浏览者只能看到、或者使用超链接去浏览另外一个页面和页面内的锚点，但是这些可不能算是动态页面。现在，大多数网站都具备收集用户信息的功能，如发表留言、输入账号等，而通过使用表单能够令浏览者和页面互动起来。 在了解表单之前，我们先来简单了解一下什么是JavaScript程序。而事实上，要分清楚两个概念：什么是JavaScript的程序部分，该如何去触发JavaScript程序。 12.1 表单的工作原理 表单的最重要的表现就是在客户端接收用户的信息，然后将数据递交给后台的程序来操控这些数据。从技术的概念上，表单就是一个操作form对象的使用，对象是一种基本的数据类型。 12.1.1 script标记 JavaScript程序的调用类似于CSS样式表，可以像嵌入式样式表一样放入在head标签中，也可以像外联式样式表一样通过链接来引用。当放入到head标签中使用时，需要通过script标记命令行。浏览器通过script标签获得分析程序的信息，来告诉浏览器使用的是哪种语言的脚本，如实例12-1中第8句： script language=JavaScript 如果是通过引用外部JavaScript程序，就像链接外联样式表那样，那么代码应该写成： script type=text/javascript src=some.js /scirpt 12.1.2 创建表单 创建一个表单看上去就像创建一个表格，表格的单元格、行、列都放在table标签中，而创建表单的方式就像是创建一个表格，使用form标签来创建。其中放置表单的对象，有表单域、按钮和其他事物 form标签中可扩展几个属性，分别是action、method、enctype和target属性。action属性表示将数据传送到指点的URL地址，method属性的值告诉浏览器通过怎样的方式来提交数据。还有enctype属性和target属性，前者用来表示编码方式和后者用来表示目标的显示方式。 1．action属性 1．action属性 通过form标签定义的表单，它里面必须有action属性才能将表单中的数据提交出去。如这句代码所示： form action=some.php /form 它的作用是用来提交some.php这个页面中的数据。 2．method属性 2．method属性 method属性的作用是告诉浏览器，数据是以何种方式提交出去的。method属性下可以有2个选择：post或者get。 这两种方式的区别在于，get在安全性上较差，所有的表单域的值直接呈现。而post除了只有可见的处理脚本程序以外，别的东西都可以隐藏。所以在实际的运用时，通常都选择post这种处理方式。 3．name属性 添加name属性是为了令递交出去的表单数据能够被处理这些数据的程序识别。在大部分页面中，很可能放入的表单不止一个。那么就要给不同的表单起不同的名字，便于程序来识别。如实例12-1例子中的第27句。 form name=loandata 这里将表单命名为loandata，而在代码的第15句： var length = document.loandata.length.value; 表示通过表单loandata中获取输入的length项数值。如果代码中有很多不同的表单，那么通过name就可以区分它们。 4．编码方式 enctype代表HTML表单数据的编码方式，分别有application/x-www-form-urlencoded、multipart/form-data和text/plain共3种方式。application/x-www-form-urlencoded是标准的编码方式，提交的数据被编码为名称/值对。multipart/form-data属性表示数据编码为一条信息，为表单定义了MIME编码方式，创建了一个与传统不同的POST缓冲区，页面上每个控件对应消息中的一个部分。text/plain表示数据以纯文本的形式进行编码，这样在信息中，将不包含控件或者格式字符。 5．目标显示方式 target属性表示在何处打开目标URL，可以设置4种方式，_blank表示在新的页面中打开链接，_self表示在相同的窗口中打开页面，_parent表示在父级窗口中打开页面，_top表示将页面载入到包含该链接的窗口，取代任何当前在窗口中的页面。所以，一个完整的from标记，看上去是这样的。 from action=mailto:depp59@ method=post name=some enctype=text/plain target=_blank … /form 12.1.3 表单域 表单域是用户输入数据的地方。说得形象一些，就相当于是用户给程序下命令。当然，这