DW网页设计—第12章神奇的表单

1、第12章 神奇的表单 之前的所有网页浏览者只能看到、或者使用超链接去浏览另外一个页面和页面内的锚点，但是这些可不能算是动态页面。现在，大多数网站都具备收集用户信息的功能，如发表留言、输入账号等，而通过使用表单能够令浏览者和页面互动起来。 在了解表单之前，我们先来简单了解一下什么是JavaScript程序。而事实上，要分清楚两个概念：什么是JavaScript的程序部分，该如何去触发JavaScript程序。12.1 表单的工作原理 表单的最重要的表现就是在客户端接收用户的信息，然后将数据递交给后台的程序来操控这些数据。从技术的概念上，表单就是一个操作form对象的使用，对象是一种基本的数据类型

2、。12.1.1 标记 JavaScript程序的调用类似于CSS样式表，可以像嵌入式样式表一样放入在标签中，也可以像外联式样式表一样通过链接来引用。当放入到标签中使用时，需要通过标记命令行。浏览器通过标签获得分析程序的信息，来告诉浏览器使用的是哪种语言的脚本，如实例12-1中第8句： 如果是通过引用外部JavaScript程序，就像链接外联样式表那样，那么代码应该写成： 12.1.2 创建表单 创建一个表单看上去就像创建一个表格，表格的单元格、行、列都放在标签中，而创建表单的方式就像是创建一个表格，使用标签来创建。其中放置表单的对象，有表单域、按钮和其他事物 标签中可扩展几个属性，分别是act

3、ion、method、enctype和target属性。action属性表示将数据传送到指点的URL地址，method属性的值告诉浏览器通过怎样的方式来提交数据。还有enctype属性和target属性，前者用来表示编码方式和后者用来表示目标的显示方式。1ACTION属性 1action属性 通过标签定义的表单，它里面必须有action属性才能将表单中的数据提交出去。如这句代码所示： 它的作用是用来提交some.php这个页面中的数据。2METHOD属性 2method属性 method属性的作用是告诉浏览器，数据是以何种方式提交出去的。method属性下可以有2个选择：post或者get。

4、这两种方式的区别在于，get在安全性上较差，所有的表单域的值直接呈现。而post除了只有可见的处理脚本程序以外，别的东西都可以隐藏。所以在实际的运用时，通常都选择post这种处理方式。3NAME属性 添加name属性是为了令递交出去的表单数据能够被处理这些数据的程序识别。在大部分页面中，很可能放入的表单不止一个。那么就要给不同的表单起不同的名字，便于程序来识别。如实例12-1例子中的第27句。 这里将表单命名为loandata，而在代码的第15句： var length = document.loandata.length.value; 表示通过表单loandata中获取输入的length项数

5、值。如果代码中有很多不同的表单，那么通过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表示数据以纯文本的形式进行编

6、码，这样在信息中，将不包含控件或者格式字符。5目标显示方式 target属性表示在何处打开目标URL，可以设置4种方式，_blank表示在新的页面中打开链接，_self表示在相同的窗口中打开页面，_parent表示在父级窗口中打开页面，_top表示将页面载入到包含该链接的窗口，取代任何当前在窗口中的页面。所以，一个完整的标记，看上去是这样的。 12.1.3 表单域 表单域是用户输入数据的地方。说得形象一些，就相当于是用户给程序下命令。当然，这种下命令的方式有许多，如最常见的文本域、下拉列表等。表单域可分为3个对象：input、textarea和select。其中大部分类型的表单形式都通过inp

7、ut属性来实现，textarea和select创建一种控制类型。12.2 通过表单展示不一样的页面 表单中包含多种不同样式不同功能的提交数据的方式。在许多页面中，浏览者不经意间已经不断地在使用表单的功能，如留言、设置自己的密码，或者是复选框、下拉列表等等。12.2.1 INPUT对象下的多种表单表现形式 通常，在页面中见到的大部分表单的形式都是通过输入标记input来实现的，一个简单的样式看上去可以是这样的， 12.2.1 INPUT对象下的多种表单表现形式 “name”表示这个输入数据的名字，它的作用也是为了让程序明白所提交的数据，如实例12-1中第32句。 这个输入的数据被命名为lengt

8、h，在第15句中： var length = document.loandata.length.value;12.2.1 INPUT对象下的多种表单表现形式 type属性表示所定义的是哪种类型的表单形式，这个属性有9个可选值，每个类型都有自己的功能，如下表所示。text 单行的文本框 password 将文本替换为“*”的文本框 checkbox 只能做二选一的是或否选择 radio 从多个选项中确定的一个文本框 submit 确定命令文本框 hidden 设定不可被浏览用户修改的数据 image 用图片表示的确定符号 file 设置文件上传 button 用来配合客户端脚本 12.2.2 T

