web前端——HTML表单和PHP服务器端交互

it2024-02-19  80

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中手工输入查询字符串
最新回复(0)