第2章 表单数据处理
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第2章 表单数据处理
制作：张兴科
中国人民大学出版社
技能目标
能利用HTML标记进行网页内容的格式控制，能把 表单提交的数据接收并处理
知识目标
掌握常用的HTML标记及基本的CSS样式用法； 熟悉JSP脚本的表示； 掌握out、request内置对象的用法。
依托任务
在一个需要注册的网站中，必须定义一个表单，并 在表单中输入个人的相关信息后提交给服务器，由 服务器把接收的数据进行处理后再把结果发送给用 户。我们把整个从输入到服务器接收到数据并处理 处理看作一个任务。
任务一 设计输入个人信息的表单
我们已经明确个人的信息包括：姓名、性别、 籍贯、年龄、爱好、备注信息。输入的界面 一般通过下图所示的图形界面进行数据输入。
<%@ page contentType="text/html;charset=gb2312" %> <html> <head> <title>输入表单</title> //标题定义 </head> <body> <form id="form1" name="form1" method="post" action="accept.jsp"> //表单定义 <p>姓名：<input type="text" name="xm" /></p> <p>性别：<input type="radio" name="xb" value="男" />男 <input type="radio" name="xb" value="女" />女</p> <p>籍贯：<select name="jg" > <option value="济南">济南</option> <option value="烟台">烟台</option> <option value="青岛">青岛</option> </select></p>
<p>爱好： <input type="checkbox" name="ah" value="音乐" />音乐 <input type="checkbox" name="ah" value="体育" />体育 <input type="checkbox" name="ah" value="美术"/>美术 </p> <p>备注： <textarea name="bz" id="textarea" cols="30" rows="5"></textarea></p> <p> <input type="submit" name="button" value="提交 " /> <input type="reset" name="button2" value="取消" /> </p> </form> </body> </html>
相关知识
1. 常用的HTML标记 （1）HTML基本用法 HTML是一切网页实现的基础，在网络中浏览的网页都是一 个个的HTML文件。这些网页中可以包含有文字、图片、动 画和声音，还可以从当前文件跳转到另一个文件，与网络世 界中各地主机上的文件相连接，故被称为超文本文件。 HTML语言使用描述性的标记符（称为标记）来指明文档的 不同内容。标记是区分文本各个组成部分的分界符，用来把 HTML文档划分成不同的逻辑部分（或结构），如段落、标 题和表格等。标签描述了文档的结构，它向浏览器提供该文 档的格式化信息，以传送文档的外观特征。
表 常用的HTML语言标记
HTML标记 <html></html> <head></head> <title></title> <body></body> 含 义 声明这个文件是一个HTML文件，在文件的开头为开 始标记，在文件的结尾为结束标记 声明网页文件头，紧跟在HTML开始标记之后 声明网页的标题，在HAED的开始和结束标记之间 声明文件主体，包括所有的文本、图片及文档中其他 标记
<font color=""> 声明文字颜色 </font>
<br>
<a href=""></a> <img scr=""> <hr>
插入一个空行
说明其包含的部分是个超级链接，等号后面是链接内 容的URL 插入一个图片文件，等号后面是图片文件的URL 插入一个水平分隔线
（2）正文标记 正文标记的格式如下： <BODY 属性=值… 事件=执行的程序…>…</BODY> 正文标记中包含文档的内容。 常用属性 BACKGROUND ：用法为BACKGROUND=文档背景图像的 URL地址。 BGCOLOR：用法为 BGCOLOR =文档的背景颜色。 TEXT ：用法为TEXT=文档中文本的颜色。 LINK ：用法为LINK=文档中链接的颜色。 VLINK ：用法为VLINK=文档中已被访问过的链接的颜色。 ALINK ：用法为ALINK=文档中正被选中的链接的颜色。
分段与换行标记 ①分段标记 段落是文档的基本信息单位。利用分段标记，可以 忽略文档中原有的回车和换行定义一个新段落，换 行并插入一个空行。 分段标记的格式如下： <P属性=值…></P> 单独使用标记<P>时会空一行，使后续内容隔一行 显示。同时使用<P>和</P>，则将段落包围起来， 表示一个分段的块。常用属性如下： ALIGN=段落的水平对齐方式 其值有：Left（左对齐，是默认值）、center（居 中）、right（右对齐）、justify（两端对齐）。
②换行标记 换行标记的格式如下： <BR> 换行标记强行中断当前行，使后续内容在下一行显示。 字体字型标记 ①字体标记 字体标记的格式如下： < FONT 属性=值…>…</FONT> 字体标记FONT用来设置文本的字符格式，主要包括字体、 字号和颜色等。常用属性如下： FACE=“字体名表” SIZE=“字号值” COLOR=“颜色值”
②字型标记 字型标记的格式如下： <B>…</B>粗体 <I>…</I>斜体 <BIG>…</BIG>大字体 <SMALL>…</SMALL>小字体 <TT>…</TT>固定宽度字体 （6）列表标记 ①有序列表标记 有序列表是在各列表项前面显示数字或字母的缩排列表，可 以使用有序列表标记OL和列表项记LI来创建。
有序列表标记的格式如下： <OL属性=值…> <LI>列表项1 <LI>列表项2 …… <LI>列表项n </OL>
2.表格标记
（1）<table>标记 属性名称 BORDER 的属性 在浏览器显示表格 WIDTH 时，表格的整体外 HEIGHT 观是由<table>标记 CELLSPACI 的属性决定的。 NG <table>标记的主要 CELLPADDI NG 属性如表。
BGCOLOR 属性值 功 能
size
size
设置表格边框大小
设置表格宽度
size
size size
设置表格高度
设置单元格间距 设置单元格的填充距 设置表格的背景图像 设置表格的背景颜色
BACKGROU URL D color
（2）<tr>标记的属性
属性名称 ALIGN 属性值 left. right .center 功 能 设置行对齐方式
VALIGN
top. middle. bottom .baseline
设置行中单元格的垂直对齐 方式
BGCOLOR BORDERCOL OR
color color
设置单元格的背景颜色 设置单元格的边框颜色
<td>标记的属性 为了能定制表格 的单元格，<td> 标记的一些属性 可以完成表格中 单元格的定制作 用。
属性名称
属性值
功 能
ROWSPAN
num
设置单元格所占 的行数
COLSPAN
num
设置单元格所占 的列数
表单标记
表单标记格式为 <FORM></FORM>。 <FORM></FORM>中 包含很多控件来实现整 个表单的交互功能，另 外<FORM></FORM> 还有很多属性来协助完 成交互功能。
属性名称 属性值 功 能 ACTION URL 设置处理表单的程序
METHOD
post. get
设置发送表单的HTTP方法
ENCTYPE
contentType
设置发送表单的内容属性
TARGET
frametarget
设置显示表单内容的窗口
ONSUBMIT
script
设置被发送的事件
文本框 文本框是用来取得用户在网页所输入的姓名、地址 之类等相关数据内容。文本框的一般语法格式是： <input type=“text” name=“textname” value=“defaultvalue” size=“lengthvalue” maxlength=“inputvalue”> 密码框 密码输入主要用在取得用户输入的密码，且会出现 密码符号代替用户所输入的数据以避免密码被其它 人看见。密码框的一般语法格式是： <input type=“password” name=“passwordname” size=“lengthvalue” >
复选框 当一个题目中可以选择多个答案时，就使用复选框。 复选框的一般语法格式： <input type=“checkbox” name=“checkboxname” value=“checkvalue” checked> 单选按钮 当一个题目中的答案只能多选一时，就使用单选按 钮。单选按钮的一般语法格式： <input type=“radio” name=“radioname” value=“radiovalue” checked >
列表框 下拉式列表和滚动式列表框通过<select>和<option> 标记来定义。基本格式为： <select name=“listname” size=“showrows”> <option value=“value1”>选项1</option> <option value=“value2”>选项2</option> ……. <option value=“valuen” selected >选项n</option> </select>
（6）文本区 该组件在表单中指定一个能输入多行文本的文本区。其语法 格式是： <textarea name=“textareaname” rows=“showrows” cols=“showcols”> </textarea> （7）提交按钮 当用户按下该按钮时，表单所包含的数据被提交到服务器。 下面是提交控件的语法： <input type=“submit” value=“提交” > （8）重置按钮 当用户需要重新填写表单中的数据时，按下此控件就清除表 单中各项数据。下面是重置按钮的语法： <input type=“reset” value=“清除” >
框架
所谓框架就是将网页分成几个框窗，同时取得多个URL，每 个框窗显示一定的内容。使用了框架结构的HTML文档基本 格式为： <HTML> <HEAD> 标题部分 </HEAD> <FRAMESET> <FRAME> … <FRAME> … </FRAMESET> </HTML>
①<FRAMESET>框架集标记 <FRAMESET>框架集标记格式为： <FRAMESET属性=“值”…> …… </FRAMESET> 框架集包括如何组织各个框架的信息，可以通过 FRMAESET标记来定义。 ②<FRAME>框架标记 <FRAME>框架标记格式为： <FRAME属性=“值”…> 使用FRAME标记可以设置框架的属性，包括框架的 名称、框架是否可以滚动以及在框架中显示什么文 件等。
CSS样式
CSS是“Cascading Style Sheet”的缩写，可以译为 “层叠样式表”或“级联样式单”。 它用来进行网 页风格设计的，它简化并扩展了HTML中各种标记， 使得各个标记的属性更具有一般性和通用性，大大 的提高了HTML开发的效率。 （1）CSS的插入形式 CSS（Cascading Style Sheet）中，“Cascading” 是“层叠”的意思，也就是说在同一个Web文档中 可以有多个样式表存在，这些样式表根据所在的位 置，拥有不同的优先级，优先级越高，就会被最后 在显示时采用。从样式表插入的形式来看可以分为 三种：内联式样式表、嵌入式样式表、外部样式表。
制作：张兴科
中国人民大学出版社
技能目标
能利用HTML标记进行网页内容的格式控制，能把 表单提交的数据接收并处理
知识目标
掌握常用的HTML标记及基本的CSS样式用法； 熟悉JSP脚本的表示； 掌握out、request内置对象的用法。
依托任务
在一个需要注册的网站中，必须定义一个表单，并 在表单中输入个人的相关信息后提交给服务器，由 服务器把接收的数据进行处理后再把结果发送给用 户。我们把整个从输入到服务器接收到数据并处理 处理看作一个任务。
任务一 设计输入个人信息的表单
我们已经明确个人的信息包括：姓名、性别、 籍贯、年龄、爱好、备注信息。输入的界面 一般通过下图所示的图形界面进行数据输入。
<%@ page contentType="text/html;charset=gb2312" %> <html> <head> <title>输入表单</title> //标题定义 </head> <body> <form id="form1" name="form1" method="post" action="accept.jsp"> //表单定义 <p>姓名：<input type="text" name="xm" /></p> <p>性别：<input type="radio" name="xb" value="男" />男 <input type="radio" name="xb" value="女" />女</p> <p>籍贯：<select name="jg" > <option value="济南">济南</option> <option value="烟台">烟台</option> <option value="青岛">青岛</option> </select></p>
<p>爱好： <input type="checkbox" name="ah" value="音乐" />音乐 <input type="checkbox" name="ah" value="体育" />体育 <input type="checkbox" name="ah" value="美术"/>美术 </p> <p>备注： <textarea name="bz" id="textarea" cols="30" rows="5"></textarea></p> <p> <input type="submit" name="button" value="提交 " /> <input type="reset" name="button2" value="取消" /> </p> </form> </body> </html>
相关知识
1. 常用的HTML标记 （1）HTML基本用法 HTML是一切网页实现的基础，在网络中浏览的网页都是一 个个的HTML文件。这些网页中可以包含有文字、图片、动 画和声音，还可以从当前文件跳转到另一个文件，与网络世 界中各地主机上的文件相连接，故被称为超文本文件。 HTML语言使用描述性的标记符（称为标记）来指明文档的 不同内容。标记是区分文本各个组成部分的分界符，用来把 HTML文档划分成不同的逻辑部分（或结构），如段落、标 题和表格等。标签描述了文档的结构，它向浏览器提供该文 档的格式化信息，以传送文档的外观特征。
表 常用的HTML语言标记
HTML标记 <html></html> <head></head> <title></title> <body></body> 含 义 声明这个文件是一个HTML文件，在文件的开头为开 始标记，在文件的结尾为结束标记 声明网页文件头，紧跟在HTML开始标记之后 声明网页的标题，在HAED的开始和结束标记之间 声明文件主体，包括所有的文本、图片及文档中其他 标记
<font color=""> 声明文字颜色 </font>
<br>
<a href=""></a> <img scr=""> <hr>
插入一个空行
说明其包含的部分是个超级链接，等号后面是链接内 容的URL 插入一个图片文件，等号后面是图片文件的URL 插入一个水平分隔线
（2）正文标记 正文标记的格式如下： <BODY 属性=值… 事件=执行的程序…>…</BODY> 正文标记中包含文档的内容。 常用属性 BACKGROUND ：用法为BACKGROUND=文档背景图像的 URL地址。 BGCOLOR：用法为 BGCOLOR =文档的背景颜色。 TEXT ：用法为TEXT=文档中文本的颜色。 LINK ：用法为LINK=文档中链接的颜色。 VLINK ：用法为VLINK=文档中已被访问过的链接的颜色。 ALINK ：用法为ALINK=文档中正被选中的链接的颜色。
分段与换行标记 ①分段标记 段落是文档的基本信息单位。利用分段标记，可以 忽略文档中原有的回车和换行定义一个新段落，换 行并插入一个空行。 分段标记的格式如下： <P属性=值…></P> 单独使用标记<P>时会空一行，使后续内容隔一行 显示。同时使用<P>和</P>，则将段落包围起来， 表示一个分段的块。常用属性如下： ALIGN=段落的水平对齐方式 其值有：Left（左对齐，是默认值）、center（居 中）、right（右对齐）、justify（两端对齐）。
②换行标记 换行标记的格式如下： <BR> 换行标记强行中断当前行，使后续内容在下一行显示。 字体字型标记 ①字体标记 字体标记的格式如下： < FONT 属性=值…>…</FONT> 字体标记FONT用来设置文本的字符格式，主要包括字体、 字号和颜色等。常用属性如下： FACE=“字体名表” SIZE=“字号值” COLOR=“颜色值”
②字型标记 字型标记的格式如下： <B>…</B>粗体 <I>…</I>斜体 <BIG>…</BIG>大字体 <SMALL>…</SMALL>小字体 <TT>…</TT>固定宽度字体 （6）列表标记 ①有序列表标记 有序列表是在各列表项前面显示数字或字母的缩排列表，可 以使用有序列表标记OL和列表项记LI来创建。
有序列表标记的格式如下： <OL属性=值…> <LI>列表项1 <LI>列表项2 …… <LI>列表项n </OL>
2.表格标记
（1）<table>标记 属性名称 BORDER 的属性 在浏览器显示表格 WIDTH 时，表格的整体外 HEIGHT 观是由<table>标记 CELLSPACI 的属性决定的。 NG <table>标记的主要 CELLPADDI NG 属性如表。
BGCOLOR 属性值 功 能
size
size
设置表格边框大小
设置表格宽度
size
size size
设置表格高度
设置单元格间距 设置单元格的填充距 设置表格的背景图像 设置表格的背景颜色
BACKGROU URL D color
（2）<tr>标记的属性
属性名称 ALIGN 属性值 left. right .center 功 能 设置行对齐方式
VALIGN
top. middle. bottom .baseline
设置行中单元格的垂直对齐 方式
BGCOLOR BORDERCOL OR
color color
设置单元格的背景颜色 设置单元格的边框颜色
<td>标记的属性 为了能定制表格 的单元格，<td> 标记的一些属性 可以完成表格中 单元格的定制作 用。
属性名称
属性值
功 能
ROWSPAN
num
设置单元格所占 的行数
COLSPAN
num
设置单元格所占 的列数
表单标记
表单标记格式为 <FORM></FORM>。 <FORM></FORM>中 包含很多控件来实现整 个表单的交互功能，另 外<FORM></FORM> 还有很多属性来协助完 成交互功能。
属性名称 属性值 功 能 ACTION URL 设置处理表单的程序
METHOD
post. get
设置发送表单的HTTP方法
ENCTYPE
contentType
设置发送表单的内容属性
TARGET
frametarget
设置显示表单内容的窗口
ONSUBMIT
script
设置被发送的事件
文本框 文本框是用来取得用户在网页所输入的姓名、地址 之类等相关数据内容。文本框的一般语法格式是： <input type=“text” name=“textname” value=“defaultvalue” size=“lengthvalue” maxlength=“inputvalue”> 密码框 密码输入主要用在取得用户输入的密码，且会出现 密码符号代替用户所输入的数据以避免密码被其它 人看见。密码框的一般语法格式是： <input type=“password” name=“passwordname” size=“lengthvalue” >
复选框 当一个题目中可以选择多个答案时，就使用复选框。 复选框的一般语法格式： <input type=“checkbox” name=“checkboxname” value=“checkvalue” checked> 单选按钮 当一个题目中的答案只能多选一时，就使用单选按 钮。单选按钮的一般语法格式： <input type=“radio” name=“radioname” value=“radiovalue” checked >
列表框 下拉式列表和滚动式列表框通过<select>和<option> 标记来定义。基本格式为： <select name=“listname” size=“showrows”> <option value=“value1”>选项1</option> <option value=“value2”>选项2</option> ……. <option value=“valuen” selected >选项n</option> </select>
（6）文本区 该组件在表单中指定一个能输入多行文本的文本区。其语法 格式是： <textarea name=“textareaname” rows=“showrows” cols=“showcols”> </textarea> （7）提交按钮 当用户按下该按钮时，表单所包含的数据被提交到服务器。 下面是提交控件的语法： <input type=“submit” value=“提交” > （8）重置按钮 当用户需要重新填写表单中的数据时，按下此控件就清除表 单中各项数据。下面是重置按钮的语法： <input type=“reset” value=“清除” >
框架
所谓框架就是将网页分成几个框窗，同时取得多个URL，每 个框窗显示一定的内容。使用了框架结构的HTML文档基本 格式为： <HTML> <HEAD> 标题部分 </HEAD> <FRAMESET> <FRAME> … <FRAME> … </FRAMESET> </HTML>
①<FRAMESET>框架集标记 <FRAMESET>框架集标记格式为： <FRAMESET属性=“值”…> …… </FRAMESET> 框架集包括如何组织各个框架的信息，可以通过 FRMAESET标记来定义。 ②<FRAME>框架标记 <FRAME>框架标记格式为： <FRAME属性=“值”…> 使用FRAME标记可以设置框架的属性，包括框架的 名称、框架是否可以滚动以及在框架中显示什么文 件等。
CSS样式
CSS是“Cascading Style Sheet”的缩写，可以译为 “层叠样式表”或“级联样式单”。 它用来进行网 页风格设计的，它简化并扩展了HTML中各种标记， 使得各个标记的属性更具有一般性和通用性，大大 的提高了HTML开发的效率。 （1）CSS的插入形式 CSS（Cascading Style Sheet）中，“Cascading” 是“层叠”的意思，也就是说在同一个Web文档中 可以有多个样式表存在，这些样式表根据所在的位 置，拥有不同的优先级，优先级越高，就会被最后 在显示时采用。从样式表插入的形式来看可以分为 三种：内联式样式表、嵌入式样式表、外部样式表。