2023年11月28日发(作者:)

1

实验一 开发环境配置及Servlet程序设计

一、实验目的

1、了解并熟悉编程环境、编程工具,包括TomcatMyEclipseJDK

2、学会配置环境变量;

3、掌握在MyEclipse中编辑简单源程序的方法、创建包和servlet类的方法;

4、掌握在Tomcat中手工创建可执行程序的方法;

5、加强对servlet的生命周期的理解;掌握servlet程序的实现方法。

二、实验内容及要求

本次实验内容分为两部分:

1、验证部分

1)通过手动的方式在Tomcat中建立工程my,在该工程中建立所需的文件夹以及文件

2)在MyEclipse中建立一个名为servlet

3)运行该servlet

2、编程实现部分

编写一个页面程序(JSP程序)和一个后台程序(servlet程序),用户从页面中输入

名、性别、年龄等信息,并提供一个查询按钮。当用户提交查询按钮时,执行servlet程序,

该程序将用户输入的信息显示出来。用户界面的显示效果参见图1所示:

1 表单显示效果示例

三、实现

1、验证部分

实现过程、必要的配置文件说明、实验结果等。

第一个实验

实验过程

第一步:

打开tomcat文件夹,在webapps中新建一个my的文件夹

2

第二步

my文件夹中新建一个WEB-INF文件夹,并把放入

第三步

放入my文件夹中

第四步

3

tomcat运行起来

第五步

输入localhost:8080/my/servlet/TestLifeCycleServlet

代码

xmlns="/xml/ns/javaee"

xmlns:xsi="/2001/XMLSchema-instance"

xsi:schemaLocation="/xml/ns/javaee

/xml/ns/javaee/web-app_2_">

TestLifeCycleServlet

TestLifeCycleServlet

TestLifeCycleServlet

/servlet/TestLifeCycleServlet

运行结果

4

private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws

