PHP与Web页面的交互示例详解一

2023-04-12 原文

前言

这篇笔记记录的是Web表单的相关操作，Web表单主要用来在网页中发送数据到服务器。比如在日常开发中，提交注册时需要提交表单，表单从客户端传送到服务器，经过服务器处理后，再将用户所需要的信息传递回客户端，进而实现PHP与Web表单的交互。

表单

使用<form>元素，并在其中插入相关的表单元素，即可创建一个表单。

表单结构：

<form name="form_name" method="method" action="url" enctype="value" target="target_win">
…   //省略插入的表单元素
</form >

form标记的属性如下表：

form标记的属性	说明
name	表单名称
method	设置表单的提交方式，GET或者POST方法
action	纸箱处理该表单页面的URL
enctype	设置表单内容的编码方式
target	设置返回信息的显示方式

表单（form）由表单元素组成。常用的表单元素有以下几种标记：输入域标记<input>、选择域标记<select>和<option>、文字域标记<textarea>等。

输入域标记<input>

输入域标记<input>是表单中最常用的标记之一。常用的文本框、按钮、单选按钮、复选框等构成了一个完整的表单。
语法格式如下：

<form>
<input name="file_name" type="type_name">
</form>

参数name是指输入域的名称，参数type是指输入域的类型。在<input type="">标记中一共提供了10种类型的输入区域，用户所选择使用的类型由type属性决定。

下面举几个type属性例子:

1、text

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"
 />
<title>PHP语言基础</title>

</head>
<body>
<form action="index.php" method="post" name="form1" enctype="multipart/form-data">
 <tr bgcolor="#FFCC33">
 <td width="103" height="25" align="right">文本框：</td>
 <td height="25" align="left"><input name="user" type="text" value="Bill" id="user" size="20" maxlength="100"></td>
 </tr>
</form>
<?php
header("Content-Type:text/html; charset=gb2312");
?>
</body>
</html>

运行效果：

添加一个文本框

name为文本框的名称，value是文本框的默认值，size为文本框的宽度，maxlength为文本框的最大输入字符数，可以通过id获取文本框的值。

2、password

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"
 />
<title>PHP语言基础</title>

</head>
<body>
<form action="index.php" method="post" name="form1" enctype="multipart/form-data">
 <tr bgcolor="#FFCC33">
 <td width="103" height="25" align="right">密码域：</td>
 <td height="25" align="left">
 <input name="pwd" type="password" value="1234567" id="password" size="20" maxlength="100">
 </td>
 </tr>
</form>
<?php
header("Content-Type:text/html; charset=gb2312");
?>
</body>
</html>

运行结果：

添加一个秘密域

密码域，用户在该文本框中输入的字符将被替换为*显示，以起到保密作用。

3、file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"
 />
<title>PHP语言基础</title>

</head>
<body>
<form action="index.php" method="post" name="form1" enctype="multipart/form-data">
 <tr bgcolor="#FFCC33">
 <td width="103" height="25" align="right">文件域：</td>
 <td height="25" align="left">
 <input name="file" type="file" enctype="multipart/form-data" id="upfile" size="20" maxlength="200">
 </td>
 </tr>
</form>
<?php
header("Content-Type:text/html; charset=gb2312");
?>
</body>
</html>

运行结果：

添加一个文件域

文件域，当文件上传时，可以用来打开一个模式窗口来选择文件。然后将文件通过表单上传到服务器，上传文件时需要指明表单的属性enctype=”multipart/form-data”才可以实现上传功能。

4、image

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"
 />
<title>PHP语言基础</title>

</head>
<body>
<form action="index.php" method="post" name="form1" enctype="multipart/form-data">
 <tr bgcolor="#FFCC33">
 <td width="103" height="25" align="right">图像域：</td>
 <td height="25" align="left">
 <input name="image" type="image" src="btn__details_praise_selected.png" id="img" width="40" height="40" border="0">
 </td>
 </tr>
</form>
<?php
header("Content-Type:text/html; charset=gb2312");
?>
</body>
</html>

运行效果：

添加一个图像域

图像域是指可以用在提交按钮位置上的图片，这副图片具有按钮的功能

5、radio

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"
 />
<title>PHP语言基础</title>