9、EXT文本框的样式表单 text样式下的文本框是一个单行的文本框，比较常见于“登录”这样的使用。12.2.3 PASSWORD输入密码的样式表单 这是一个可以将文本使用保密形式展示出来的一个功能，最常见的莫过于使用在密码的设置。根据不同的浏览器，会使用点状形态或者星号符来表示，如果在实例12-2中表单部分代码写为： 输入用户名： 输入邮箱地址： 输入密码： 12.2.4 CHECKBOX复选框的样式表单 checkbox是一个复选框的创建方式，类似于一个开关的on和off选择，浏览器会在选择栏前面提供一个方形小框。如果选择符合的选项，小框中会添加小勾符号表示被选中，。12.2.5 RADIO单

10、选框的样式表单 radio样式有点类似于选择题，在一组选择中，选出唯一的一项选择，发送这列数据。使用的方法是给同一组选项定义为同一名字，但是通过value属性来辨识它们之间的不同。12.2.6 SUBMIT提交数据的样式表单 submit属性创建一个按钮，这个按钮的作用就是提交数据。当然准确点说，submit属性负责“提交”这样的一个动作。当单击提交按钮时，数据会发送到表单指定的地方。12.2.6 SUBMIT提交数据的样式表单 此外，和submit属性类似的还有一个reset属性，这是一个复位按钮。当被单击时，表单的内容会被重新设置，回到页面的初始状态。它的代码写起来和submit样式类似，

11、代码如下： 12.2.7 HIDDEN隐藏域的样式表单 hidden属性可以创建一个隐藏域，数据会被隐藏起来，因此用户是无法被操作的。 通常这种方式运用于动态页面制作，当填写好第一张表单时，处理表单的脚本程序可以动态地生成第二张表单。同时，其中包含了第一张表单的一些数据，比如，它们可能看上去是这样的： 12.2.8 IMAGE样式的表单 看上去，image样式的表单就像是在页面中放入图像，或者又有些类似于图像替换文本的技术，那不妨将其看作是用图像替换按钮的技术。当图像被点击时，数据一并被提交至服务器，代码如下： 12.2.8 IMAGE样式的表单 当单击图像时，其作用就相当于submit按钮。

12、不过，当表单数据被提交的同时，用户所单击的图像的位置坐标也会被发送，就像这样： image.x=23 image.y=59 不仅仅可以使用图像作为按钮，表单中还有一种触发事件的button表单。button样式顾名思义，它只是一个按钮，单个button按钮并不会提交任何数据，它的作用是用来调用前端页面，即客户端的脚本程序，如实例12-1的第43句用来调用一个简单计算的JavaScript脚本。 12.2.9 FILE上传文件的样式表单 file样式的表单允许用户上传自己的文件，这在论坛、社区类型的网站中经常遇到。比如用户上传自己的图像给服务器，用来改变用户在不同网站上的形象图片。12.3 TE

13、XTAREA对象的表单 textarea对象就像是input对象中text样式的表单，只不过是扩展过的text样式表单。它可以通过行（rows）属性和列（cols）属性来编辑文本域的大小，最常见于留言板、论坛中回帖时的文本框等。12.4 SELECT对象的表单 select对象的表单将创建出一个列表样式的表单，显示为一个下拉框，令用户可以方便地选择其中一个目录。通常在一些要求填写户口地区、生日等信息中，设计者可以给使用者准备好选项，令使用者填写信息时更方便。在代码的写法中，这里需要使用标签来定义可供选择的每一项。12.4 SELECT对象的表单 【深入学习】用户可以通过下拉目录框选择一个“地址

14、”，而这个数据则会被表单发送到服务器。此外，还可以使用value属性为每一个option指定不同的值。如果是这样，value设置的值将取代option的文本内容。12.4 SELECT对象的表单 【深入学习】此外，如果设计者不希望select对象以下拉框的形式展示出来，有一种方式可以将目录项以滚动条的框体样式表现出来。只需要在select标签中加入size属性，如size=6，则表示是一个能容纳6行文字的文本框。当目录项超出设置的行数，将出现滚动条。12.5 表单域集合 表单域的代码是由标签和标签组合而成。默认情况下，标签勾画出表单域的框形，标签的对象像标题一样出现在框形的左上角。代码看上去是这样的： 注册信息： 输入用户名： 12.6 案例：制作一则精美的由表单构成的页面 在前面的例子中，读者应该反复感受到了表单也是可以通过CSS样式表来修饰的这样一个信