0061 Form和提交的概念以及基本数据输入控件

上节课主要讲解了PHP代码和HTML代码进行配合实现动态数据网页的方法。

这节课开始讲解前端网页如何和后端数据进行交互来实现更复杂的功能。

Form标签的概念和作用

上节课编写了一个学生分数查询一览页面，需要根据用户输入的条件信息，点击查询按钮后，返回显示不同的数据。

先来假设实现一个最简单的功能：假如在姓名检索条件文本输入框里面输入一个"a"字符串，则返回5条数据记录，假如在输入一个"b"字符串，则返回3条数据记录，其它情况则返回1条数据记录。

为了实现这个最简单的功能，需要用到Form标签。

Form标签元素称之为HTML表单，可以用于收集用户输入信息。

在3-4节里面已经介绍过：

一般使用form标签来包含各种输入标签元素，并用于提交给后台程序。

form标签内部可以使用不同类型的表单元素来输入不同类型的数据。

例如输入元素、复选元素、单选元素、下拉框选择元素、提交按钮等等。

例如这样：

<form>

<input type="text" name="studentname">

</form>

这样就是符合规范定义的，input等标签必须位于form开始和结束标签之内才能被提交给后端程序。

后端程序一般是通过定义form的action属性值来进行定义的。

例如：

<form action="studentlist.php">

<input type="text" name="studentname">

</form>

这个form在提交的时候，会提交给后端程序studentlist.php进行处理。

那么假如这段代码本身就位于studentlist.php内，就是自己提交给自己进行处理，这也是符合规范的。当然了，提交给另外一个文件也是符合规范的。

那么，按下一个按钮之后，通过何种代码方式来触发提交的动作呢？

有2种办法，一种是采用默认的<input type="submit" value="查询"/>，当点击这个按钮的时候，就会自动提交到form对应的action属性的php文件来进行处理。

另一种方法是采用JavaScript来进行提交。由于之前的网页代码编写中，查询按钮是通过a标签来实现了，因此这里我们就来试试看采用JavaScript方法如何提交给后台程序。

JavaScript方式提交Form

首先修改studentlist.php文件，增加form标签，同时修改查询按钮的a标签的onclick方法：

studentlist.php修改如下：

然后创建另外一个文件studentlist_do.php文件：

然后刷新网页：

在姓名输入框里面输入字符串a，然后点击查询按钮：

可以看到浏览器的地址变成了studentlist_do.php了，并且显示了刚刚输入的字符串a信息，说明后端程序studentlist_do.php已经接收到了用户输入的信息了。

根据以上示例，可以看到，通过在JavaScript代码中使用document.forms[0].submit();的方式可以提交到form对应的action程序。

而在action程序中，使用PHP系统全局变量$_POST就可以获取到form中提交的对应的控件输入的值，匹配关系是根据输入控件的name属性来获取。例如<input type="text" name="studentname"/>，则通过$_POST["studentname"]就可以取得输入值。

text文本输入

重新在浏览器里面访问studentlist.php网页，然后在姓名文本输入框里面输入字符串b，点击查询按钮，可以看到如下结果：

也就是input的类型是text的时候，通过$_POST["控件name"]可以获取到用户输入的值。

接下来，试试看其它控件类型都是如何接收用户输入数据的。

注意重新打开浏览器网页的方式，最好是重新开一个Tab网页窗口，输入网页地址。这样可以避免一些浏览器缓存没有更新的问题。避免出现代码更新了但是浏览器网页显示却没有变化的情况发生。

radio单选按钮

性别是2个单选按钮，如果这2个input的type为radio类型的时候，假如name是一样的话，则用户只能点选其中的一个。

可以修改网页来试试看，在前面增加一个选项：全部。

studentlist.php修改如下：

studentlist_do.php修改如下：

刷新网页，点击单选按钮“男”：

然后点击单选按钮“女”：

可以看到只能选中一个。然后点击单选按钮“全部”：

可以看到只能选中一个。选中其中任意一个，就不能选中其它选项了。

来看看提交到后端程序是什么数值，点击查询按钮：

可以看到，接收数据是一个on。如果选择其它选项 ，同样接收数据也是on，这样就无法区分出选择了那个项目。

这是因为没有给每一个input设置value属性。

studentlist.php修改如下：

刷新网页，选择性别“男”，点击查询按钮：

可以看到接收到了输入的选项数据是"male"，表示单选项选择了“男”这个选项。

假如选择了选项“全部”后点击查查询按钮，那么接收到的数据就应该是"all"了。

checkbox多选按钮

来看看多选按钮接收到的数据是怎样的。

studentlist_do.php修改如下：

刷新网页，选择科目：语文和数学：

然后点击查询按钮：