ServletException, IOException {

tentType("text/html;charset=GBK");

//解决post方式提交内容的乱码

//一定要写在存取第一个参数之前

racterEncoding("GBK");

//解决get方式乱码问题:-->URIEncoding="GBK"

PrintWriter out = ter();

n(ameter("sName")); //获取名字

n("
");
//显示名字

n(ameter("sex"));

n("
");

n(ameter("age"));

n("
");

n("in doGet");

}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws

ServletException, IOException {

n("in doPost");

doGet(request, response);

}

}

第三步

编写jsp文件,使其能调用java文件

<%@ page language="java" import=".*" pageEncoding="UTF-8"%>

My JSP '' starting page

输入姓名:

输入性别:

5

输入年龄:

第四步

建立关联,并把tomcat跑起来。

程序结果

实验二 JSP应用程序设计(内置对象)

一、实验目的

1、了解并熟悉编程环境、编程工具,包括TomcatMyEclipseJDK

2、学会配置环境变量;

3、掌握在MyEclipse中编辑简单源程序的方法、创建包和servlet类的方法;

4、掌握在Tomcat中手工创建可执行程序的方法;

5、加强对servlet的生命周期的理解;掌握servlet程序的实现方法。

一、实验目的

1 掌握表单的使用方法,以及服务器端处理表单请求的方法;

2 掌握页面跳转的解决方法;

4 重点掌握JSP内置对象requestresponseapplicationsession

二、实验内容及要求

1、熟悉JSP开发环境的各项设置。

2、建立Web工程。该工程有如下要求:

根据用户类型(教师/学生)显示不同的页面。需要定义设计如下页面:

6

1)登录页面(

1 登录页面

在上述登录页面提供计数器功能,在页面右侧显示:“本网站访问次数:”后面显示

被访问次数。

提示:

用户类型的输入用下拉列表实现,下拉列表的使用见教材P.57-58 exa3_

计数器功能利用内置对象session实现,具体实现可参照教材P.75示例exa3_

该示例代码不全,完备的代码可以参加本书配套的示例exa3_源码。

2

根据用户类型,进行任务转发(逻辑处理)如果是教师类型,把任务转发给

如果是学生类型,把任务转发给

3

如果用户名和密码都等于teacher,跳转到本页面(,输出“欢迎您的访”

同时在本页面提供留言板的功能;否则页面返回到

提示:

留言板的功能利用内置对象application实现。参见教材P.78-79示例。

4

如果用户名和密码不为空,输出:您输入的用户名是***

5

若用户名或密码为空,则返回到重新登录,并在登录页面的表单上方显示:

用户名或密码不能为空!

7

2 登录失败后出现的页面

三、实现

1、验证部分

第一步:创建登陆页面

提供用户类型选择,用户名和密码输入框。并用计数器记录本网站访问次数。

第二步:创建登陆处理页面

第三步:创建

如果角色选择为教师(即b并且用户名为shiyunmei密码为1234则跳转到

页面;

8

如果角色选择为学生(即c),并且用户名也windy,密码为1234,则跳转到

页面;

以上两种情况都不是跳转到页面。

9

第四步:创建学生处理页面

第五步:创建老师处理界面

输出“欢迎您的访问”,同时提供留言板功能和查看留言板的功能。当按提交信息时,表单

会跳转到页面,提交方法为post;当按查看留言板时,会跳转到

页面,提交方法为post

1 0

第六步:创建提交信息处理界面

输出“您的信息已经提交”该页面讲留言存入向量,并将向量存放在application对象中。

第七步:创建查看留言板处理界面

当查看留言板时,负责从application对象中取出向量,并遍历向量显

示其中所有的留言。

11

第八步:创建页面

若用户名或密码为空,则返回到重新登录,并在登录页面的表单上方显示:

户名或密码不能为空!

代码:

:

<%@ page language="java" import=".*" pageEncoding="gb2312"%>

<html>

<head>

<title>My JSP '' starting pagetitle>

head>

<body>

1 2

<%!

int number=1;

synchronized void countPeople() //同步方法

{

number++;

}

%>

<%

if(()) //判断是否为新用户

{

countPeople();

}

String str=f(number);

ribute("count",str); //str增加到session对象中

%>

<P>您是第<%=(String)ribute("count")%>个访问本站的人。

body>

<p>请选择用户类型

<form action="" method="post" name=form> //提交表单后跳转

页面,提交方法为post

<SELECT name="a" >

<OPTION name=Teacher value="b">教师

<OPTION name=Student value="c">学生

SELECT>

<p>用户登录

<p>用户名:<input type="text" name="username" size="20">

密码:<input type="password" name="password" size=20>

<p>

<input type="submit" name="submit" value="">

提交您的选择

p>

form>

body>

html>

<%@ page language="java" import=".*" pageEncoding="GB2312"%>

<%

String path = textPath();

String basePath =

1 3

eme()+"://"+verName()+":"+ver

Port()+path+"/";

%>

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP '' starting pagetitle>

head>

<body>

<%

if (ameter("username") != null &&

ameter("password") != null) {

String role=ameter("a"); //request中拿出名字叫a

的值,赋给role

String Name = ameter("username"); //request中拿

出名字叫username的值,赋给Name

String Password = ameter("password"); //request

中拿出名字叫password的值,赋给Password

if (("b")&&("shiyunmei") &&

("1234")) //如果选择老师,用户名为施运梅,密码为1234,则发送

到老师页面

{

ribute("Login", "OK");

direct("");

}

else if(("c")&&("windy") &&

("1234")) //如果选择学生,用户名为windy,密码为1234,则发送

到学生页面

{

ribute("Login", "OK");

direct("");

}

else

{

direct(""); //

}

}

1 4

%>

body>

html>

<%@ page language="java" import=".*" pageEncoding="GB2312"%>

<%

String path = textPath();

String basePath =

eme()+"://"+verName()+":"+ver

Port()+path+"/";

%>

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP '' starting pagetitle>

head>

<body>

您的用户名为:windy<br>

body>

html>

<%@ page language="java" import=".*" pageEncoding="GB2312"%>

<%

String path = textPath();

String basePath =

eme()+"://"+verName()+":"+ver

Port()+path+"/";

%>

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP '' starting pagetitle>

head>

1 5

<body>

<%--

Login Name:

Login Password:


--%>

欢迎您的访问!

<FORM action="" method=post nam=form> <%--当按提交时,

跳转到messagePane1,提交方法为post--%>

<p>输入您的留言:

<TEXTAREA name="messages" ROWs="10" COLS=36 WRAP="physical">TEXTAREA>

<INPUT type="submit" value="" name="submit">

提交信息

FORM>

<FORM action="" method="post" name="form1"> <%--当按查询

时,跳转到showMessage1,提交方法为post--%>

<INPUT type="submit" value="" name="look">

查案留言板

FORM>

body>

html>

<%@ page language="java" import=".*" pageEncoding="GB2312"%>

<%

String path = textPath();

String basePath =

eme()+"://"+verName()+":"+ver

Port()+path+"/";

%>

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP '' starting pagetitle>

1 6

head>

<body>

<%! Vector v=new Vector();

int i=0;

ServletContext application;

synchronized void sendMessage(String s)

{ application=getServletContext();;

i++;

("No."+i+","+s);

ribute("Mess",v);

}

%>

<%

String messages=ameter("messages");

if(messages==null)

{messages="无信息";

}

sendMessage(messages);

("您的信息已经提交!");

%>

<A HREF="" >返回 A>

body>

html>

<%@ page language="java" import=".*" pageEncoding="GB2312"%>

<%

String path = textPath();

String basePath =

eme()+"://"+verName()+":"+ver

Port()+path+"/";

%>

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP '' starting pagetitle>

head>

1 7

<body>

<% Vector v=(Vector)ribute("Mess");

for(int i=0;i<();i++)

{ String message=(String)tAt(i);

StringTokenizer fenxi=new StringTokenizer(message,"#");

while(eTokens())

{ String str=ken();

byte a[]=es("ISO-8859-1");

str=new String(a);

("
"
+str);

}

}

%>

body>

html>

<%@ page language="java" import=".*" pageEncoding="GB2312"%>

<%

String path = textPath();

String basePath =

eme()+"://"+verName()+":"+ver

Port()+path+"/";

%>

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP '' starting pagetitle>

head>

<body>

<p><span class="text">用户名或密码不能为空!span>p>

<p>p><p>p>

<%@include file="" %> <%--include指令将新加的话与登录界面合在

一起--%>

1 8

body>

html>

实验二 JSP应用程序设计(内置对象)

一、实验目的

1、了解并熟悉编程环境、编程工具,包括TomcatMyEclipseJDK

2、学会配置环境变量;

3、掌握在MyEclipse中编辑简单源程序的方法、创建包和servlet类的方法;

4、掌握在Tomcat中手工创建可执行程序的方法;

5、加强对servlet的生命周期的理解;掌握servlet程序的实现方法。

一、实验目的

1 掌握表单的使用方法,以及服务器端处理表单请求的方法;

2 掌握页面跳转的解决方法;

4 重点掌握JSP内置对象requestresponseapplicationsession

二、实验内容及要求

1、熟悉JSP开发环境的各项设置。

2、建立Web工程。该工程有如下要求:

根据用户类型(教师/学生)显示不同的页面。需要定义设计如下页面:

1)登录页面(

1 9

1 登录页面

在上述登录页面提供计数器功能,在页面右侧显示:“本网站访问次数:”后面显示

被访问次数。

提示:

用户类型的输入用下拉列表实现,下拉列表的使用见教材P.57-58 exa3_

计数器功能利用内置对象session实现,具体实现可参照教材P.75示例exa3_

该示例代码不全,完备的代码可以参加本书配套的示例exa3_源码。

2

根据用户类型,进行任务转发(逻辑处理)如果是教师类型,把任务转发给

如果是学生类型,把任务转发给

3

如果用户名和密码都等于teacher,跳转到本页面(,输出“欢迎您的访”

同时在本页面提供留言板的功能;否则页面返回到

提示:

留言板的功能利用内置对象application实现。参见教材P.78-79示例。

4

如果用户名和密码不为空,输出:您输入的用户名是***

5

若用户名或密码为空,则返回到重新登录,并在登录页面的表单上方显示:

用户名或密码不能为空!

2 登录失败后出现的页面

2 0

四、实现

2、验证部分

第一步:创建登陆页面

提供用户类型选择,用户名和密码输入框。并用计数器记录本网站访问次数。

第二步:创建登陆处理页面

第三步:创建

如果角色选择为教师(即b并且用户名为shiyunmei密码为1234则跳转到

页面;

2 1

如果角色选择为学生(即c),并且用户名也windy,密码为1234,则跳转到

页面;

以上两种情况都不是跳转到页面。

2 2

第四步:创建学生处理页面

第五步:创建老师处理界面

输出“欢迎您的访问”,同时提供留言板功能和查看留言板的功能。当按提交信息时,表单

会跳转到页面,提交方法为post;当按查看留言板时,会跳转到

页面,提交方法为post

2 3

第六步:创建提交信息处理界面

输出“您的信息已经提交”该页面讲留言存入向量,并将向量存放在application对象中。

第七步:创建查看留言板处理界面

当查看留言板时,负责从application对象中取出向量,并遍历向量显

示其中所有的留言。

2 4

第八步:创建页面

若用户名或密码为空,则返回到重新登录,并在登录页面的表单上方显示:

户名或密码不能为空!

代码:

:

<%@ page language="java" import=".*" pageEncoding="gb2312"%>

<html>

<head>

<title>My JSP '' starting pagetitle>

head>

<body>

2 5

<%!

int number=1;

synchronized void countPeople() //同步方法

{

number++;

}

%>

<%

if(()) //判断是否为新用户

{

countPeople();

}

String str=f(number);

ribute("count",str); //str增加到session对象中

%>

<P>您是第<%=(String)ribute("count")%>个访问本站的人。

body>

<p>请选择用户类型

<form action="" method="post" name=form> //提交表单后跳转

页面,提交方法为post

<SELECT name="a" >

<OPTION name=Teacher value="b">教师

<OPTION name=Student value="c">学生

SELECT>

<p>用户登录

<p>用户名:<input type="text" name="username" size="20">

密码:<input type="password" name="password" size=20>

<p>

<input type="submit" name="submit" value="">

提交您的选择

p>

form>

body>

html>

<%@ page language="java" import=".*" pageEncoding="GB2312"%>

<%

String path = textPath();

String basePath =

2 6

eme()+"://"+verName()+":"+ver

Port()+path+"/";

%>

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP '' starting pagetitle>

head>

<body>

<%

if (ameter("username") != null &&

ameter("password") != null) {

String role=ameter("a"); //request中拿出名字叫a

的值,赋给role

String Name = ameter("username"); //request中拿

出名字叫username的值,赋给Name

String Password = ameter("password"); //request

中拿出名字叫password的值,赋给Password

if (("b")&&("shiyunmei") &&

("1234")) //如果选择老师,用户名为施运梅,密码为1234,则发送

到老师页面

{

ribute("Login", "OK");

direct("");

}

else if(("c")&&("windy") &&

("1234")) //如果选择学生,用户名为windy,密码为1234,则发送

到学生页面

{

ribute("Login", "OK");

direct("");

}

else

{

direct(""); //

}

}

2 7

%>

body>

html>

<%@ page language="java" import=".*" pageEncoding="GB2312"%>

<%

String path = textPath();

String basePath =

eme()+"://"+verName()+":"+ver

Port()+path+"/";

%>

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP '' starting pagetitle>

head>

<body>

您的用户名为:windy<br>

body>

html>

<%@ page language="java" import=".*" pageEncoding="GB2312"%>

<%

String path = textPath();

String basePath =

eme()+"://"+verName()+":"+ver

Port()+path+"/";

%>

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP '' starting pagetitle>

head>

2 8

<body>

<%--

Login Name:

Login Password:


--%>

欢迎您的访问!

<FORM action="" method=post nam=form> <%--当按提交时,

跳转到messagePane1,提交方法为post--%>

<p>输入您的留言:

<TEXTAREA name="messages" ROWs="10" COLS=36 WRAP="physical">TEXTAREA>

<INPUT type="submit" value="" name="submit">

提交信息

FORM>

<FORM action="" method="post" name="form1"> <%--当按查询

时,跳转到showMessage1,提交方法为post--%>

<INPUT type="submit" value="" name="look">

查案留言板

FORM>

body>

html>

<%@ page language="java" import=".*" pageEncoding="GB2312"%>

<%

String path = textPath();

String basePath =

eme()+"://"+verName()+":"+ver

Port()+path+"/";

%>

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP '' starting pagetitle>

2 9

head>

<body>

<%! Vector v=new Vector();

int i=0;

ServletContext application;

synchronized void sendMessage(String s)

{ application=getServletContext();;

i++;

("No."+i+","+s);

ribute("Mess",v);

}

%>

<%

String messages=ameter("messages");

if(messages==null)

{messages="无信息";

}

sendMessage(messages);

("您的信息已经提交!");

%>

<A HREF="" >返回 A>

body>

html>

<%@ page language="java" import=".*" pageEncoding="GB2312"%>

<%

String path = textPath();

String basePath =

eme()+"://"+verName()+":"+ver

Port()+path+"/";

%>

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP '' starting pagetitle>

head>

3 0

<body>

<% Vector v=(Vector)ribute("Mess");

for(int i=0;i<();i++)

{ String message=(String)tAt(i);

StringTokenizer fenxi=new StringTokenizer(message,"#");

while(eTokens())

{ String str=ken();

byte a[]=es("ISO-8859-1");

str=new String(a);

("
"
+str);

}

}

%>

body>

html>

<%@ page language="java" import=".*" pageEncoding="GB2312"%>

<%

String path = textPath();

String basePath =

eme()+"://"+verName()+":"+ver

Port()+path+"/";

%>

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP '' starting pagetitle>

head>

<body>

<p><span class="text">用户名或密码不能为空!span>p>

<p>p><p>p>

<%@include file="" %> <%--include指令将新加的话与登录界面合在

一起--%>

3 1

body>

html>

实验四 基于MVC的简单数据库管理系统

实验目的

1、理解MVC设计思想

2、掌握基于MVC的编程技术,掌握视图层、模型层和控制层的设计方法。

实验内容

MVC思想,编写根据姓名查找学生记录的应用。

实验步骤

1、数据库的设计

1 创建数据库school

2 打开数据库,创建表格student,并插入几条记录。

序号 字段名称 描述 数据类型 长度

1 xuehao 学号 char 8

2 name 名字 char 8

3 sex 性别 char 2

4 birthday 出生日期 char 8

5 address 家庭住址 char 20

2、模型层的设计

两个类:

:存放学生信息(实体类)

:查询数据库。

3 2

3、视图层的设计

三个文件:

:为用户提供输入查询条件的表单。

:如果查询到记录,则显示响应的结果。

:如果没有查询到记录,显示提示信息。

4、控制器Servlet的设计

功能:接收用户的查询请求,并根据用户输入的姓名调用StudentDAO

类查询数据库。根据查询结果转至不同的页面。

5、配置

实现

1、验证部分

第一步:创建数据库表格student

第二步:创建两个类:

:存放学生信息(实体类)

:查询数据库。

第三步:创建三个jsp

:为用户提供输入查询条件的表单。

:如果查询到记录,则显示响应的结果。

3 3

:如果没有查询到记录,显示提示信息。

第四步:控制器Servlet的设计

功能:接收用户的查询请求,并根据用户输入的姓名调用StudentDAO

类查询数据库。根据查询结果转至不同的页面。

第五步:配置

代码

3 4

package student;

public class StudentBean {

private String xuehao;

private String name;

private String sex;

private String birthday;

private String address;

public String getXuehao() {

return xuehao;

}

public void setXuehao(String xuehao) {

this.xuehao = xuehao;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getSex() {

return sex;

}

public void setSex(String sex) {

this.sex = sex;

}

public String getBirthday() {

3 5

package student;

import tion;

import Manager;

import Set;

import eption;

import ist;

import tBean;

public class StudentDAO {

/*DAO用于连接数据库*/

//先定义一个connection,方便在以后的各个方法当中进行调用

private Connection conn = null;

//采用构造函数进行数据库连接的初始化

public StudentDAO() {

try {

e(""); //加载驱动

conn =

nection("jdbc:mysql://localhost:3306/test","root","1234");

} catch (ClassNotFoundException e) {

tackTrace();

} catch (SQLException e) {

tackTrace();

}

}

public ArrayList queryLike(String sname) {

ArrayList al = new ArrayList(); //先实例化一个容器

String SQL = "SELECT * FROM student WHERE 名字 ='" + sname + "'";

try {

ResultSet rs = Statement().executeQuery(SQL);

while(()) {

StudentBean st = new StudentBean(); //实例化一个实体类

//将结果集当前记录当中的id设置给st对象当中,完成数据的封装,以下类同

hao(ing("学号"));

e(ing("名字"));

3 6

thday(ing("出生日期"));

ress(ing("家庭住址"));

(st); //将结果保存在list当中

}

} catch (SQLException e) {

tackTrace();

}finally {

onn(); //最后关闭连接

}

return al; //将数据返回

}

//关闭conn

public void closeConn() {

try {

if(conn !=null) {

();

conn = null;

}

} catch (SQLException e) {

tackTrace();

}

}

}

3 7

public class QueryServlet extends HttpServlet {

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

racterEncoding("gb2312");

racterEncoding("gb2312");

String sname = ameter("sname");

//实例化DAO,并调用DAO的查询方法,将sname做为参数传入进去

StudentDAO qd = new StudentDAO();

ArrayList al = ike(sname); //调用查询方法

ribute("al", al); //将结果保存在request当中,方便jsp调用

//页面跳转

if(y()){

uestDispatcher("/").forward(request, response);

}

else

uestDispatcher("/").forward(request, response);

}

}

<%@ page language="java" import=".*,student.*"

pageEncoding="gb2312"%>

<html>

<body>

<p>该学生不存在!!p>

body>

html>

<%@ page language="java" import=".*" pageEncoding="gb2312"%>

<%

String path = textPath();

String basePath =

eme()+"://"+verName()+":"+ver

Port()+path+"/";

3 8

%>

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP '' starting pagetitle>

head>

<body>

请输入要查询的学生姓名:

<form action="QueryServlet" method="post">

<input name="sname">

<input type="submit" value="">

查询

form>

body>

html>

<%@ page language="java" import=".*" pageEncoding="gb2312"%>

<%

String path = textPath();

String basePath =

eme()+"://"+verName()+":"+ver

Port()+path+"/";

%>

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP '' starting pagetitle>

head>

<body>

请输入要查询的学生姓名:

<form action="QueryServlet" method="post">

<input name="sname">

<input type="submit" value="">

查询

form>

body>

html>

3 9

流程图: