PHP网站开发项目式教程（微课版）（第2版）任务4 提交保单数据

PHP网站开发项目式教程（微课版）（第2版）任务4提交表单数据任务4-1设计表单界面及验证表单数据

需要解决的核心问题表单界面设计中复选框元素name属性的取值格式是怎样的？使用JavaScript脚本验证表单数据的目的是什么？调用脚本函数时，函数名称前面的return关键字的作用是什么？使用HTML5中的pattern属性指定的针对姓名和密码验证的正则表达式分别是什么？4.1.1表单界面设计1．基础知识及要求说明

设计表单界面时，必须使用<form>…</form>标签生成表单容器，还需在该容器中添加各种表单元素或非表单元素。<form>标签中当前需要设置的属性是method，其取值可以是post和get。

设计表单界面时，经常需要使用表格对表单中的各种元素以及文字标签进行规则的布局设计，表单标签与表格标签的嵌套关系如下。<form…><table…><tr><td>表单元素</td></tr></table></form>

即表单<form>与</form>标签必须放在表格<table>…</table>标签的外面，表单各个元素标签必须放在表格单元格标签<td>…</td>内部。

生成表单元素文本框、密码框、单选按钮、复选框、提交和重置按钮都需要使用<input>标签，可在<input>标签中设置type属性的值分别为text、password、radio、checkbox、submit和reset来生成相关的元素。

下拉列表需要使用<select>…</select>和<option>…</option>两对标签来生成，其中<select>…</select>用于生成列表框，<option>…</option>用于生成各个选项。文本区域需要使用<textarea>…</textarea>标签来生成。

创建页面文件4-1.html，在其中设计图4-1所示的表单界面。图4-1

表单界面2．页面元素的设计要求

表单界面对姓名、年龄、个人密码、确认密码和个人介绍等数据的输入提出了一些要求，为了保证用户输入的内容能够满足这些要求，需要验证表单数据的合法性；为了能够使用脚本获取各个元素的取值并对这些值进行合法性验证，要求为每个需要提交数据的表单元素设置id属性；另外，为了能够在服务器端获取表单元素提交的数据，需要为相应表单元素设置name属性。通常，为了避免将两个属性值弄混而造成麻烦，建议直接将各个元素的这两个属性设置为相同的取值。（1）将“姓名”文本框的name和id属性取值均设为uname。（2）将“性别”单选按钮组的name属性取值设为sex。用户选中“男”之后，提交的数据是“男”，选中“女”之后提交的数据是“女”。（3）将“年龄”文本框的name和id属性取值均设为age。（4）将“个人密码”输入框的name和id属性取值均设为psd1。（5）将“确认密码”输入框的name和id属性取值均设为psd2。（6）将“你的爱好”复选框组的name属性取值设为like[]（此处采用数组格式设置复选框组的名称。用户选中各个复选框之后提交的数据分别是看书、足球、音乐和爬山。（7）将“你最喜欢的颜色”下拉列表的name和id属性取值均设为color。（8）将“个人介绍”文本区域的name和id属性取值均设为jieshao。

表单元素的样式要求为：文本框、密码框、下拉列表的宽度为280px，高度为20px；文本区域的宽度为280px，高度为60px。4.1.2表单数据验证

表单数据在提交之前通常需要验证，目的是保证提交的数据在格式和组成上都是符合要求的，该验证过程需要在浏览器端执行脚本代码来完成。1．数据验证要求（1）姓名必须为6～20个字母（此处只判断字符数，不需要判断输入的字符是否是英文字母）。（2）年龄数据为0～100。（3）个人密码为6～10个字符。（4）两次输入的密码必须相同。（5）个人介绍文本区域内容不能为空。

只要不符合上述的任意一项要求，就直接使用JavaScript脚本中的alert()函数弹出一个消息框显示相应的错误提示信息。2．脚本代码3．脚本函数的调用（1）关联脚本文件。

在页面文件4-1.html中的</head>结束标签之前，添加代码<scripttype="text/JavaScript"src="4-1.js"></script>，即可将脚本文件关联到该页面文件中。（2）函数validate()的调用。

此处设计的脚本函数validate()需要在用户单击“提交”按钮之后调用，用户单击该按钮时，将触发<form>标签中的submit事件，因此需要修改<form>标签，在其中增加onsubmit="returnvalidate()"，使用事件属性onsubmit完成对函数的调用。

