百分百源码网-让建站变得如此简单！ 登录 注册 签到领金币！

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>网页制作> 详解之一：PHP与Web页面的交互示例
分享文章到：

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

发布时间：09/01 来源：未知 浏览： 关键词：

前言

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

相关学习引荐：php编程（视频）

表单

使用<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>iphone
    <input name="checkbox" type="checkbox" value="1" checked>XIAOMI
    <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页面的交互示例的具体内容，更多请关注百分百源码网其它相关文章！

打赏

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

百分百源码网 建议打赏1～10元，土豪随意，感谢您的阅读！

相关文章

共有150人阅读，期待你的评论！发表评论
昵称： 网址： 验证码： 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧！

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板

关于我们-免责声明-业务报价-广告服务-意见反馈-常见问题-网站地图

百分百源码网声明：本站所有模板文章除标明原创外，均来自网络转载，版权归作者所有，如果有侵犯权益，请联系本站删除！

Copyright © 2021 完整无错带数据网站源码模板下载平台! WWW.BAIDOW.COM.