</head>
<body>
<form action="index.php" method="post" name="form1" enctype="multipart/form-data">
 <tr bgcolor="#FFCC33">
 <td width="103" height="25" align="right">单选按钮：</td>
 <td height="25" align="left">
  <input name="sex" type="radio" value="1" checked>男
  <input name="sex" type="radio" value="0" >女
 </td>
 </tr>
</form>
<?php
header("Content-Type:text/html; charset=gb2312");
?>
</body>
</html>

运行结果：

添加一组单选按钮

单选按钮，用于设置一组选择项，用户只能选择一项。checked属性用来设置该单选按钮默认被选中。

6、checkbox

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"
 />
<title>PHP语言基础</title>

</head>
<body>
<form action="index.php" method="post" name="form1" enctype="multipart/form-data">
 <tr bgcolor="#FFCC33">
 <td width="103" height="25" align="right">复选框：</td>
 <td height="25" align="left">
  <input name="checkbox" type="checkbox" value="1" checked>苹果
  <input name="checkbox" type="checkbox" value="1" checked>小米
  <input name="checkbox" type="checkbox" value="1" >三星
 </td>
 </tr>
</form>
<?php
header("Content-Type:text/html; charset=gb2312");
?>
</body>
</html>

运行结果：

添加一组复选框

复选框，允许用户选择多个选择项。checked属性用来设置该复选框默认被选中。

7、submit

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"
 />
<title>PHP语言基础</title>

</head>
<body>
<form action="index.php" method="post" name="form1" enctype="multipart/form-data">
 <tr bgcolor="#FFCC33">
 <td width="103" height="25" align="right">提交按钮：</td>
 <td height="25" align="left">
  <input name="submit" type="submit" value="提交">
 </td>
 </tr>
</form>
<?php
header("Content-Type:text/html; charset=gb2312");
?>
</body>
</html>

运行结果：

添加一个提交按钮

将表单的内容提交到服务器端

8、reset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"
 />
<title>PHP语言基础</title>

</head>
<body>
<form action="index.php" method="post" name="form1" enctype="multipart/form-data">
 <tr bgcolor="#FFCC33">
 <td width="103" height="25" align="right">重置按钮：</td>
 <td height="25" align="left">
  <input name="reset" type="reset" value="重置">
 </td>
 </tr>
</form>
<?php
header("Content-Type:text/html; charset=gb2312");
?>
</body>
</html>

运行结果：

添加一个重置按钮

清除与重置表单内容，用于清除表单中所有文本框的内容，并使选择菜单项恢复到初始值。

9、button

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"
 />
<title>PHP语言基础</title>

</head>
<body>
<form action="index.php" method="post" name="form1" enctype="multipart/form-data">
 <tr bgcolor="#FFCC33">
 <td width="103" height="25" align="right">普通按钮：</td>
 <td height="25" align="left">
  <input name="button" type="button" value="注册">
 </td>
 </tr>
</form>
<?php
header("Content-Type:text/html; charset=gb2312");
?>
</body>
</html>

运行结果：

提交一个普通按钮

按钮可以激发提交表单的动作，可以在用户需要修改表单时，将表单恢复到初始的状态，还可以依照程序的需要发挥其他作用。

10、hidden

<input type="hidden" name="信息">

隐藏域，用于在表单中以隐含方式提交变量值。隐藏域在页面中对于用户是不可见的，添加隐藏域的目的在于通过隐藏的方式收集或者发送信息。

选择域标记<select>和<option>

通过选择域标记<select>和<option>可以建立一个列表或者菜单。菜单的使用是为了节省空间，正常状态下只能看到一个选项，单击右侧的下三角按钮打开菜单后才能看到全部的选项。列表可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来查看各选项。

语法格式如下：

<select name="name" size="value" multiple>
<option value="value" selected>选项1</option>
<option value="value">选项2</option>
<option value="value">选项3</option>
…
</select>

参数name表示选择域的名称；参数size表示列表的行数；参数value表示菜单选项值；参数multiple表示以菜单方式显示数据，省略则以列表方式显示数据。

1、列表方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"
 />
<title>PHP语言基础</title>