调用函数时，函数名前面的return的作用说明：若是输入的表单数据不符合要求，则在弹出消息框显示相应的提示信息之后，必须将页面运行过程停留在当前界面下，而不要把不符合要求的数据提交到服务器端，此处return的作用是当数据不符合要求时，通过返回的false值阻止数据提交到服务器端。

例如，输入不符合要求的姓名并提交之后，弹出消息框显示提示信息，效果如图4-2所示。

用户单击消息框中的“确定”按钮关闭消息框之后，系统将停留在当前页面等待用户输入符合要求的数据，而不会将不符合要求的数据提交给服务器。图4-2

输入不符合要求的姓名并提交后弹出消息框4.1.3使用HTML5新属性完成数据验证

HTML5中的表单元素新增了几个属性，这几个属性专门用于验证数据的合法性，包括正则表达式的应用、数字取值范围限制、是否允许为空的判断等。使用HTML5表单元素新属性和使用JavaScript脚本函数验证数据合法性各有优势，用户根据自己的需要选用即可。

下面使用HTML5表单元素新属性验证姓名、年龄和密码的数据。1．姓名验证

要求姓名为6～20个字母，可以使用HTML5中的表单元素新属性pattern定义正则表达式来实现。

在姓名文本框对应的代码中添加下面的代码。pattern="[a-zA-Z]{6,20}"

用户输入内容并单击“提交”按钮时，浏览器会验证数据的合法性。若数据不符合要求，则系统不允许将数据提交给服务器，效果如图4-3所示。图4-3

输入不符合要求的姓名并提交后弹出的提示信息2．年龄验证

对年龄的要求是不能为空，并且数据取值范围为0～100，可以使用HTML5中的新增表单输入元素number结合新属性required来实现。

实现方案如下。

将原来年龄对应的type="text"文本框换为type="number"数字框，设置最小值min为0，最大值max为100。

另外使用属性required="required"设置内容不允许为空。

代码如下。<inputtype="number"name="age"id="age"min="0"max="100"required="required"/>。

当已经输入符合要求的姓名但是未输入年龄数据时，单击“提交”按钮，效果如图4-4所示。图4-4

未输入年龄提交表单时弹出的提示信息3．密码验证

要求密码为6～10个字符。

