JSP提交表单

 设计表单页面，它是静态页面，使用HTML编写，而且使用了JavaScript脚本语言来验证填写表单数据，表单页面为form.htm，代码如下：

< html >
< head >< title > 教师信息登记表 </ title ></ head >
< script  language ="JavaScript" > ...
function checkit()...{
    var theForm;
    theForm=document.teacForm;
    if(theForm.Name.value=="")...{
    alert("请输入教师注册名！");
    document.teacForm.Name.focus();
    return false;
    }
    if(theForm.TrueName.value=="")...{
    alert("请输入教师真实姓名！");
    theForm.TrueName.focus();
    return false;
    }
    if(theForm.PersonalCode.value=="")...{
    alert("身份证号码不能为空！");
    theForm.PersonalCode.focus();
    return false;
    }
    if(theForm.pwd.value=="")...{
    alert("密码不能为空！");
    theForm.pwd.focus();
    return false;
    }
    if(theForm.cfmpwd.value=="")...{
    alert("前后两次输入的密码不一致！");
    theForm.cfmpwd.focus();
    return false;
    }
    if(theForm.BirthDate.value=="")...{
    alert("请选择出生日期！");
    theForm.BirthDate.focus();
    return false;
    }
    if(theForm.HomeNum.value=="")...{
    alert("电话号码不能为空！");
    theForm.HomeNum.focus();
    return false;
    }
    if(theForm.Email.value=="")...{
    alert("Email不能为空！");
    theForm.Email.focus();
    return false;
    }
    if(theForm.Office.value=="")...{
    alert("请选择办公所在教研室！");
    theForm.Office.focus();
    return false;
    }
    if(theForm.Edu.value=="")...{
    alert("请选择您的最高学历！");
    theForm.Edu.focus();
    return false;
    }
    if(theForm.Post.value=="")...{
    alert("请选择您的职称！");
    theForm.Post.focus();
    return false;
    }
    theForm.submit();
}
</ script >
< body >
< center >
< h1 > 教师信息登记表 </ h1 >
< hr >
< form  name ="teacForm"  action ="submitform.jsp"  method ="post" >
< table >
< tbody >
< tr >
< td >< b > 注册名称 </ b ></ td >
< td >< input  type ="text"  name ="Name"  size ="10" ></ td >
</ tr >
< tr >
< td >< b > 登陆密码 </ b ></ td >
< td >< input  type ="password"  name ="pwd"  size ="20" ></ td >
</ tr >
< tr >
< td >< b > 重复密码 </ b ></ td >
< td >< input  type ="password"  name ="cfmpwd"  size ="20" ></ td >
</ tr >
< tr >
< td >< b > 真实姓名 </ b ></ td >
< td >< input  type ="text"  name ="TrueName"  size ="10" ></ td >
</ tr >
< tr >
< td >< b > 身份证号 </ b ></ td >
< td >< input  type ="text"  name ="PersonalCode"  size ="20" ></ td >
</ tr >
< tr >
< td >< b > 性别 </ b ></ td >
< td >
< input  type ="radio"  value ="男"  name ="Sex"  checked > 男
< input  type ="radio"  value ="女"  name ="Sex" > 女
</ td >
</ tr >
< tr >
< td >< b > 出生日期 </ b ></ td >
< td >< select  name ="BirthDate" >
< option  checked value ="" ></ option >
< option  value ="1952" > 1952 </ option >
< option  value ="1953" > 1953 </ option >
< option  value ="1954" > 1954 </ option >
< option  value ="1955" > 1955 </ option >
< option  value ="1956" > 1956 </ option >
< option  value ="1957" > 1957 </ option >
< option  value ="1958" > 1958 </ option >
< option  value ="1959" > 1959 </ option >
< option  value ="1960" > 1960 </ option >
< option  value ="1961" > 1961 </ option >
< option  value ="1962" > 1962 </ option >
< option  value ="1963" > 1963 </ option >
< option  value ="1964" > 1964 </ option >
< option  value ="1965" > 1965 </ option >
< option  value ="1966" > 1966 </ option >
< option  value ="1967" > 1967 </ option >
< option  value ="1968" > 1968 </ option >
< option  value ="1969" > 1969 </ option >
< option  value ="1970" > 1970 </ option >
< option  value ="1971" > 1971 </ option >
< option  value ="1972" > 1972 </ option >
< option  value ="1973" > 1973 </ option >
< option  value ="1974" > 1974 </ option >
< option  value ="1975" > 1975 </ option >
< option  value ="1976" > 1976 </ option >
< option  value ="1977" > 1977 </ option >
< option  value ="1978" > 1978 </ option >
< option  value ="1979" > 1979 </ option >
< option  value ="1980" > 1980 </ option >
< option  value ="1981" > 1981 </ option >
< option  value ="1982" > 1982 </ option >
< option  value ="1983" > 1983 </ option >
< option  value ="1984" > 1984 </ option >
< option  value ="1985" > 1985 </ option >
</ select >
</ td >
</ tr >
< tr >
< td >< b > 联系电话 </ b ></ td >
< td >< input  type ="text"  name ="HomeNum"  size ="15" ></ td >
</ tr >
< tr >
< td >< b ></ b > E-mail </ td >
< td >< input  type ="text"  name ="Email"  size ="30" ></ td >
</ tr >
< tr >
< td >< b > 办公地点 </ b ></ td >
< td >
< select  name ="Office" >
< option  checked value ="" ></ option >
< option  value ="理学院院长室" > 院长室 </ option >
< option  value ="理学院副院长室" > 副院长室 </ option >
< option  value ="信息与计算科学教研室" > 信息与计算科学教研室 </ option >
< option  value ="基础数学教研室" > 基础数学教研室 </ option >
</ select >
</ td >
</ tr >
< tr >
< td >< b > 最高学历 </ b ></ td >
< td >
< select  name ="Edu" >
< option  checked value ="" ></ option >
< option  value ="院士" > 院士 </ option >
< option  value ="博士后" > 博士后 </ option >
< option  value ="博士" > 博士 </ option >
< option  value ="硕士" > 硕士 </ option >
< option  value ="学士" > 学士 </ option >
</ select >
</ td >
</ tr >
< tr >
< td >< b > 职称 </ b ></ td >
< td >
< select  name ="Post" >
< option  checked value ="" ></ option >
< option  value ="教授" > 教授 </ option >
< option  value ="副教授" > 副教授 </ option >
< option  value ="讲师" > 讲师 </ option >
< option  value ="助教" > 助教 </ option >
< option  value ="助读" > 助读 </ option >
</ select >
</ td >
</ tr >
</ tbody >
</ table >
< p  align ="center" >
< input  type ="button"  value ="提交"  name ="Submit"  onclick ="checkit()" >
< input  type ="reset"  value ="重填"  name ="Submit2" >
</ p >
</ form >
</ body >
</ html >

