首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

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

Posted in PHP onAugust 04, 2020

前言

这篇笔记记录的是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>

运行效果：

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

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>

运行结果：

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

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

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>

运行结果：

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

文件域，当文件上传时，可以用来打开一个模式窗口来选择文件。然后将文件通过表单上传到服务器，上传文件时需要指明表单的属性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>

运行效果：

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

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

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>

运行结果：

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

单选按钮，用于设置一组选择项，用户只能选择一项。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>

运行结果：

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

复选框，允许用户选择多个选择项。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>

运行结果：

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

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

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>

运行结果：

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

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

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>

运行结果：

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

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

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>

运行结果：

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

下拉列表框，通过选择域标记<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>

运行结果：

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

> 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页面的交互示例详解一的文章就介绍到这了,更多相关PHP与Web页面的交互内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

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

- Author -

IT界的吉祥物

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
PHP数组 为文章加关键字连接 文章内容自动加链接
Dec 29 PHP
PHP Cookie的使用教程详解
Jun 03 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
May 06 PHP
php实现的CSS更新类实例
Sep 22 PHP
php循环table实现一行两列显示的方法
Jun 04 PHP
两款万能的php分页类
Nov 12 PHP
YII使用url组件美化管理的方法
Dec 28 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
Mar 17 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
Jul 04 PHP
PHP基于curl模拟post提交json数据示例
Jun 22 PHP
浅谈Laravel中的三种中间件的作用
Oct 13 PHP
laravel 自定义常量的两种方案
Oct 14 PHP
基于php+MySql实现学生信息管理系统实例
Aug 04 #PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
Aug 03 #PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
Aug 03 #PHP
PHP Ajax跨域问题解决方案代码实例
Aug 01 #PHP
PHP生成图表pChart的示例解析
Jul 31 #PHP
基于php伪静态的实现方法解析
Jul 31 #PHP
PHP底层运行机制与工作原理详解
Jul 31 #PHP
Springboot-cli(1) CompletableFuture(1) format(1) 对齐打印(1) 异步回调(1) 计算器(5) 五子棋(12) FutureTask(3) ForkJoin(1) 底部导航(1)
You might like
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
Javascript之面向对象--封装
2016/12/02 Javascript
如何实现星星评价（jquery.raty.js插件）
2016/12/21 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
python 正则式使用心得
2009/05/07 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
Keds官方网站：购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
澳大利亚新奇小玩意网站：Yellow Octopus
2017/12/28 全球购物
美味咖啡的顶级烘焙师：Cafe Britt
2018/03/15 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
产品发布会策划方案
2014/05/12 职场文书
干部选拔任用方案
2014/05/26 职场文书
新手上路标语
2014/06/20 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
工作态度检讨书范文
2015/05/06 职场文书
心得体会格式及范文
2016/01/25 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL
深入浅析Django MTV模式
2021/09/04 Python