可以看到，接收到的数据内容是：数学。

这不符合预期，由于checkbox是多选，所以可以有2种办法来获取每一个checkbox的值。

一个办法是给每一个checkbox设置不同的name，然后分别一个一个去获取每一个不同name的值。

另外一个办法，是给这组checkbox设置一样的name，但是在名称后面加上[]，这样PHP代码中获取的就是一个数组值。

studentlist.php修改如下：

studentlist_do.php修改如下：

刷新网页，选择科目：语文、数学和绘画，然后点击查询按钮：

可以看到每一个被选中的checkbox的值都获取到了。

select下拉框选择

再来看看下拉框选择项目是如何接收数据的。

studentlist_do.php修改如下：

刷新网页，选择分数段“75-90”：

然后点击查询按钮：

可以看到接收的数据就是对应的option的value的值。

接收不同类型参数的值，并返回不同的值

根据一览查询页面的功能要求，首次进入页面时，默认不显示任何查询数据，当点击了查询按钮之后，根据不同的查询条件，显示不同的数据，也就是说，点击查询按钮后，显示的网页和点击之前基本是同一个页面，如果做成2个php文件，则很不方便也不能重用页面代码，因此，可以将form的action属性修改为studentlist.php自己本身，这样就可以达到目的了。

将studentlist_do.php里面的代码剪切到studentlist.php里面的开始的位置，并修改action的值。

studentlist.php修改如下：

然后刷新网页，输入查询条件：

点击查询按钮：

可以看到网页显示了用户输入的数据值。

掌握了如何接收输入数据之后，可以开始编写真正的判断逻辑了。

考虑到页面上还会增加其它的功能，例如点击明细行进入其它页面，那么同样的一个action就需要判断是要执行哪种操作，就需要一个区分的标志，因此就需要在网页中增加一个隐藏的输入项目，通过设置这个隐藏项目的值为不同的值来告诉后端处理程序，要执行的是哪种操作。

在form中增加一个隐藏的输入项目使用如下方式：

<input type="hidden" name="fromtype" value=""/>

这个输入项目在浏览器中是看不到的项目，但是在$_POST变量里面是可以接收到它的value的。

在document.forms[0].submit();这句代码之前通过JavaScript来修改这个项目的value就可以达到设置不同的操作区分的目的了。

同时，将$alldatas变量的定义从后面移动到前面来，并修改为根据输入的姓名的值不同而返回不同的值。

studentlist.php修改如下：

刷新网页：

可以看到，网页显示没有查询数据，这是因为这个时候并没有提交，所以$_POST里面对应的fromtype的值为空，因此根据判断逻辑返回的数据为0条记录。

在姓名检索条件输入字符a，点击查询按钮：

可以看到，网页显示了5条数据。这是因为点击查询按钮时，调用了JavaScript函数onquery，函数里面设置了fromtype的输入项目的value为search，然后提交到自己本身php文件之后，通过判断逻辑得知fromtype的值时search，则认为是点击了查询按钮，因此执行查询逻辑，根据输入的值为a，返回5条数据记录。

在姓名检索条件输入字符b，点击查询按钮：

可以看到，网页显示了3条数据。逻辑和上面类似。

在姓名检索条件输入字符c，点击查询按钮：

可以看到，网页显示了1条数据。逻辑和上面类似。

PHP代码和HTML代码进行分离

之前在学习HTML和CSS的时候，很重要的一个习惯是将HTML代码和CSS代码进行分离；

包括后来学习了JavaScript之后，也要进来将HTML代码和JavaScript代码进行分离；

同样的，最好也将PHP代码和HTML代码进行分离。

当然，在具体需要通过PHP代码输出网页显示内容的那一部分不需要进行分离，但是根据fromtype的值执行不同逻辑的代码部分是可以进行分离的，这样可以让网页显示和业务逻辑代码进行分离，好处也很明显。

将从第一行开始的<?php 和?>之前的代码全部移动到studentlist_do.php文件里面：

studentlist_do.ph修改如下：

然后修改studentlist.php文件，导入studentlist_do.php文件，类似于Python代码的import一样。

studentlist.php修改如下：

刷新网页，重复前面的查询条件进行查询，可以看到结果是一样的。

require的功能就相当于是将对应的文件studentlist_do.php里面的内容全部搬到studentlist.php里面i 一样。

通过这样的方式就能实现逻辑和显示的代码分离了。

发现2个问题：

1.页面初始化时没有数据，表头的宽度不对。

2.输入的查询条件在点击查询按钮之后不能记住，比如，选择了科目，点击查询之后，不能看到刚刚选择的是哪些科目，这样条件和结果就匹配不上。

下节课将来解决这2个问题。