1、第8章 表单的设计,HTML是利用表单（Form）来设计交互界面的。,表单,“表单”是什么？表单就是网站与浏览者间所搭起的桥梁，浏览者可以通过“表单”给网站站长提建议，达到互动的效果。“表单”的应用除了可以当成留言板来留下你的信息外，更可以应用于在线购物、在线订票、意见调查等用途。,表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素，它由表单控件和一般内容组成。 例如：,表单作用,表单工作原理,8.1 标签 8.2 标签 8.3 下拉菜单select/option 8.4 多行文本框textarea,第8章 表单的设计,表单标签是成对标签，首标签和尾标签之间的内容就是一个表单。 表单f
2、orm中的HTML代码要完成两件事情：一是指出服务器程序的路径和名称，二是要将给定信息传递给服务器程序。,8.1 标签,在HTML中，form的语法结构如下：在标签里有二个属性：action、method。,Form表单的基本格式：,action属性指出该表单所对应的处理程序的位置。它的参数值就是该程序的URL。,1action属性,method属性用于指定该表单的运行方式。属性的参数值为get和post之一，默认的方式是get。当值为get时表示该表单主要是从服务器中获取信息，它传送给服务器的反馈信息长度不能超过1kB；当值为post时表示该表单主要是向服务器发送信息的，它传送给服务器的反馈
3、信息长度没有限制。,2method属性,8.2.1 文本框text 8.2.2 提交按钮submit与重置按钮reset 8.2.3 图像按钮image 8.2.4 密码框password 8.2.5 单选框radio 8.2.6 复选框checkbox 8.2.7 文件选择输入框file,8.2 标签,是个单标签，它必须嵌套在表单标签中使用。 标签有六个属性：type、name、size、value、maxlength和checked，其中name和type是两个必选属性。 服务器处理程序通过name属性值来提取用户所输入的信息。 type属性指定input的类型,type主要有九种类型：t
4、ext、password、radio、checkbox、submit、reset、image、hidden和file。,标签说明,当type的类型为text时，表示单行文本框。 格式： ,8.2.1 文本框text,1size属性：用于指定文本框的长度，默认值为20，以字节为单位。2value属性：设定预先出现在文本框中的内容。3maxlength属性：表示该文本框允许用户输入的最大字符数。此值总是大于或等于size属性的参数值。当输入的字符数超过文本框的长度时，用户可以通过移动光标来查看超过部分的内容。,属性说明,当type=submit时，表示一个提交按钮。 格式： 提交按钮的name属性
5、是可以缺省的。除name属性外，它还有一个可选的属性value，用于指定显示在提交按钮上的文字。 在一个表单中必须有提交按钮，不然将无法向服务器传送信息。,8.2.2 提交按钮submit 与重置按钮reset,当type=reset时，表示一个重置按钮。 格式： 提交按钮的name属性是可以缺省的。除name属性外，它还有一个可选的属性value，用于指定显示在提交按钮上的文字。 value属性的缺省值是“重置”。一般来说，提交与重置按钮应同时出现。,8.2.2 提交按钮submit 与重置按钮reset,举例, 输入用户姓名请输入你的姓名：,使用INPUT标记符，还可以用一个小图像来作为提
6、交按钮，其语法如下：Type属性表明用src属性指定的图像作为提交按钮，无法显示图形的浏览器则使用alt属性显示提交按钮上的文字。,8.2.3 图形提交按钮, 图形化提交按钮表单-图形化提交按钮请输入您的姓名：,图形提交按钮举例,password类型与text类型使用起来很相似，用星号“*”来代替每个密码字符。,8.2.4 密码框password, 输入用户姓名和密码 请输入你的姓名：请输入你的密码：,实例,当type=radio时，表示一个单选框。 格式： 同组的选项只能取一个值，单选框 name 属性相同者为一组！ checked属性用于指定该选项在初始时是被选中的。,8.2.5 单选框r
7、adio, 选择请选择你最喜欢的水果：苹果 桔子 芒果,实例,23,当type=checkbox时，表示复选框 格式： 由于选择是多项的，属性name应取不同的值。 value属性的参数值必须与选项内容相同或基本相同，该属性是不可缺少的。 checked属性用于指定该选项在初始时是被选中的。,8.2.6 复选框checkbox,24,选择请选择你喜欢的水果：苹果 桔子 芒果,实例,25,文件选择输入框实现文件上传 格式： 表单为： ,8.2.7 文件选择输入框file,26,upload_file请选择你要上传的文件：,实例,通过和标签就可以在浏览器中出现一个下拉式菜单或带有滚动条的菜单，浏览
8、者可以在菜单中选中一个或多个选项。,8.3 下拉菜单,28,标签是成对标签，首标签和尾标签之间的内容就是一个下拉式菜单的内容。 标签必须与标签配套使用，标签用于定义下拉菜单中的各个选项。,8.3.1 select标签,29,name属性：指定下拉菜单的名字。 size属性：可选，用于定义菜单的高度。size属性的参数值是数字，表示显示在菜单中的选项数目。当size属性的参数值小于列表框中的列表项数目时，浏览器会为该菜单添加滚动条，用户可以使用滚动条来查看所有的选项。szie属性的缺省值为1。 multiple属性：用于预选多个选项。,标签有 name、size和multiple三个属性。,30
9、,标签用来定义菜单中的选项。 标签是单标签，它必须嵌套在标签中使用。一个菜单中有几个选项，就要有几个标签与之相对应 选项的具体内容写在每个之后。 标签有两个属性：value和selected，它们都是可选的。,8.3.2 option标签,31,value属性：它的参数值是当该项被选中并提交后，Web浏览器传送给服务器的数据。缺省时，浏览器将传送选项的内容。 selected属性：用来指定选项的初始状态，表示该选项在初始时是被选中的。 若在标签中设定multiple属性的话，可以在多个标签中带有selected属性，即同时多个选项被预选。,属性：value和selected,32,你最喜欢的水
10、果是：苹果桔子芒果,实例：下拉框(select)单选,33,选择你最喜欢的水果是：苹果桔子芒果,实例：下拉框多选,34, 选择你最喜欢的水果是：苹果桔子芒果,实例：下拉框多选下拉框设置,35, 选项菜单示例表单-选项菜单示例请输入您的姓名： 请选择您最喜欢的影视明星：周星驰 周润发 刘德华 其他请选择您喜欢的周星驰作品（按住 “Ctrl“ 或 “Shift“ 可以多选）：鹿鼎记 少林足球 大话西游 喜剧之王大内密探008 九品芝麻官 武状元苏乞儿 百变金刚 其他,实例：综合示例,36,标签用来定义高度超过一行的文本输入框。 标签是成对标签，首标签和尾标签之间的内容就是显示在文本输入框中的初始信
11、息。 标签有3个属性：name、rows和cols。,8.4 多行文本框textarea,37,name属性：指定文本输入框的名字。 cols属性：用于规定文本输入框的宽度。属性的参数值是数字，表示一行所能显示的最大字符数。如果输入信息中有一行或几行的字符数大于cols属性的参数值，浏览器会为该文本输入框添加水平滚动条。 rows属性：用于规定文本输入框的高度。属性的参数：值是数字，表示该文本输入框所占的行数。浏览器会自动为高度超过一行的文本输入框添加垂直滚动条。,属性：name、rows和cols,38, 多行文本框示例表单多行文本框请输入您的姓名： 请在下框内输入您的宝贵意见： 请多指教！
12、,实例,8.5 在FrontPage中 制作表单,8.5.1 如何制作表单,在FrontPage中可以通过“表单网页向导”的帮助快速地在网页上建立起一份访客表单。本节就是介绍制作一个如图所示的表单的步骤。,8.5.1 如何制作表单,（1）执行菜单栏“文件/新建/网页或站点”命令，然后在右边的“新建网页或站点”界面中选择“空白站点”，弹出“Web站点模板”对话框，选择“个人站点”，在“指定新站点的位置”栏中输入“http:/lxx/myweb14”,然后按“确定”按钮，建立一个个人网站。,8.5.1 如何制作表单,（2）在“网页”视图模式中，执行菜单栏的“文件/新建/网页或站点”命令，然后在右边
13、的“新建网页或站点”界面中选择“网页模板”，弹出“新建”对话框，在“常用”标签页中选择“表单网页向导”选项。,8.5.1 如何制作表单,8.5.1 如何制作表单,8.5.1 如何制作表单,8.5.1 如何制作表单,（3）在上图中单击“添加”按钮，开始设计表单的域（项目）。,8.5.1 如何制作表单,（4）接着设置表单内容的排列方式。,8.5.1 如何制作表单,（5）最后设置表单数据的输出方式。,8.5.1 如何制作表单,（6）最后，在上图中单击“完成”按钮，得到一个包含有表单的网页。,8.5.1 如何制作表单,（7）将网页中的一段提示说明删除后，保存网页，取名person.htm。 （8）单击
14、预览按钮，启动IE浏览该网页。,8.5.2 如何编辑表单内容,1）如何删除表单域 2）如何更改栏宽,1）如何删除表单域,表单的排列如同表格一栏，当然也可以将不用的域删除，步骤如下： （1）选取要删除的域。,1）如何删除表单域,（2）在“表格”工具栏的删除单元格按钮 上删除鼠标左键，该栏便被删除。,1）如何删除表单域,（3）由于“生日”这一栏，在下页章节必须用到，所以按下工具栏的复原按钮 ，将被删除的生日栏还原。,1）如何删除表单域,注意：如果在FrontPage视窗中没有“表格”工具栏，可在菜单栏的“查看/工具栏/表格”命令上复选便会弹出。,2）如何更改栏宽,当表单的域太小时，输入的数据会被挤
15、掉或被截断，此时就应适度的调整数据栏的宽度了。,2）如何更改栏宽,（1）在要更改栏宽的域上单击鼠标左键，域的四周会出现控制点。 （2）拖曳控制点就可以调整表单域的左右宽度，但是高度则无法调整。,2）如何更改栏宽,上述以拖曳的方式可以很快调整表单域的大小，但这只是一种粗调，有时还需进行更细致的调整，可以利用鼠标右键的快捷功能来设置栏宽的数值，直接输入想要的数字进行精确设置。,2）如何更改栏宽,（1）移动鼠标到想要更改大小的域上单击鼠标右键，由快捷菜单栏中选取“表单域属性”选项。,2）如何更改栏宽,（2）在 “文本框属性”对话框中键入栏宽的数值。,8.5.3 表单数据的输出,制作表单的主要用途是收
16、集数据，但是数据收集后，必须加以整理归纳，让它变成有用的信息，如此才算是一个有用的表单。,8.5.3 表单数据的输出,在FrontPage中提供了几种数据输出的类型，可以设置数据的文件格式及保存位置，以方便统计浏览者浏览网站之后所留下的信息。,1）如何保存表单数据,在前面制作表单时，已经设置表单的保存名称(formrslt.txt)，如果想更改保存的文件名，可以使用以下的步骤来更改。,1）如何保存表单数据,(1)在表单内单击鼠标右键，由快捷菜单栏中选取“表单属性”选项。,1）如何保存表单数据,(2)在上图中的 “表单属性”对话框中按下“选项”按钮，打开“保存表单结果”对话框。,1）如何保存表单
17、数据,(2)在上图中的 “表单属性”对话框中按下“选项”按钮，打开“保存表单结果”对话框。,保存名称，也可以按下“浏览”按钮来指定已存在的文件。,选择文件保存的格式，分为4种纯文本文件及4种HTML文件格式。HTML文件格式适合在浏览器中查看结果，而纯文本文件则适合汇到数据库中处理。,此复选框如果选中，则各域的名称在保存时会一起写入文件中。,是否将新进的数据写入文件的最后，但是此项设置只有针对HTML文件格式，纯文本文件格式则是新进的数据都一律保存在文件的最后。,可选文件名与格式：方便浏览者能将数据存成另一种文件格式，所以还提供了第二个文件的格式设置。,2）如何保存其他数据,表单的保存除了可以
18、得诉信息外，还可以设置其他项目，记录下更多的有关浏览者的信息，譬如：浏览时间(Time)、浏览者姓名(User name)、日期(Date)、浏览器类型(Browser)、远程IP地址(Remote computer)。,2）如何保存其他数据,(1)在“保存表单结果”对话框中，切换到“保存的域”标签页，在图中的“要保存的附加信息”项下页相应的各复选框中打“”，然后单击“确定”按钮。,2）如何保存其他数据,(2)将表单保存后，按下 预览按钮，然后在表单的各项目中填写数据。,2）如何保存其他数据,(3)按下“提交表单”按钮，即可将浏览者所输入的数据发送出去，并将键入结果显示在屏幕上。,3）如何查看
19、 浏览者传送的数据,在浏览者传送数据回来后，需要 整理与归纳，而浏览者所传回来的数据是以文件的形式保存的，文件名则是之前在设计表单时便已经设置好的。,3）如何查看 浏览者传送的数据,（1）回到FrontPage窗口，执行菜单栏的“视图/刷新”命令，或者按下F5键。 （2）单击“文件夹”视图模式按钮，右边窗口中出现formrslt.txt文件，这就是浏览者传送来的数据文件。,3）如何查看 浏览者传送的数据,（3）在文件名为formrslt.txt上双击鼠标左键，就可以启动与txt文档关联的记事本打开该文件。,注意：这里有许多浏览者并未在表单中键入的数据，如时间、日期、主机位置等，却显示在此文件中
20、，这是因为在“保存的域”标签页中加入了附加信息的缘故。,8.5.4 如何自定义表单查,在FrontPage菜单栏中提供了“插入/表单”的命令，可以使用户根据自己的需要来自定义表单。,1）如何制作 单行文字输入栏,(1)单击“新建网页” 按钮。 (2)在“网页”视图模式中，选取菜单栏“插入/表单/表单”的命令，这时出现一个表单虚线框以及两个按钮(“提交”和“重置”)，现在并不需要这两个按钮，可先选取它们，再按“Del”键，将它们删除。,1）如何制作 单行文字输入栏,(3)为了表单整齐，把光标移到上图中表单虚线框内，按下工具栏的表格按钮 ，在虚线框范围内插入一个9X2的表格。,1）如何制作 单行文
21、本输入框,(4)在表格的第一个单元格中输入“姓名：”，在其右边单元格中加入一个单行文本框，可在菜单栏中选择“插入/表单/文本框”命令加入单行文本框。,1）如何制作 单行文本输入框,(5)在单行文本框中单击鼠标右边，调出“文本框属性”对话框，在名称域中输入“Name”，最好是输入英文名称。,1）如何制作 单行文本输入框,(6)继续在表格的第二行左边单元格中输入“生日：”，然后选取菜单栏中“插入/表单/文本框”命令，在其右边的单元格中插入单行文本框。,1）如何制作 单行文本输入框,(7)在单行文本框中单击鼠标右键，调出“文本框属性”对话框，在名称域中输入“Birthday”，最好是输入英文名称。,
22、1）如何制作 单行文本输入框,(8)依照上述方法，在表格中的第三行再输入“E-mail”（域名称为Mail）及第四行输入“电话”（域名称为Tel)。,2）如何加入选项按钮,输入所需的选项，接下来可以询问浏览者的性别了，由于性别只有男或女两种中的一种选择，所以可以使用选项按钮（单选）。,2）如何加入选项按钮,(1)在表格的第五行输入“性别：”，接着在菜单栏中选取“插入/表单/选项按钮”命令，在第2栏插入选项按钮，然后在后面输入性别“男”。,2）如何加入选项按钮,(2)以同样的方式，在 “男”的后面加入另一个选项按钮，然后在后面输入“女”。,2）如何加入选项按钮,(3)分别在男性以及女性的选项按钮
23、上单击鼠标右键，选择“表单域属性”选项，调出其“选项按钮属性”对话框，在“组名称”及 “值”域中输入相对应的名称。,3）如何设置复选框,接下来是复选框的设计，要调查浏览者的嗜好有哪些，可使用多选。,3）如何设置复选框,（1）在表格左边的第6行输入“嗜好：”两个字，然后选取菜单栏中“插入/表单/复选框”命令，在其右边的单元格中插入复选框，在复选框的后面输入第一项嗜好：旅行。,3）如何设置复选框,（2）依照此方法，分别加入其他嗜好：听音乐、打球以及看电影。,3）如何设置复选框,（3）接着设置每一个复选框的属性，先在第一个复选框上单击鼠标右键，选择“表单域属性”选项，打开“复选框属性”对话框，在“名
24、称”及“值”域输入对应的名称。,3）如何设置复选框,（4）依照相同的方法可将其他的嗜好选项一一设置完毕，听音乐域名称为“music”，打球域名称为“sport”，看电影的名称为“movie”。,4）如何制作下拉框,接下来要询问对方的教育程度，可以设计一个下拉框，让用户能够从这个选框当中，选择自己的教育程度。,4）如何制作下拉框,（1）在表格左方的第7行输入“教育程度”，然后在菜单栏中选取“插入/表单/下拉框”命令，在其右边格子中插入下拉框。,4）如何制作下拉框,（2）在下拉框上单击鼠标右键，选择 “表单域属性”选项，打开“下拉框属性”对话框，在“名称”域中输入Education。,4）如何制作
25、下拉框,（3）按下“添加”按钮，在“添加选项”对话框中的 “选项”域输入“小学”。,4）如何制作下拉框,（4）按照同样的方法，继续添加“中学”、“高中”、“专科或大学”、“大学以上”选项。,4）如何制作下拉框,（5）如果要以其中的一项作为选项的默认值（如：专科或大学），则选择该项后，按下“修改”按钮，在“修改选择”对话框中复选“初始状态”域的“已选”选项。,5）如何制作多行文本区,在表单的最后留下一个园地，让浏览者能抒发意见，可以对网站的内容作一番批评与指教。这时要使用可以输入多行文本的文本区。,5）如何制作多行文本区,（1）在表格的第8行输入“留言”，并且选取菜单栏中“插入/表单/文本区”命
26、令，在其右边单元格中插入滚动文本框。,5）如何制作多行文本区,（2）由于文本区太小，可以拖曳文本框的的边框控制点来拉大它的范围。,5）如何制作多行文本区,（3）在拖曳好大小的文本区中单击鼠标右键，选择“表单域属性”选项，打开“文本区属性”对话框，在“名称”域中输入Comment，并设置可输入的字符及行列数。,6）如何制作 提交与重置按钮,表单已经做好，最后还要添加提交(Submit)及重置(Reset)按钮，否则，用户填写的数据就发送不出去。,6）如何制作 提交与重置按钮,（1）先将第9行的两个单元格合并，我们要把两个按钮放入到这个单元格内。,6）如何制作 提交与重置按钮,（2）将光标移到表单
27、的最下方，选取“插入/表单/按钮”命令，加入两个按钮，然后再进行设置。,6）如何制作 提交与重置按钮,（3）分别在两个按钮上单击鼠标右键，选择“表单域属性”选项，打开“按钮属性”对话框，在“名称”及“值/标签”域中输入对应的名称。,6）如何制作 提交与重置按钮,（4）最后将表格的格子线调整并隐藏（在表格内单击鼠标在右键，选择“表格属性”选项，并在“边框粗细”中将数值设为0），最后将网页文件保存（文件名设为“visitor.htm”，网页标题为“调查表”）。,7）表单数据的保存,表单保存完毕，还要设置表单数据的保存格式。 （1）在表单内单击鼠标右键，在弹出的菜单中选取“表单属性”选项。,7）表单
28、数据的保存,（2）在 “表单属性”对话框中单击“选项”按钮，再次弹出一个“保存表单结果”对话框，在其中的 “文件名称”域中将文件名改为form_results.txt 。,7）表单数据的保存,（3）单击 “确定”按钮并保存网页。单击工具栏的预览按钮 ，启动IE打开网页，在打开的网页中的各项目中填写有关数据。,7）表单数据的保存,（4）输入完数据，单击 “提交表单”按钮，即可送出用户所输入的数据，并将键入结果显示在屏幕上。,8）查看用户传送的数据,（1）回到FrontPage“文件夹”视图模式，执行菜单栏的“查看/刷新”命令，或者单击F5键。 （2）单击文件夹视图模式按钮，在右边视窗中会出现fo
29、rm_reslut.txt文件，这就是浏览者所填写的数据。,8.5.5 制作确认页面,当浏览者填写好数据并发送出表单后，习惯上都会有一个确认的页面告知数据的填写状况，并且加上一些答谢语感谢浏览者所作的工作，这些确认页面也可以在FrontPage网页视图模式中自行制作。,8.5.5 制作确认页面,（1）在FrontPage网页视图模式中执行菜单栏的“文件/新建/网页或站点”命令，在右边的“新建网页或站点”界面中选择“网页模板”选项，打开“网页模板”对话框。,8.5.5 制作确认页面,（2）在 “网页模板”对话框的“常规”标签页中选择“确认表单”选项。,1）修改域名称,现在要让确认页面中的“Use
30、rname”能自动换为填写数据的浏览者名字，这时就需要修改域名称了。 （1）切换回“调查表”表单，在姓名的右边域中单击鼠标右键，选择“表单域属性”选项，调出“文本框属性”对话框。,1）修改域名称,（2）将“名称”域中的Name字符串选取，并单击鼠标右键，选择“复制”选项，将此字符串复制，复制完成后按下“取消”按钮离开。,1）修改域名称,（3）回到确认页面，在“Username”上双击鼠标左键，出现“确认域属性”对话框。,1）修改域名称,（4）在“要确认的表单域名称”栏中将 “Username”字符串删除，再单击鼠标右键，选择“粘贴”选项，将刚才复制的Name字符串粘贴上。,1）修改域名称,其实
31、，可以省略Step1Step3,直接在Step4中由键盘输入姓名域名称“Name”字串；电话域的更改方法也是一样，电话域名称为“Tel”；E-mail域名称为“Mail”，若有多余的域，也可以选择该域后按下Del键将其删除。,1）修改域名称,将“Subject”、“Message Type”以及“传真”域删除，因为先前在设计表单时并未加入“Subject”、“Message Type”及“传真”域，因此这里需将这些选项删除。,2）如何添加域,如果觉得确认页面中的域太少，也可以随时添加新的域来应付所需，这里以新增生日域为例。,2）如何添加域,（1）切换到“调查表”表单，在生日域上单击鼠标右键，选
32、择“表单域属性”选项，打开“网页模板”对话框。,2）如何添加域,（2）将“名称”栏中的“Birthday”字符串选取，单击鼠标右键，选择“复制”选项，将此字串复制，复制完成后单击“取消”按钮离开。,2）如何添加域,（3）回到确认页面，将鼠标移到想要插入新域的地方，键入“生日”两个字，然后执行菜单栏的“插入/Web组件”命令，再选择“组件类型”下的“高级控件”，再从右边的“选择一个控件”中选择“确认域”。,2）如何添加域,（4）单击保存按钮保存网页，文件名设为“confirm.htm”，网页标题则取名为 “确认页面” 。,3）如何链接确认页面,自制的确认页面已经完成了，现在要做的是将表单与这一个确认页面进行链接。,3）如何链接确认页面,（1）回到“调查表”表单网页，在表单范围内单击鼠标右键，选择“表单属性”选项，弹出“表单属性”对话框。,3）如何链接确认页面,（2）单击“选项”按钮，切换到“确认网页”标签页，再单击“浏览”按钮找到刚才所保存的确认页面。,3）如何链接确认页面,（3）继续单击“确定”按钮即可以完成确认页面与表单的链接了。,3）如何链接确认页面,测试表单与确认页面的链接。可在表单内输入数据并单击“提交表单”按钮检查。,本章结束,本章结束,