</head>
<body>
<form action="index.php" method="post" name="form1" enctype="multipart/form-data">
 <tr bgcolor="#FFCC33">
 <td width="103" height="25" align="right">喜欢哪种编程语言：</td>
 <td height="25" align="center" >
  <select name="name" id="code">
   <option value="1" selected>Java语言</option>
   <option value="2">C语言</option>
   <option value="3">JS语言</option>
   <option value="4">PHP语言</option>
  </select>
 </td>
 </tr>
</form>
<?php
header("Content-Type:text/html; charset=gb2312");
?>
</body>
</html>

运行结果：

列表方式

下拉列表框，通过选择域标记<select>和<option>建立一个列表，列表可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来查看各选项。selected属性用来设置该菜单时默认被选中。

2、菜单方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"
 />
<title>PHP语言基础</title>

</head>
<body>
<form action="index.php" method="post" name="form1" enctype="multipart/form-data">
 <tr bgcolor="#FFCC33">
 <td width="103" height="25" align="right">喜欢哪种编程语言：</td>
 <td height="25" align="center" >
  <select name="name" id="code" multiple>
   <option value="1" selected>Java语言</option>
   <option value="2">C语言</option>
   <option value="3">JS语言</option>
   <option value="4">PHP语言</option>
  </select>
 </td>
 </tr>
</form>
<?php
header("Content-Type:text/html; charset=gb2312");
?>
</body>
</html>

运行结果：

菜单方式

> multiple属性用于菜单列表```<select>```标记中，指定该选项的用户可以使用Shift和Ctrl键进行多选

文字域标记<textarea>

文字域标记<textarea>用来制作多行的文字域，可以在其中输入更多的文本。

语法格式如下：

<textarea name="name" rows=value cols=value value="value" warp="value">
 …文本内容
</textarea>

参数name表示文字域的名称；rows表示文字域的行数；cols表示文字域的列数（这里的rows和cols以字符为单位）；value表示文字域的默认值，warp用于设定显示和送出时的换行方式，值为off表示不自动换行，值为hard表示自动硬回车换行，换行标记一同被发送到服务器，输出时也会换行，值为soft表示自动软回车换行，换行标记不会被发送到服务器，输出时仍然为一列。

例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"
 />
<title>PHP语言基础</title>

</head>
<body>
<form action="index.php" method="post" name="form1" enctype="multipart/form-data">
 <tr bgcolor="#FFCC33">
 <td width="103" height="25" align="right">请写下你的留言：</td>
 <td height="25" align="center" >
  <textarea rows="5" cols="20" name="remark" id="remark">留言...</textarea>
 </td>
 </tr>
</form>
<?php
header("Content-Type:text/html; charset=gb2312");
?>
</body>
</html>

运行结果：

文字域标记

到此这篇关于PHP与Web页面的交互示例详解一的文章就介绍到这了,更多相关PHP与Web页面的交互内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！

PHP与Web页面的交互示例详解一的更多相关文章

从iOS应用程序发送帖子到PHP脚本不工作…简单的解决方案就像

我之前已经做了好几次了但是由于某些原因我无法通过这个帖子…我尝试了设置为_POST且没有的变量的PHP脚本……当它们未设置为发布时它工作精细.这是我的iOS代码：这里是PHP的一大块,POST变量不在正确的位置？我想这对于更有经验的开发人员来说是一个相当简单的答案,感谢您的帮助！解决方法$_POST是一个数组,而不是一个函数.您需要使用方括号来访问数组索引：
swift学习2 元组 tuples

swift中出现了一种新的数据结构，非常牛掰的元组tuples如果懂PHP的猿，会发现这个元组和PHP的数组非常类似，同样是可以默认不指定key，也可以指定key目前的学习疑问是，如何进行元组的遍历？
尝试使用swift mailer,gmail smtp,php发送邮件

这里是我的代码：在运行时出现此错误…
PHP使用JpGraph绘制折线图操作示例【附源码下载】

这篇文章主要介绍了PHP使用JpGraph绘制折线图操作,结合实例形式分析了php使用JpGraph的相关操作技巧与注意事项,并附带源码供读者下载参考,需要的朋友可以参考下
jQuery的Cookie封装,与PHP交互的简单实现

