站长网 优化 0061Form和提交的概念以及基础数据输入控件

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

上节课主要讲解了PHP代码和HTML代码进行配合实现动态数据网页的方法。 这节课开始讲解前端网页如何和后端数据进行交互来实现更复杂的功能。 上节课编写了一个学生分数查询一览页面,需要根据用户输入的条件信息,点击查询按钮后,返回显示不同的数据。 先来

上节课主要讲解了PHP代码和HTML代码进行配合实现动态数据网页的方法。
 
这节课开始讲解前端网页如何和后端数据进行交互来实现更复杂的功能。
  
上节课编写了一个学生分数查询一览页面,需要根据用户输入的条件信息,点击查询按钮后,返回显示不同的数据。
 
先来假设实现一个最简单的功能:假如在姓名检索条件文本输入框里面输入一个"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"]就可以取得输入值。

本文来自网络,不代表站长网立场,转载请注明出处:https://www.tzzz.com.cn/html/jianzhan/youhua/2021/1218/40079.html

作者: dawei

【声明】:站长网内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。
联系我们

联系我们

0577-28828765

在线咨询: QQ交谈

邮箱: xwei067@foxmail.com

工作时间:周一至周五,9:00-17:30,节假日休息

返回顶部