1、任务四 表单数据的提交n主要知识点n表单数据的验证n系统数组$_POST和$_GET在接收表单数据中的应用n系统数组$_FILES在上传文件中的应用表单数据提交说明n动态网站中很重要的一个功能是完成用户信息的提交与处理，收集并提交用户信息则主要是通过表单界面来实现（注意，用表单界面提交数据并不是唯一的方法）。该功能的实现包括两个部分的代码设计：n静态的表单页面文件设计n服务器端获取表单数据的动态页面设计n上面两部分代码完成之后，需要将两者联合执行才能达到最终的要求。4.1.1 表单界面设计n表单知识点回顾n（1）设计表单界面时，必须要使用标记生成表单容器，在该容器中添加各种表单元素或非表单元素
2、，标记中当前需要设置的属性是method，取值可以是post和get两种。（2）表单与表格的嵌套应用格式 表单元素 （3）表单元素的生成n生成表单元素：文本框、密码框、单选按钮、复选框、提交和重置按钮都需要使用标记生成，在标记中设置type属性取值分别是text、password、radio、checkbox、submit和reset来生成相关的元素；n下拉列表需要使用和两对标记来生成，其中用于生成列表框，而用于生成各个选项；n文本区域则需要使用标记生成创建图示表单界面（保存为4-1.html）表格要求：n10行三列表格，第一行单元格合并，内容居中n表格第九行高度65px，其余行的高度都是25
3、pxn表格第一列和第三列宽度都是150px，第二列宽度是300pxn使用样式设置表格所有单元格字号为10pt，然后设置第一个行的单元格字号20pt、加粗、居中页面设计要求n为了能够使用脚本获取各个元素的取值来完成表单数据验证，要求为每个需要提交数据的表单元素设置id属性；另外，为了能够在服务器端获取表单元素提交的数据，又需要为相应表单元素设置name属性，通常，为了减少将两个属性值弄混的麻烦，建议大家直接将各个元素中这两个属性设置为相同的取值即可。n一句话：表单元素通常都需要设置name和id属性，两者取值相同即可表单元素要求-1n名字文本框的name和id属性取值都是uname；n性别单选按
4、钮组的name是sex，选中“男”之后，提交的数据是“男”，选中“女”之后提交的数据是“女”；n思考：使用哪个属性设置单选按钮提交的数据？n年龄文本框的name和id属性取值都是age；n个人密码框的name和id都是psd1；n确认密码框的name和id都是psd2；使用标记中的value属性设置单选按钮提交的数据表单元素要求-2n爱好复选框组设置的name是like，选中各个复选框之后提交的数据分别是看书、足球、音乐和爬山。n颜色下拉列表框设置的name和id都是color；n个人介绍文本区域设置的name和id都是jieshao。n表单元素的样式要求为：文本框、密码框、下拉列表框的宽度定
5、义为280px，高度定义为20px；文本区域的宽度定义为280px，高度为60pxn思考问题：n标记中width=280 height=20是否起作用？n上述样式采用何种选择符定义比较方便？4.1.2 表单数据验证n运行表单界面提交数据，观察效果并思考问题：n在表单界面中输入不符合字符个数要求的姓名”liuli”，点击提交，能否提交到服务器端？这样是否合理？n要如何阻止非法数据提交到服务器端？n表单数据验证在服务器端进行还是在浏览器端进行？表单数据验证要求对4-1.html页面文件中的数据需要进行的验证如下：n（1）要求姓名必须在6到20个字母之间（此处只进行字符个数判断，不需判断输入的字符是
6、否是英文字母）；n（2）要求年龄数据要在0100之间；n（3）个人密码需要在610个字符之间；n（4）两次输入的密码必须相同；n（5）个人介绍文本区域不能为空。n上面每个部分只要不符合要求，就直接使用javascript脚本中的alert()函数弹出一个消息框显示相应的错误提示信息即可。需要用脚本代码解决的基本问题n说明：javascript脚本中的变量使用var定义，不需使用$符号开始，例如 var len定义变量lenn1.如何使用脚本代码获取表单元素uname？document.getElementById(uname)2.如何使用脚本代码获取表单元素uname的value值？docum
7、ent.getElementById(uname).valuen3.若str=student;，如何获取$str的长度？length属性的应用：str.length创建脚本文件4-1.jsn完成用户名合法性验证n创建函数validate()，在函数中完成如下功能：n获取用户名信息，使用变量uname保存n获取变量uname中串的长度，使用变量len保存n判断len值的大小，若低于6或者超出20，则使用alert()设置弹出消息，并返回false，表示函数执行到此结束脚本文件的引用与函数的调用n在4-1.html文件首部使用引用脚本文件n此处设计的脚本函数validate()需要在点击submi
8、t提交按钮之后调用，点击该按钮后，将会触发标记中的onsubmit事件；在标记中使用onsubmit=return validate()调用函数n问题：n此处return的作用如何？脚本函数全部功能的实现n在validate()函数中继续完善年龄、密码和个人介绍信息的数据正确性验证过程。n要求年龄数据要在0100之间；n个人密码需要在610个字符之间；n两次输入的密码必须相同；n个人介绍文本区域不能为空。思考问题n每个模块中的“return false”的作用是什么？若是去掉，在相应元素中输入不符合要求的数据之后结果将会如何？表单数据验证函数的完整代码4.1.3 使用HTML5新技术完成数据验
9、证n对4-1.html页面文件中的数据需要进行的验证如下：n（1）要求姓名必须在6到20个字母之间；n（2）要求年龄不能为空，并且数据要在0100之间；n（3）个人密码需要在610个字符之间；n（4）两次输入的密码必须相同；（仍旧要使用js函数实现）n（5）个人介绍文本区域不能为空。完成用户名的合法性验证n对用户名的要求是6到20个字母，可以使用HTML5中表单元素新属性pattern定义正则表达式完成n在用户名文本框中添加下面代码npattern=a-zA-Z6,20n上面代码中a-zA-Z表示可以出现的字符只有大小写字母，6,20表示最少6个，最多20个n用户输入数据点击提交时自动完成验证
10、完成年龄的合法性验证n对年龄的要求是要求年龄不能为空，并且数据要在0100之间，使用HTML5中新型表单输入元素number结合新属性required可以实现n实现方案：n将原来的年龄框type属性取值由text文本框换做number数字框，设置最小值min为0，最大值max为100n另外使用属性required=required设置不允许为空n用户输入数据点击提交时自动完成验证完成密码的合法性验证n对密码的要求是个人密码需要在610个字符之间；n使用正则表达式属性pattern完成，在密码框中增加如下代码npattern=a-zA-Z0-9!#$%&*6,10 n密码中可以使用特殊字符（根据
11、需要可以增加）完成个人介绍的合法性验证n对个人介绍的要求是不允许为空n在个人介绍文本区域中使用required属性即可4.2 表单数据提交n用户在表单界面中输入数据并进行合法性验证之后，必须要将数据提交给服务器，由服务器对这些数据做进一步的处理，例如，将注册的数据插入到数据库中，或者从数据库中查询登录的数据，或者查询用户需要的其他信息等等。n需要解决的关键问题（重点知识）：n数据提交到服务器后存储在哪里？n如何在服务器端获取这些数据？4.2.1 系统内置数组$_POST和$_GETn服务器端将根据表单标记中method属性的取值确定获取数据的方法n若method取值为post，则使用系统数组$
12、_POST$_POST接收表单数据；若method取值为get，则使用系统数组$_GET$_GET接收表单数据，即一个表单所提交的数据总是以一个数组的方式保存在服务器中。n思考问题：n数组$_POST和$_GET的键名如何？如何访问并获取其中的数组元素？访问系统数组$_POST或者$_GETn$_POST和$_GET都是关联数组，都需要通过键名来访问数组元素，在处理表单数据时，它们所使用的键名通常是表单元素name属性的取值，例如，若文本框中name=uname，则使用$_POSTuname可以获取到该文本框提交到服务器端的数据。使用echo$_POSTuname或者echo$_POSTuna
13、me或者echo$_POSTuname即可输出用户提交的名字n强调键名对引号的要求若数组元素未放入引号中，则键名必须使用单引号或者双引号定界；若数组元素放在双引号定界中，则键名不需要引号观察效果并思考问题n在输出结果中，复选框组“你的兴趣爱好”部分显示的结果是什么？说明什么问题？如何解决这一问题即在服务器端如何获取和保存复选框组提交的数据？4.2.2 复选框组数据的提交n复选框组提交的数据在服务器端以一个数组的形式保存，4-1.html中因为表单form标记中method属性取值为post，复选框组名称为like，在服务器端使用$_POSTlike接收并保存复选框组提交的数据，$_POSTli
14、ke则以一个数组的形式存在n思考问题：n数组元素的个数如何确定？n数组元素的类型是什么？数组元素的个数取决于用户选择的复选框的个数，而不是复选框组中包含的复选框的个数该数组是一个索引数组，索引值从0开始，使用$_POSTlike0可以获取到用户选择的第一个复选框所提交的数据，其它则以此类推。复选框组数据的提交n例如，若用户选择的是“音乐”和“爬山”两项，则数组$_POSTlike有两个元素，元素$_POSTlike0的值是“音乐”，元素$_POSTlike1的值是“爬山”；n再如，若用户选择的是“看书”、“音乐”和“爬山”三项，则数组$_POSTlike有三个元素，元素$_POSTlike0的
15、值是“看书”，元素$_POSTlike1的值是“音乐”，元素$_POSTlike2的值是“爬山”；思考问题n若用户选择了“看书”和“爬山”两个选项，如何做到将两个选项数据使用变量$like保存为“看书 爬山”？n若用户选择了“看书”、“音乐”和“爬山”三个选项，又如何做到将三个选项数据使用变量$like保存为“看书 音乐 爬山”？n说明：使用变量$like以上面形式保存选项数据的目的是可以直接使用 echo$like;输出复选框组提交的数据函数implode()的应用n为了方便输出和保存，通常要将复选框组提交的多个数据合并到一个变量中，例如用户选择了看书、音乐和爬山，则设置变量$like=看书
16、 音乐 爬山n可使用函数implode()来完成，格式如下：nimplode(参数1，参数2):n参数1：指定在数组各个元素值之间的间隔字符n参数2：数组名称n使用指定的间隔字符将指定数组的多个元素的值连接在一起，返回值为包含了所有元素及位于元素与元素之间的分割符的字符串函数implode()示例n$like=implode(,$_POSTlike);n将数组$_POSTlike中各个元素的值使用空格字符间隔连接成一个长串4.2.3 获取并处理表单数据创建4-1.php，接收并输出下图中数据思考问题：n问题1：能否独立运行4-1.php文件？为什么？该文件需要在何时运行？n问题2：如何做到点击
17、页面4-1.html中的“提交”按钮时能够运行4-1.php文件？1.4-1.php文件不能独立运行2.该文件中使用的数组元素键名都是表单界面元素name属性的值，独立运行时，这些元素不存在，键名不可使用3.需要在运行4-1.html文件输入数据并点击提交按钮之后才能运算4-1.php文件建立4-1.html和4-1.php文件之间的关联n建立关联的方法：在4-1.html文件的标记中增加action=4-1.php即可。n表单标记中的action属性的作用是设置一个服务器端的脚本文件，此处是php 文件，该文件用于获取并处理当前表单提交的数据，处理的方式是可以直接在浏览器中输出，也可以将其存
18、储到数据库或其他文件中以备后用n问题演示与思考：n使用在文件夹中双击运行4-1.html文件，输入数据并提交，结果如何？为什么？4.2.4 使用isset()函数解决单选按钮和复选框的问题n观察效果：运行4-1.html页面文件时，若是用户没有选择性别就提交数据，会出现什么提示？若是没有选择兴趣爱好就提交数据，又会出现什么提示？n若是用户没有选择性别，会出现下面的提示信息：nNotice:Undefined index:sex in E:apachehtdocsexam4-14-1.php on line 4n若是用户没有选择兴趣爱好，则会出现下面的提示信息：nNotice:Undefined
19、 index:like in E:apachehtdocsexam4-14-1.php on line 8 Warning:implode():Invalid arguments passed in E:apachehtdocsexam4-14-1.php on line 8产生问题的原因及解决方案n产生问题的原因是：单选按钮或者复选框都属于组元素，若是没有选择选项，相当于该组不存在，即$_POSTsex和$_POSTlike不存在，所以提示用户没有定义索引sex或者like。n解决方案是：使用这样的组元素之前，需要先判断一下该组是否存在，实现这一功能，要使用的函数是isset()。isset
20、()函数的功能、格式和返回值nisset()函数专门用于检测某个元素是否设置，函数格式如下：nbool isset(参数)n参数可以是一个普通变量，也可以是一个数组元素，若是变量或数组元素存在，则返回真值，否则返回假值。n思考问题：n代码isset($_POSTsex)的作用是什么？判断数组元素$_POSTsex是否存在，存在（即用户选择了选项）就返回真值，否则返回假值使用isset()函数解决问题n使用isset()函数时因其返回值为真或假的特点，通常会将其作为if语句的条件，根据结果的真假来确定要进行的处理操作n在4-1.php文件中增加条件判断结构：若用户选择了性别，就输出性别结果，否则
21、输出“你没有选择性别”；若用户选择了兴趣爱好，就将所有兴趣爱好结果合并到一个变量中再输出，否则输出“你没有选择兴趣爱好”。4.3 文件上传功能实现n你在哪些网站或应用程序中上传过文件？n文件上传功能需要解决的问题：n浏览器端（表单中）如何增加上传文件的功能n服务器端如何获取上传文件的信息并按指定位置保存上传文件浏览器端的设置n第一，需要在表单标记中设置Enctype属性值为multipart/form-data，只有设置为multipart/form-data编码格式，才能完成传递文件数据；另外完成文件上传时，表单中method属性取值需要设置为post。n第二，action属性必须指定能够接
22、收并处理上传文件的PHP文件。n第三，必须在表单界面中增加文件域元素，使用标记的type属性值 file来生成文件域元素，该元素需要设置name属性的取值。例题n创建页面文件up.html，设计如图所示表单界面，设文件域元素名称为file1代码如图所示4.3.2 服务器端的功能设置n服务器端获取上传文件的信息n上传文件包括文件名、文件类型、文件大小、存储位置等相关信息n在服务器端需要通过系统数组$_FILES获取这些信息n问题导入：n作为一个系统数组，$_FILES的键名如何？系统数组$_FILES的应用n数组的键名n系统内置数组$_FILES是一个二维关联数组，第一个维度的键名是表单界面中文
23、件域元素name属性的取值，若是存在多个文件域元素，则它们的name属性取值都各不相同；第二个维度的键名则是由系统提供的固定键名，常用的有name、type、size、tmp_name和error。$_FILES数组第二个键名的用法n假设文件域元素name属性取值为file1，则第二个键名的用法和说明如下：n$_FILESfile1name：表示被上传文件的名称；n$_FILESfile1type：表示被上传文件的类型；n$_FILESfile1size：表示被上传文件的大小，以字节计；n$_FILESfile1tmp_name：表示存储在服务器的文件的临时副本的名称；n$_FILESfile
24、1error：表示由文件上传导致的错误代码。将上传文件的大小使用kB表示n函数round()的应用n$size=round($_FILESf1size/1024,2).”kB”n函数round()对第一个参数指定的数据进行四舍五入，保留的小数位数由第二个参数指定例题n创建up.php文件，获取up.html中文件域元素file1所上传的文件信息，并输出，结果如图所示代码如图所示思考问题n根据前面观察的效果，上传的文件默认存放在哪里？文件名称如何？n如何将用户上传的文件使用指定名称保存在指定位置？上传的文件，默认存放在系统盘符下的存放临时文件的文件夹中，文件的名称也采用了临时名称形式。使用函数m
25、ove_uploaded_file()完成函数move_uploaded_file()n格式：move_uploaded_file(参数1,参数2)n作用是：将参数1指定的临时文件存储到参数2中指定的位置并更换为参数2中指定的文件名称n参数1通常是$_FILESfiletmp_namen参数2中“位置”使用一个文件夹来指定，文件名称则使用$_FILESfilename得到。n将上传文件保存到指定位置，相当于对文件做了移动和重命名工作。例题n修改up.php文件，在最后增加代码，将上传的文件保存到upload文件夹中（必须要先在up.html和up.php文件所在位置创建文件夹upload）n代
26、码如图所示课堂练习n在4-1.html页面中“个人介绍”行下面增加如图所示的界面效果，写出相应的界面代码（文件域元素名称为tximg），之后修改4-1.php文件，增加代码获取上传的头像文件信息，并将头像显示在浏览器中（效果如图所示）。4.3.5 多文件上传n使用HTML5表单元素新属性multiple设置允许多文件上传n在服务器端实现多文件的接收与存储multiple属性nmultiple 属性规定输入域中可选择多个值。n在中使用该属性，可以方便实现多个文件的上传功能，要求为：n文件域元素name属性取值必须带有n同时选择的多个附件要求位于同一个文件夹中，否则无法实现多选n选择多个文件时，可以按住shift连续多选，也可以按住ctrl任意多选服务器端接收并保存多个文件n多文件上传时，$_FILESfile1name获取到的是所上传的所有文件的名称形成的数组，而$_FILESfile1tmp_name获取到的是所上传的所有文件的临时存储信息形成的数组。n数组元素的个数通过函数count()来获取。n$_FILESfile1name0得到的是上传的第一个文件的名称。n对所上传文件进行处理时需要通过循环来完成。修改up.php文件n将上传的所有文件保存到与文件up.php同级的文件夹upload中；n输出所有文件的名称。
