§4表单开发2章节.ppt

03 表单开发 内容提要 认识表单 单一表单元素数据的获取 捆绑表单元素数据的获取 隐藏表单 中文乱码问题 认识表单 表单的作用 表单是一种可以由用户输入，并提交给服务器端的一个图形界面。 在鲜花订购系统中，如果用户要进行登录，就必须输入账号密码，如图所示： 认识表单 定义表单 关于表单的定义，在网页制作过程中进行了详细的描述。在这里，仅仅根据JSP来讲述表单的基本定义方法。 表单有如下性质： 表单中可以输入一些内容，这些输入功能由控件提供，叫做表单元素。 表单中一般都有一个按钮负责提交。 点击提交按钮，表单元素中的内容会提交给服务器端。 表单元素放在form/form之间。 认识表单 定义表单 在MyEclipse中建立一个项目：Prj03。建立一个页面，上节的表单可以表示为： 认识表单 问题 问：表单是提交给服务器端，如何确定到底提交给哪一个页面？ 认识表单 回答： 可以用form中的action属性确定。 如下： 单一表单元素数据的获取 单一表单元素，是指表单元素的值 送给服务器端时，仅仅是一个变量。这种情况下的表单元素主要有： 文本框 密码框 多行文本框 单选按钮 下拉菜单等。 单一表单元素数据的获取 获取文本框中的数据 在鲜花订购系统中，用户可以模糊查询鲜花，输入鲜花名称的部分资料，就可以显示鲜花的信息。此时，表单中可以包含一个文本框。代码如下： 单一表单元素数据的获取 获取文本框中的数据 运行，效果如图所示： 单一表单元素数据的获取 获取文本框中的数据 form action=“textForm_result.jsp”说明，该页面提交到：textForm_result.jsp。textForm_result.jsp代码如下： 单一表单元素数据的获取 获取文本框中的数据 输入一个关键字，如“Rose”，点击“查询”按钮，能够运行textForm_result.jsp。效果如图所示： 单一表单元素数据的获取 获取密码框中的数据 很多界面中都用到密码。在鲜花订购系统中，用户注册时需要输入自己的密码，提交，然后添加到数据库。代码如下： 单一表单元素数据的获取 获取密码框中的数据 运行，效果如图所示： 单一表单元素数据的获取 获取密码框中的数据 实际项目中，应该还要输入一个确认密码，此处省略。 form action=“passwordForm_result.jsp” method=“post说明，该页面提交到：passwordForm_result.jsp。passwordForm_result.jsp代码如下 单一表单元素数据的获取 获取密码框中的数据 输入一个密码，如“fdtj;df”，点击“查询”按钮，能够运行passwordForm_result.jsp。效果如图所示： 单一表单元素数据的获取 获取多行文本框中的数据 在注册界面中添加一个多行文本框，让用户输入自己的信息。代码如下： 单一表单元素数据的获取 获取多行文本框中的数据 运行，效果如图所示： 单一表单元素数据的获取 获取多行文本框中的数据 其中，“I am a student”是运行完毕之后手工输入的。 form action=textareaForm_result.jsp method=post说明，该页面提交到：textareaForm_result.jsp。textareaForm_result.jsp代码如下： 单一表单元素数据的获取 获取单选按钮中的数据 在注册界面中设置两个单选按钮，让用户能够选择自己的性别。代码如下： 单一表单元素数据的获取 获取单选按钮中的数据 运行，效果如图所示： 单一表单元素数据的获取 获取单选按钮中的数据 form action=“radioForm_result.jsp” method=“post”说明，该页面提交到：radioForm_result.jsp。radioForm_result.jsp代码如下： 单一表单元素数据的获取 在注册界面中设置一个下拉菜单，让用户能够选择自己来自的地区。代码如下： 单一表单元素数据的获取 获取下拉菜单中的数据 运行，效果如图所示： 单一表单元素数据的获取 获取下拉菜单中的数据 form action=“selectForm_result.jsp” method=“post”说明，该页面提交到：selectForm_result.jsp。selectForm_result.jsp代码如下： 捆绑表单元素数据的获取 捆绑表单元素数据的获取 捆绑表