第一节 HTML表单提交数据和JSP获得数据为了学习掌握JSP动态网页的设计开发，我们先从大家比较熟悉的表单入手。
以前在学习静态网页设计时，做好的表单无法提交数据，那是因为没有接收数据的程序。
本节使用一组范例，由HTML的表单提交数据，并使用JSP动态网页获得数据，来说明他们之间的关系和工作原理。
一、范例的演示和代码清单演示的前提：1.配置好开发运行环境；2.将随书光盘中的范例ch2，复制到resin2.1.6\doc文件夹内；3.启动JSP引擎；演示步骤：1.启动IE，在地址栏键入http://127.0.0.1:8080/ch2/ch2-1.htm，如图2-1所示：图2-12.在表单的姓名栏键入“张三”，年龄栏键入“21”，性别选择其中的一项，密码栏键入“123”，然后点击“提交”按钮。
屏幕出现2-2所示界面：图2-2注意：访问动态网页必须在启动JSP引擎后，在IE的地址栏键入IP地址和路径文件名，才能进行访问，不能使用直接双击打开的方式。
网页的页面上显示了所提交数据的全部内容。
请注意，地址栏上的内容是：http://127.0.0.1:8080/ch2/ch2-1.jsp。
这说明提交的数据已被ch2-1.jsp动态网页接收，并将其送到屏幕上进行显示。
当然，可以在表单中填写其他的内容，屏幕显示的内容会随之变化。
但是如果在“年龄”项目中填写的不是数字，而是字母、汉字等不正确的内容，屏幕上也会将这些错误内容显示出来，甚至任何一项都不填写，直接点击“提交”按钮，动态网页仍能正常运行。
这些问题，我们会在以后的章节中去一一解决。
目前先要弄清HTML静态网页和JSP动态网页之间的关系。
两个网页的代码如下：◇－◇－◇－◇－◇－◇－◇－◇－◇－◇表单◇－◇－◇－◇－◇－◇－◇－◇－◇－◇范例ch2-1.htm1)<html>2)<head>3)<meta http-equiv="Content-Type" content="text/html; charset=gb2312">4)<title>表单</title>5)</head>6)7)<body bgcolor="#FFFFCC">8)<h2 align="center"><font color="#000099">使用表单提交数据</font></h2>9)<form name="form1" method="post" action="ch2-1.jsp">10)<p> </p>11)<p>姓名：12)<input name="xingming" type="text" id="xingming">13)</p>14)<p>性别：15)<input name="xingbie" type="radio" value="男" checked>16)男17)<input type="radio" name="xingbie" value="女">18)女 </p>19)<p>年龄：20)<input name="nianling" type="text" id="nianling">21)</p>22)<p>密码：23)<input name="mima" type="password" id="mima">24)</p>25)<p> </p>26)<table width="40%" border="0">27)<tr>28)<td><div align="center">29)<input type="submit" name="Submit3" value="提交">30)</div></td>31)<td><input type="reset" name="Submit2" value="重写"></td>32)</tr>33)</table>34)<p> </p>35)</form>36)<p><em><font color="#000099"></font></em></p>37)</body>38)</html>◇范例ch2-1.jsp1)<%@page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>2)<html>3)<head>4)<meta http-equiv="Content-Type" content="text/html; charset=gb2312">5)<title>接收表单数据</title>6)</head>7)<body bgcolor="#FFFFCC">8)<h2>动态网页接收的数据</h2>9)<p>10)<% ! //定义接收HTML数据的变量11)String name;12)String xingbie;13)String nianling;14)String password;15)%>16)<% //接收HTML数据17)name=request.getParameter("xingming");18)xingbie=request.getParameter("xingbie");19)nianling=request.getParameter("nianling");20)password=request.getParameter("mima");21)//将数据送到屏幕上显示22)out.print(“姓名：”+name);23)out.print(“<p>性别：”+xingbie);24)out.print(“<p>年龄：”+nianling);25)out.print(“<p>密码：”+password);26)%>27)</p>28)<p> <a href=”ch2-1.htm”>返回表单</a></p>29)</body>30)</html>二、HTML表单的构成分析HTML的表单网页，给人最直观的印象就是页面上的各种表单项，比如文本框、密码框、单选按钮、复选项、下拉列表菜单、提交按钮等。
实际上，和JSP动态网页发生联系，还有表单（域）的概念。
1.表单项要分析HTML表单中的元素及其作用，首先启动Dreamweaver，在图形设计界面即可看到图2-3所示界面：图2-3图2-3中有七个表单项，分别是对应“姓名”的文本域，对应“性别”的两个单选按钮，对应“年龄”的文本域，对应“密码”的文本域，以及“提交”、“重写”两个按钮。
此时可以把每个表单项看成一个用来存放用户提交数据的容器。
每个表单项都有一系列的属性，这些属性起决定其外观及功能的作用。
图2-3中已选中“姓名”后面的文本框，在属性面板中“文本域”的表单项名称是“xingming”(姓名的汉语拼音)，“类型”是“单行”，其他项目为空。
其中“字符宽度”影响文本框的宽窄，“最多字符数”限定文本框能够输入的最多字符数。
如果再选中“性别”后面的第一个单选按钮，在属性面板中“单选按钮”的表单项名是“xingbie”,“选定值”为“男”，“初始状态”为“已勾选”。
第二个单选按钮，在属性面板中“单选按钮”的表单项名是“xingbie”,“选定值”为“女”，“初始状态”为“未选中”。
注意：自己编制含有“单选按钮”的表单项，一定要将其中的一个“初始状态”设为“已勾选”，否则JSP程序不能正常运行。
对于有时需要所有“单选按钮”必须设为“未选中”，解决的方法将在后面讲解。
“年龄”后面的文本框，在属性面板中“文本域”的表单项名是“nianling”，“类型”是“单行”，其他项目的值为空。
“密码”后面的文本框，在属性面板中“文本域”的表单项名是“mima”，“类型”是“密码”，其他项目的值为空。
以上各个表单项的属性值，在与动态网页发生联系时，都起着重要作用。
为了更清楚的了解这些属性值，我们看一下ch2-1.htm文件的部分代码行，11)<p>姓名：12)<input name=”xingming” type=”text” id=”xingming”>13)</p>14)<p>性别：15)<input name=”xingbie” type=”radio” value=”男” checked>16)男17)<input type=”radio” name=”xingbie” value=”女”>18)女 </p>第12行中type=”text”的含义：这个表单项的类型是文本域（也称为文本框）。