可以使用正则表达式属性pattern对密码进行合法性验证，在密码框对应的代码中增加代码pattern="[a-zA-Z0-9!@#$%^&*]{6,10}"，得到完整代码<inputtype="password"name="psd1"id="psd1"pattern="[a-zA-Z0-9!@#$%^&*]{6,10}"/>。其中，[a-zA-Z0-9!@#$%^&*]表示密码允许使用的各种字符，开发人员可以根据需要增加其他字符。任务4-2提交表单数据

需要解决的核心问题表单数据提交之后会存储在哪里？服务器如何获取这些数据？复选框组数据提交到服务器之后会以怎样的形式存在？函数implode()的作用是什么？如何使用？函数isset()的作用是什么？如何使用？

表单界面填写的数据在经过数据的合法性验证之后，需要提交到服务器端进行处理。例如，当用户在4-1.html页面中输入正确的数据并提交之后，服务器端只会对这些数据进行简单的输出，效果如图4-5所示。图4-5

4-1.html提交数据之后显示的信息界面4.2.1系统数组$_POST和$_GET

系统数组$_POST和$_GET又称为超全局变量，主要用于接收表单提交的数据。

表单标签<form>中的属性method有post和get两种取值，若method="post"，则表单提交给服务器的数据将存放到系统数组$_POST中；若method="get"，则表单提交给服务器的数据将存放到系统数组$_GET中，即同一个表单提交的所有数据总是以数组的形式保存在服务器中。

$_POST和$_GET都是关联数组，都需要通过键名来访问数组元素，在处理表单数据时，它们使用的键名通常是表单元素name属性的取值。例如，若文本框对应的代码中name="uname"，则使用$_POST['uname']可以获取该文本框提交到服务器端的数据。4.2.2复选框组数据的提交1．复选框组提交的数据说明

复选框组的数据被提交到服务器端后仍旧是数组的形式。例如，若method="post"，“你的爱好”复选框组like[]的数据提交到系统数组$_POST中，则服务器端将使用$_POST['like']接收并保存该组提交的数据。$_POST['like']以数组的形式存在，数组元素的个数取决于用户选择的复选框的个数，而不是复选框组包含的复选框的个数，该数组是索引数组，索引从0开始。使用$_POST['like'][0]可以获取用户选择的第一个复选框所提交的数据，其他以此类推。2．函数implode()的应用

为了方便输出和保存，通常要将复选框组提交的多个数据合并到一个变量中，例如，用户选择了“看书”“音乐”“爬山”，则设置变量$like="看书音乐爬山"。

可使用函数implode()来完成，函数格式如下。implode(参数1,参数2)参数1，指定数组各个元素值之间的间隔符。参数2，数组名称。

函数作用：使用指定的间隔符将指定数组的多个元素的值连接在一起。4.2.3获取并处理表单数据1．创建4-1．php文件2．建立4-1．html和4-1．php文件之间的关联

建立关联的方法是，在4-1.html文件的<form>标签中增加action="4-1.php"。

表单标签中的action属性的作用是设置一个服务器端的脚本文件，本书使用的都是PHP文件，该文件用于获取并处理当前表单提交的数据，处理的方式是直接在浏览器中输出，也可以将其存储到数据库或其他文件中备用。4.2.4使用isset()函数解决单选按钮和复选框的问题1．问题的产生

运行4-1.html页面文件时，若是用户没有选择性别，则会出现下面的提示信息。Notice:Undefinedindex:sexinE:\apache\htdocs\exam4-1\4-1.phponline4

提示信息表示“没有定义的索引like”，之后导致在imPlode()函数中出现无效的参数。

这是因为单选按钮或者复选框都属于组元素，没有选择选项则没有任何数据提交给服务器，相当于该组不存在，所以在从这样的组元素中获取数据之前，需要先判断该组是否存在，实现这一功能的函数是isset()。2．isset()函数

PHP提供了isset()函数用于检测某个元素是否存在，函数格式如下。boolisset(参数)

参数可以是普通变量，也可以是数组元素，若变量或数组元素存在，则返回true，否则返回false。3．解决问题的方案与代码

解决方案是：在输出性别或者兴趣爱好之前，先判断是否设置了数组，即数组是否存在，若存在则输出，否则不输出。4.2.5使用表单数据验证解决单选按钮和复选框的问题

允许用户不选择单选按钮组和复选框组中的选项，在数据提交给服务器之后，由服务器使用isset()进行判断与处理。

如果要求用户在提交数据时必须选择单选按钮组中的选项，以确保服务器端的$_POST['sex']是存在的，则要使用表单数据验证功能来实现。任务4-3实现文件上传功能

需要解决的核心问题实现文件上传时，表单中需要进行的基本设置有哪些？系统数组$_FILES是几维数组？使用的键名有哪几个？如何将上传到服务器端的文件按照指定名称存储到指定位置？实现多文件上传时，如何获取上传的所有文件的信息？如何将上传文件名中的汉字的编码由UTF-8转换为GB2312？如何设置php.ini文件以实现大文件上传功能？

在很多动态网站中都需要使用上传文件功能，本任务讲解实现单文件和多文件上传时，在浏览器端和服务器端需要完成的相关操作。4.3.1浏览器端的功能设置

浏览器端必须能够上传文件时，浏览器端需要进行以下几方面的设置。（1）在表单标签<form>中设置enctype属性的值为multipart/

form-data，enctype="multipart/form-data"的作用是设置表单的MIME（MultipurposeInternetMailExtensions，多用途互联网邮件扩展）编码。在默认情况下，这个编码格式是application/x-www-form-urlencoded，不能用于上传文件。只有设置multipart/

form-data编码格式，才能完成文件数据的传递。另外完成文件上传时，表单中method属性的取值需要设置为post。（2）对于action属性，必须指定能够接收并处理上传文件的PHP文件。（3）必须在表单界面中增加文件域元素，使用<input>标签的type属性值file来生成文件域元素，对于该元素需要设置name属性的取值。4.3.2服务器端的功能设置1．系统数组$_FILES

从浏览器端将文件上传到服务器端之后，该文件默认被存放在系统盘符下的存放临时文件的文件夹中，文件的名称也采用了临时名称。需要从系统数组$_FILES中获取上传文件的名称、类型、大小、临时位置、临时名称等相关信息，从而进一步将上传的文件以指定的存储位置和存储名称存储。

系统数组$_FILES是一个二维关联数组，第一个维度的键名是表单界面中文件域元素name属性的取值，若是存在多个文件域元素，则它们的name属性的取值各不相同；第二个维度的键名是由系统提供的固定键名，常用的有name、type、size、tmp_name和error。

假设文件域元素name属性的取值为file1，则系统数组$_FILES的各个元素的用法和说明如下。$_FILES["file1"]["name"]：表示被上传文件的名称。$_FILES["file1"]["type"]：表示被上传文件的类型。$_FILES["file1"]["size"]：表示被上传文件的大小，以字节计。$_FILES["file1"]["tmp_name"]：表示存储在服务器中的临时文件的位置及名称。$_FILES["file1"]["error"]：表示由文件上传导致的错误代码。2．函数move_uploaded_file()

文件上传之后会以临时文件名为名保存在临时文件夹中，需要将其移至指定的位置按照指定的名称来保存，实现这一功能要使用函数move_uploaded_file()。函数格式：move_uploaded_file(参数1,参数2)

参数说明如下。

参数1需要使用$_FILES["file1"]["tmp_name"]的内容，表示存储在服务器上的文件的临时副本信息。

参数2通常使用“文件夹/文件名”的形式指定文件上传之后的存储位置及存储名称，其中，文件夹最好创建在当前页面文件所在的位置，文件名则可使用$_FILES["file1"]["name"]来获取。4.3.3简单文件上传实例1．创建HTML文件

编写文件up.html，设计文件上传界面，界面只需要包含表单的一个文件域元素、一个submit类型的按钮和一个reset类型的按钮即可。界面效果如图4-6所示。图4-6

上传文件界面2．创建PHP文件

编写文件up.php，在页面中显示上传文件的名称、文件的大小（以KB表示）、文件的类型、文件的临时存储位置及名称等内容。界面效果如图4-7所示。

将被上传的文件保存到文件夹upload中，该文件夹必须与文件up.php在同一个文件夹内。图4-7

显示上传文件信息的界面4.3.4实现上传并显示头像功能

在4-1.html文件中增加上传并显示头像的功能。1．修改4-1．html文件

在页面内容“个人介绍”行下面增加一行，效果如图4-8所示。

修改<form>标签，增加允许上传文件的属性及取值：enctype="multipart/form-data"。请上传头像文件：

浏览…

未选择文件

必须上传头像文件图4-8

上传头像文件部分的页面内容2．修改4-1．php文件

在输出个人介绍信息之后增加代码来完成如下任务。（1）获取上传文件的名称。（2）获取上传文件的副本信息。（3）将上传的文件存储到当前页面文件同位置的文件夹upload中（实际操作时需要先创建该文件夹）。（4）显示上传的图片文件的名称信息。（5）显示上传的图片文件的内容。

运行修改之后的4-1.html文件，输入相应内容，单击“提交”按钮之后得到图4-9所示的运行效果。图4-9

显示上传头像图片之后的运行效果4.3.5多文件上传1．multiple属性的应用

multiple属性是HTML5为表单元素提供的新属性，该属性为布尔型，添加之后规定输入域中可选择多个值。

修改创建的up.html文件，在文件域元素标签中增加属性multiple，另外实现多文件上传时，文件域元素name属性的值需要带有数组标志[]，即要将文件域元素name属性的值由原来的f1改为f1[]。

在运行过程中，选择多个文件的说明如下。

同时选择的多个文件要求位于同一个文件夹中，否则无法实现多选。

选择多个文件时，可以按住【Shift】键连续多选，也可以按住【Ctrl】键任意多选，或者直接拖曳鼠标进行多选。2．服务器端接收并保存多个文件

多文件上传时，$_FILES["f1"]["name"]获取到的是由上传的所有文件的名称组成的数组，$_FILES["f1"]["type"]获取到的是由上传的所有文件的类型组成的数组，$_FILES["f1"]["tmp_name"]获取到的是由上传的所有文件的临时存储信息组成的数组，$_FILES["f1"]["size"]获取到的是由上传的所有文件的大小组成的数组。

数组元素的个数，也就是一次性上传文件的个数，可以通过函数count()获取。

数组元素$_FILES["f1"]["name"]