通过上面的表单：

<form name="teacForm" action="submitform.jsp" method="post">

我们想要将用户提交的表单提交到submitform.jsp页面进行处理，接下来完成submitform.jsp页面处理表单的工作，程序代码如下：

<% ... @ page language="java" contentType="text/html;charset=GB2312" %>
<% ... @ page import="java.util.*,java.io.*"  %>
< html >
< head >< title > 教师信息登记表 </ title ></ head >
< body >
<!-- 对提交到该JSP页面含有中文的信息实现以中文正常显示 -->
<% ... request.setCharacterEncoding("GBK"); %>
< center >
< table  width ="400" >
< tbody >
< tr >
< td >< b > 注册名称 </ b ></ td >
<!-- 从用户提交表单获取注册名称 -->
< td > <% = request.getParameter( " Name " ) %> </ td >
</ tr >
< tr >
< td >< b > 登陆密码 </ b ></ td >
<!-- 从用户提交表单获取登录密码 -->
< td > <% = request.getParameter( " pwd " ) %> </ td >
</ tr >
< tr >
< td >< b > 真实姓名 </ b ></ td >
<!-- 从用户提交表单获取真是姓名 -->
< td > <% = request.getParameter( " TrueName " ) %> </ td >
</ tr >
< tr >
< td >< b > 身份证号 </ b ></ td >
<!-- 从用户提交表单获取身份证号 -->
< td > <% = request.getParameter( " PersonalCode " ) %> </ td >
</ tr >
< tr >
< td >< b > 性别 </ b ></ td >
<!-- 从用户提交表单获取性别 -->
< td >
<% = request.getParameter( " Sex " ) %>
</ td >
</ tr >
< tr >
< td >< b > 出生日期 </ b ></ td >
<!-- 从用户提交表单获取出生日期 -->
< td > <% = request.getParameter( " BirthDate " ) %> </ td >
</ tr >
< tr >
< td >< b > 联系电话 </ b ></ td >
<!-- 从用户提交表单获取联系电话 -->
< td > <% = request.getParameter( " HomeNum " ) %> </ td >
</ tr >
< tr >
< td >< b ></ b > E-mail </ td >
< td > <% = request.getParameter( " Email " ) %> </ td >
</ tr >
< tr >
< td >< b > 办公地点 </ b ></ td >
<!-- 从用户提交表单获取办公地点 -->
< td > <% = request.getParameter( " Office " ) %> </ td >
</ tr >
< tr >
< td >< b > 最高学历 </ b ></ td >
<!-- 从用户提交表单获取最高学历 -->
< td > <% = request.getParameter( " Edu " ) %> </ td >
</ tr >
< tr >
< td >< b > 职称 </ b ></ td >
<!-- 从用户提交表单获取职称 -->
< td > <% = request.getParameter( " Post " ) %> </ td >
</ tr >
</ tbody >
</ table >
</ center >
</ body >
</ html >

测试代码：

启动Tomcat Web 服务器，在IE地址栏中键入下面超链接地址：

http://localhost:8080/sky2098/form/form.htm

打开表单页面，如图所示：

填写表单拟测试数据，用于测试页面处理情况，如图所示：

点击“提交”按钮，将数据提交，JSP页面将处理后的数据写回客户端页面，如图所示：

表单数据提交成功。