web交互—HTML表单和PHP程序
-
- 1.表单介绍
- 2.创建表单
- 3.表单项
-
- 1.提交按钮
- 2.文本框
- 3.密码框
- 4.单选按钮
- 5.多选按钮
- 6.下拉列表
- 7.文本域
- 8.重置按钮
- 9.创建一个单纯的按钮
- 10.button标签
- 11.label标签
- 12.表单项分组
- 4.框架集
- 5.php后端服务器
-
- 1.使用$_POST[ ]获取表单数据
- 2.使用$_GET[]设置查询字符串
1.表单介绍
表单是一个包含表单元素的区域。表单的作用是搜集不同类型的用户输入，然后将用户信息提交给服务器。
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
2.创建表单
使用form标签创建一个表单。
- 表单名称对应name属性，使用name可以设置一个唯一的名称来标识该表单，
<form name="forml">,该名称仅供JavaScript调用表单中的元素。 - form标签中必须指定一个action属性，这个属性指向的是一个服务器的地址。这个服务器用来处理表单中的信息，当我们提交表单后就会发送到该action属性对应的地址。
<form action="表单处理.php"> </form> - 表单提交信息的方法由method属性来设置，method的值只能是POST和GET，不指定的话，默认值就为GET。
3.表单项
使用form创建的仅仅是个空白的表单，我们还需要向form里面添加各种各样的表单项。
1.提交按钮
在表单填写完后需要点击提交按钮将所有信息发送给服务器，就需要写一个提交按钮。使用input创建,type属性为submit。
<input type="submit" />
当点击完后就会跳转页面到form指定的地址，并且发送信息。
该怎么改变提交按钮里的值呢？
使用value属性，<input type="submit" value="注册"/>
2.文本框
使用input来创建一个文本框，它的type属性是“text”，而且要想把文本框内的信息提交给服务器，就必须给表单项中设置name属性，name表示提交内容的名字。
<form action="php表单交互.php">
<input type="text" name="username"/>
<input type="submit" />
</form>
信息发送成功，默认通过get方式，用户填写的信息会附在url后边？后以查询字符串的形式发送给服务器。
url地址？查询字符串查询字符串格式：属性名=属性值&属性名=属性值*；两个值或多个时用&连接。
后台就是通过这个属性名来获取表单信息的。
在input里添加value属性值可以为文本框设置默认值。
姓名：<input type="text" name="username" value="张三" />
3.密码框
使用input属性创建一个密码框，它的type属性值为password；
<input type="password" name="ps"/>
使用密码框可以使密码以圆点显示，更加安全。
4.单选按钮
- 使用input创建一个单选按钮，使用type属性radio。
- 单选按钮通过name属性来进行分组，name属性相同的为一组按钮，不进行分组就达不到选择和单选的效果。分组不能忘。
- 如单选按钮这样不需要用户直接填写内容，只需要用户选择的表单项，必须指定一个value值，这样被选择的value值就会返回给服务器，这样服务器才能分辨用户选择了什么。
- 如果希望在多选框或单选框中设置默认选中，就添加一个
checked="checked"属性
性别：<input type="radio" name="sex" value="male" checked="checked"/>男
<input type="radio" name="sex" value="female"/>女
5.多选按钮
使用input创建，使用的type属性为checkbox，使用和单选差不多，仅同样同样type属性不同。
爱好：<input type="checkbox" name="hobby" value="zq"/>足球
<input type="checkbox" name="hobby" value="pbq"/>乒乓球
<input type="checkbox" name="hobby" value="wq"/>网球
6.下拉列表
- 使用select创建一个下拉列表，使用option来添加列表选项。
- 下拉列表的name属性要指定给select，而value属性要指定给option。
- 通过在option中添加
selected="selected"来将选项设置为默认选中。 - 在select中添加
multiple="multiple",可以将下拉列表设置为多选。 - 在select中可以使用optgroup来进行选项的分组，label属性为分组的名称。
你喜欢的明星：<select name="star">
<optgroup label="男明星">
<option selected="selected" value="zbs">赵本山</option>
<option value="wlh">王力宏</option>
<option value="dp">大鹏</option>
</optgroup>
<optgroup label="女明星">
<option value="glnz">古力娜扎</option>
<option value="wzx">王祖贤</option>
</optgroup>
</select>
7.文本域
使用textarea创建一个文本域；
<textarea name="info" cols="40" rows="4" wrap="virtual"></textarea>
属性介绍：
- cols：用来设置文本域的宽度，单位是字符；
- rows：用来设置文本域的高度，单位是行数；
- wrap：设置多行文本的换行方式，取值有三种；
三个值：
1，off：不让文本换行，除非用户按enter键自己换行；
2，virtual：在文本达到指定宽度时自动换行，但是提交数据时，换行符不会添加到数据中，数据依旧是一个字符串。（推荐使用）
3，physical：自动换行，但是提交数据时，自动换行符会作为<br/>标记添加到数据中去。
8.重置按钮
使用<input type="reset" />就可以创建一个重置按钮，点击后，表单内的选项将会恢复为默认值，原来填写的内容清空。
9.创建一个单纯的按钮
使用<input type="button" value="一个无功能按钮"/>创建。
它的功能一般通过绑定js来设置，功能无限。
10.button标签
button标签可以实现和input一样的效果。input是个自结束标签，button标签是成对的。button使用起来更加灵活，可以设置图片文字等等，而且设置方便。
写法例子：
提交按钮：<button type="submit">提交</button>//按钮里文字就写中间，中间可以插入图片。
重置按钮：<button type="reset">重置</button>
按钮：<button type="button">按钮</button>
11.label标签
label属性专门用来包含表单中的提示文字，在label里可以指定一个for属性，该属性的值指向一个表单项的id值。当指定了for后，点击文字的效果和直接点击表单框效果一样。
这样也好对提示文字设置样式。
例子：
<label for="n">姓名</label>
<input type="text" name="name" id="n" />
12.表单项分组
- 在表单中可以使用fieldset来为表单项进行分组。可以将表单项中的同一组放到
<fieldset></fieldset>中。
效果：有一个外框区分组 - 在fieldset中可以使用legend子标签进行分组的命名。
<fieldset><legend>用户信息<legend><input .....></fieldset>
4.框架集
框架集和内联框架（iframe）作用类似，都是用于在一个页面引入外部页面。框架集可以同时引入多个页面，内联框架只能引入一个。在HTML5标准中推荐使用框架集，而不使用内联框架。
其实开发中都不太推荐，因为引入的页面不被搜索引擎检索，因为搜索引擎检索的页面是一个框架页的时候，搜索引擎是不能判断里边内容的。
使用方式：
- 使用frameset（set是集合的意思）创建一个框架集。
注意：iframe不能和body出现在同一个页面当中。所以要使用iframe就不能再使用body，也就是该页面为纯引入页面。 - 在frameset中使用frame子标签来进行指定要引入的页面。引入几个页面就写几个frame,但要指定排列规则。
- 属性：
——rows：指定框架集中所有的框架一行一行的排列。
——cols：指定框架集中所有的框架一列一列的排列。
这两个属性写在frameset中，必须选择一个，并且在属性中指定每一个部分的占位大小。
<frameset rows="30% * 40%">// * 表示剩余全部
<iframe src="1.html" />
<iframe src="2.html" />
<iframe src="3.html" />
</frameset>
有没有发现一个问题？这样做怎么做出有复杂层次的页面，页面都是这样简单按行列一条过去。
其实frameset是可以嵌套的，frameset里可以再写frameset。
<frameset rows="30%, *, 40%">// * 表示剩余全部
<iframe src="1.html" />
<iframe src="2.html" />
<!--嵌套一个frameset，占位40%-->
<frameset cols="30%, 20%, *">
<iframe src="3.html" />
<iframe src="4.html" />
<iframe src="5.html" />
</frameset>
</frameset>
缺点：不被检索外，用户体验也有影响，因为我们没单独加载一个页面时，浏览器都会重新发送一次请求，而引入多个页面就要发多个请求，访问一个相当于访问了多个。公司内网什么的就没问题，不面向互联网。
5.php后端服务器
用户提交数据通常是使用表单进行提交，也可以使用网址中的参数传递数据，这些数据通过HTTP请求的方式发送，使web服务器获取。PHP提供了预定义的超全局变量，用来获取HTTP请求信息，这些变量的数据类型均为数组。
1.使用$_POST[ ]获取表单数据
代码演示：
HTML代码
<form action="PHP表单交互.PHP" method="POST">
姓名：<input type="text" name="username" value="张三"/><br/>
密码：<input type="password" name="ps"/><br/>
性别：<input type="radio" name="sex" value="0" checked="checked">男
<input type="radio" name="sex" value="1">女<br/>
爱好：<input type="checkbox" name="hobby[]" value="足球"/>足球
<input type="checkbox" name="hobby[]" value="乒乓球"/>乒乓球
<input type="checkbox" name="hobby[]" value="网球"/>网球<br/>
你喜欢的明星：<select name="star">
<optgroup label="男明星">
<option selected="selected" value="赵本山">赵本山</option>
<option value="王力宏">王力宏</option>
<option value="大鹏">大鹏</option>
</optgroup>
<optgroup label="女明星">
<option value="古力娜扎">古力娜扎</option>
<option value="王祖贤">王祖贤</option>
</optgroup>
</select><br/>
您最喜欢的一句话：
<textarea name="intro" cols="30" rows="2"></textarea><br/><br/>
<input type="submit" value="注册"/>
<input type="reset"/>
效果图：
注意多选框的传值是怎么写的，这里HTML用了个数组形式的名字，hobby[],在PHP代码中就能通过$_POST[“hobby”]来获取多个数据。
服务器代码：
<?php
$name=$_POST["username"];
$ps=$_POST["ps"];
$sex=$_POST["sex"];
$hobby=$_POST["hobby"];
//注意hobby这个数组，在HTML中一定写hobby[],这样的数组，不然无法传多个值
$star=$_POST["star"];
$intro=$_POST["intro"];
$hobbynum=count($hobby);
echo"尊敬的用户：".$name;
//判断性别
if($sex==0)echo"先生";
if($sex==1)echo"女士";
echo"!<br/>";
echo"您的密码为：".$ps."<br/>";
echo"您选择了".$hobbynum."项爱好。<br/>";
echo "分别是：";
//输出爱好数组值
for($i=0;$i<$hobbynum;$i++)
{
echo $hobby[$i]." ";
}
echo"<br/>";
echo"您最喜欢的明星是：".$star."<br/>";
echo"您最喜欢的一句话是：".$intro."<br/>";
//查看$_POST[]数组的里的数据类型和值；
var_dump($_POST);
?>
注意：$_POST[]数组内的键名一定要记得加” “双引号，不加不会出错，但是会大大降低运行速率。
写在同一张网页中时
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>表单填写</title>
</head>
<body>
<form action="PHP表单交互.PHP" method="POST">
姓名：<input type="text" name="username" value="张三"/><br/>
密码：<input type="password" name="ps"/><br/>
性别：<input type="radio" name="sex" value="0" checked="checked">男
<input type="radio" name="sex" value="1">女<br/>
爱好：<input type="checkbox" name="hobby[]" value="足球"/>足球
<input type="checkbox" name="hobby[]" value="乒乓球"/>乒乓球
<input type="checkbox" name="hobby[]" value="网球"/>网球<br/>
你喜欢的明星：<select name="star">
<optgroup label="男明星">
<option selected="selected" value="赵本山">赵本山</option>
<option value="王力宏">王力宏</option>
<option value="大鹏">大鹏</option>
</optgroup>
<optgroup label="女明星">
<option value="古力娜扎">古力娜扎</option>
<option value="王祖贤">王祖贤</option>
</optgroup>
</select><br/>
您最喜欢的一句话：
<textarea name="intro" cols="30" rows="2"></textarea><br/><br/>
<input type="submit" name="zhuche" value="注册"/>//注意这里写了一个name
<input type="reset"/>
</form>
<?php
if(isset($_POST["zhuche"]))//isset函数用来检查变量是否定义，而且不为NULL，是则返回true，否则返回false。这里用来判断用户是否提交了表单，即单机提交按钮。
{
$name=$_POST["username"];
$ps=$_POST["ps"];
$sex=$_POST["sex"];
$hobby=$_POST["hobby"];
$star=$_POST["star"];
$intro=$_POST["intro"];
$hobbynum=count($hobby);
echo"尊敬的用户：".$name;
if($sex==0)echo"先生";
if($sex==1)echo"女士";
echo"!<br/>";
echo"您的密码为：".$ps."<br/>";
echo"您选择了".$hobbynum."项爱好。<br/>";
echo "分别是：";
for($i=0;$i<$hobbynum;$i++)
{
echo $hobby[$i]." ";
}
echo"<br/>";
echo"您最喜欢的明星是：".$star."<br/>";
echo"您最喜欢的一句话是：".$intro."<br/>";
var_dump($_POST);
}
?>
</body>
</html>
当表单提交后，页面会刷新一遍，所有代码重新执行一遍。
2.使用$_GET[]设置查询字符串
$_GET[]与$_post[]相似，仅仅把method属性值设置为“get”，服务器端改为接收数组$_GET[],主要不同的地方在于$_GET[]会以URL植复仇的形式将表单信息发送给服务器。
不够安全，一般用于测试时好看数据，而且GET方式对发送的字节数有限制，POST没有。
这里主要讲其在查询字符串中的应用。
如何设置查询字符串？
方法：
- 1.在超链接中设置查询字符串
直接上例子：
html代码：
<ul>
<li><a href="1.php?id=1">内容1</a></li>
<li><a href="1.php?id=2">内容2</a></li>
<li><a href="1.php?id=3">内容3</a></li>
</ul>
php代码：
<?php
$id=intval($_GET["id"]);//将数据转换为整型，防止恶意注入；
if($id==1)//判断id值
echo"这是内容一";
else if($id==2)
echo"这是内容二";
else if($id==3)
echo"这是内容三";
else
echo"非法参数";
?>
这里写的是通过查询字符串传来的不同值在同一网页查询不同数据。
- 2.在form标签内的action属性中设置查询字符串
直接上例子：
$flag=$_GET["flag"];
if($flag==1)
{
echo"欢迎".$_GET["user"];
}
else
{
echo"<form method="post" action="?flag=1">//使用post是为了不和action中的查询字符串冲突，那样会使action里的查询字符串失效。 <input type="text" name="user" /> <input type="submit" value="提交" /> </form>";
}
这里就是使用action里的查询字符串发送了数据，以flag值进行判断。
- 3.直接在网页URL中手工输入查询字符串
本文地址：https://blog.csdn.net/m0_46476764/article/details/109195241