下面小编就为大家带来一篇jQuery的Cookie封装,与PHP交互的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
PHP+jquery+CSS制作头像登录窗（仿QQ登陆）

本篇文章介绍了PHP结合jQ和CSS制作头像登录窗（仿QQ登陆），实现了类似QQ的登陆界面，很有参考价值，有需要的朋友可以了解一下。
如何在PHP环境中使用ProtoBuf数据格式

这篇文章主要介绍了如何在PHP环境中使用ProtoBuf数据格式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
PHP rsa加密解密算法原理解析

这篇文章主要介绍了PHP rsa加密解密算法原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
PHP cookie与session会话基本用法实例分析

这篇文章主要介绍了PHP cookie与session会话基本用法,结合实例形式分析了PHP cookie与session会话基本存储、设置、删除等相关使用方式,需要的朋友可以参考下
PHP 匿名函数与注意事项详细介绍

这篇文章主要介绍了PHP 匿名函数与注意事项详细介绍的相关资料,匿名函数是PHP5.3引进来了，php5.3不但引进了匿名函数还有更多更好多新的特性了，下面我们一起来了解一下PHP匿名函数与注意事项详解,需要的朋友可以参考下

随机推荐

PHP个人网站架设连环讲(一)

先下一个OmnihttpdProffesinalV2.06，装上就有PHP4beta3可以用了。PHP4给我们带来一个简单的方法，就是使用SESSION（会话）级变量。但是如果不是PHP4又该怎么办？我们可以假设某人在15分钟以内对你的网页的请求都不属于一个新的人次，这样你可以做个计数的过程存在INC里，在每一个页面引用，访客第一次进入时将访问时间送到cookie里。以后每个页面被访问时都检查cookie上次访问时间值。
PHP函数学习之PHP函数点评

PHP函数使用说明，应用举例，精简点评,希望对您学习php有所帮助
ecshop2.7.3 在php5.4下的各种错误问题处理

将方法内的函数，分拆为2个部分。这个和gd库没有一点关系，是ecshop程序的问题。会出现这种问题，不外乎就是当前会员的session或者程序对cookie的处理存在漏洞。进过本地测试，includes\modules\integrates\ecshop.php这个整合自身会员的类中没有重写integrate.php中的check_cookie()方法导致,验证cookie时返回的username为空，丢失了登录状态，在ecshop.php中重写了此方法就可以了。把他加到ecshop.php的最后面去就可
NT IIS下用ODBC连接数据库

$connection=intodbc_connect建立数据库连接，$query_string="查询记录的条件"如：$query_string="select*fromtable"用$cur=intodbc_exec检索数据库，将记录集放入$cur变量中。再用while{$var1=odbc_result;$var2=odbc_result;...}读取odbc_exec()返回的数据集$cur。最后是odbc_close关闭数据库的连接。odbc_result()函数是取当前记录的指定字段值。
PHP使用JpGraph绘制折线图操作示例【附源码下载】

这篇文章主要介绍了PHP使用JpGraph绘制折线图操作,结合实例形式分析了php使用JpGraph的相关操作技巧与注意事项,并附带源码供读者下载参考,需要的朋友可以参考下
zen_cart实现支付前生成订单的方法

这篇文章主要介绍了zen_cart实现支付前生成订单的方法,结合实例形式详细分析了zen_cart支付前生成订单的具体步骤与相关实现技巧,需要的朋友可以参考下
Thinkphp5框架实现获取数据库数据到视图的方法

这篇文章主要介绍了Thinkphp5框架实现获取数据库数据到视图的方法,涉及thinkPHP5数据库配置、读取、模型操作及视图调用相关操作技巧,需要的朋友可以参考下
PHP+jquery+CSS制作头像登录窗（仿QQ登陆）

本篇文章介绍了PHP结合jQ和CSS制作头像登录窗（仿QQ登陆），实现了类似QQ的登陆界面，很有参考价值，有需要的朋友可以了解一下。
基于win2003虚拟机中apache服务器的访问

下面小编就为大家带来一篇基于win2003虚拟机中apache服务器的访问。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Yii2中组件的注册与创建方法

这篇文章主要介绍了Yii2之组件的注册与创建的实现方法，非常不错，具有参考借鉴价值,需要的朋友可以参考下