DW网页设计—第12章神奇的表单解析.ppt

12.4 SELECT对象的表单 select对象的表单将创建出一个列表样式的表单，显示为一个下拉框，令用户可以方便地选择其中一个目录。通常在一些要求填写户口地区、生日等信息中，设计者可以给使用者准备好选项，令使用者填写信息时更方便。在代码的写法中，这里需要使用option标签来定义可供选择的每一项。 12.4 SELECT对象的表单 【深入学习】用户可以通过下拉目录框选择一个“地址”，而这个数据则会被表单发送到服务器。此外，还可以使用value属性为每一个option指定不同的值。如果是这样，value设置的值将取代option的文本内容。 12.4 SELECT对象的表单 【深入学习】此外，如果设计者不希望select对象以下拉框的形式展示出来，有一种方式可以将目录项以滚动条的框体样式表现出来。只需要在select标签中加入size属性，如size=6，则表示是一个能容纳6行文字的文本框。当目录项超出设置的行数，将出现滚动条。 12.5 表单域集合 表单域的代码是由fieldset标签和legend标签组合而成。默认情况下，fieldset标签勾画出表单域的框形，legend标签的对象像标题一样出现在框形的左上角。代码看上去是这样的： form action=... method=post fieldset legend注册信息：/legend 输入用户名：input name=name type=text size=20 maxlength=12 !—这里可以放入许多样式的表单 --! /fieldset /form 12.6 案例：制作一则精美的由表单构成的页面 在前面的例子中，读者应该反复感受到了表单也是可以通过CSS样式表来修饰的这样一个信息。是的，设计者可以通过样式表来修改表单中文本的样式，像框模型那样修饰表单的布局。在这个例子中，将使用更多的样式表来表现一个综合的页面，来配合页面中的表单。 12.7 小结 本章介绍了表单的作用以及表单的表现形式，主要的知识点有： 表单的工作原理。 学习如何创建表单。 表单的主要样式以及它们的作用。通过这些表单，可以将使用者的信息递交给数据管理者。根据递交数据的样式不同，来决定使用怎样的表单。 了解表单中表单域的意义，它是用来给用户输入信息的区域。 第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．ME