您的位置：360文档中心› 网页界面设计要点-4-表单与表格

网页界面设计要点-4-表单与表格

备课时间：2004/03/22 课题：第五章网页制作第六节网页表单教学目的：①表单的建立 ②表单资料的收集和处理 ③搜索表单的建立 教学重点：①表单资料的收集和处理 ②搜索表单的建立 教学方法: 边讲解边演示 教学过程： 〈引言〉：直接进行操作演示 〈教授新课〉：网页表单 [板书] 第六节网页表单 一、表单的建立 在FrontPage 2000中，单击“插入（I ）”菜单中的“表单（M）”命令， 其下拉菜单中列出了所有的字段，单击其中的一种，即可插入相应的字段。 [例5-6-1] 建立如图5-25所示的表单网页，取名为guestbook.htm。 图5-25 操作步骤： （1）单击“新建”按钮，建立新页面，首先创建一个2×1表格，并在表格的第一行插入标题动画（look.gif、liuyan.gif）。 （2）右击表格的第二行，在弹出的快捷菜单中单击“拆分单元格…”，打开“拆分单元格”对话框，选择“拆分为列”，并输入列数：3，将该单元格拆分分三列，分别定义两侧单元格的背景色为浅紫色。 1

（3）将插入点移到中间的单元格后，依次单击“插入（I）”菜单中的“表单（M）”“单行文本框（T）”命令，页面上出现一个单行文本框和两个按钮，分别是“提交”和“复位”按钮，将插入点移到文本框左侧，接着输入“姓名：”，然后将插入点移到文本框右侧。 （4）输入“年龄：”，然后依次单击“插入（I）”菜单中的“表单（M）”“单行文本框（T）”命令，产生第二个单行文本框，按回车键。 （5）输入“性别：”，然后依次单击“插入（I）”菜单中的“表单（M）”“单选按钮（R）”命令，输入“女”。再用同样的方法插入另一个单选按钮，并在其右侧输入“男”，然后，双击各选项按钮，分别设置它们的属性，其中“组名称”必须相同，表示这两个按钮在同一个单选按钮组，最后按回车键。 （6）输入“爱好：”，然后依次单击“插入（I）”菜单中的“表单（M）”“复选框（C）”命令，输入“音乐”。用同样方法制成其余复选框。 （7）输入“职业：”，依次单击“插入（I）”菜单中的“表单（M）”“下拉菜单（D）”命令。 （8）双击下拉式菜单，出现如图5-26所示的“下拉菜单属性”对话框。 （9）单击“添加”按钮，添加一个“学生”菜单项，重复操作，添加其余菜单后，再单击“确定”按钮，并按回车键。 （10）输入“您对本网页的建议：”后，按回车键。 （11）依次单击“插入（I）”菜单中的“表单（M）”“滚动文本框（S）”命令，在网页编辑区将出现一个滚动文本框，调整文本框的大小，使其大小合适。 （12）保存网页，取名为guestbook.htm。 二、表单资料的收集和处理 表单的作用在于帮助收集资料，对于访问者来说，填完资料后，单击“提交”按钮，就可以将信息传送到服务器上。对于网站管理员来说，更重要的是对这些资料进行处理，将它们变成所需要的资料形式，比如在上例中，当访问者填写完表单并发送回来后，网站管理员应该对这些资料进行分析，对某些读者提出的问题进行个别解答，并及时改进网站。为了方便资料的整理，在制作表单时就应该有意识地将表单的结果输出到某一个HTML文件或纯文本文件中以文件的形式存放。将鼠标指针放置在表单域所在的虚线范围内右击，在弹出的快捷菜单中单击“表单属性”，打开“表单属性”对话框，如图5-27所示。 在默认情况下，表单的结果会发送到当前网站中，以form_result.txt为文件名存储起来。也可以修改文件名和文件的路径，或者以电子邮件的形式发送到指定的信箱中。当然，这些信息只有管理员才能看到，为了让访问者能够看到自己和别人的留言，以便彼此交流，还可以直接将表单的处理结果返回到指定的网页中。 2

1、在HTML中，（）标记不可出现在和标记符之间。（C） （Ａ）

（Ｂ）
（Ｃ） （Ｄ） 2、<table>属性中，rowspan定义的内容是（D） （A）单元格所跨的列数 （B）行的宽度 （C）列的高度 （D）单元格所跨的行数 3、在HTML中，正确的嵌套方式是（B）。 （Ａ）<table><td><tr></tr></td></table> （Ｂ）<table><tr><td></td></tr></table> （Ｃ）<table><tr><td></tr></td></table> （Ｄ）<table><td><tr></td></tr></table> 4、最大的标题是:（D） （A)<h7> （B)<h6> （C)<h2> （D)<h1> 5、HTML样式格式文件的后缀名是：（C） （A).asp （B).js （C).css （D).ss 6、下面哪一个标记是用于插入背景音乐的：（D） （A)<MUSIC> （B)<SWF> （C)<A> （D)<BGSOUND> 7、请指出下面正确的说法是：（C） （A)背景音乐标记符号通常插入在<body>…</body>之间 （B)可以在JavaScript语句之间插入背景音乐 （C)背景音乐最好使用MP3格式 （D)用SRC属性指明声音文件地址 8、下列哪些是视频文件。（BD） （Ａ）jpg文件 （Ｂ）avi文件 （Ｃ）mov文件 （Ｄ）mpg文件 9、HTML是一种专门用来设计网站的计算机标记语言(T F) 10、网站模版是指网站内容的总体结构和(A) A.页面格式总体规划 B.网页制作规划</p><h2></h2><p>HTML网页设计（表单元素） 1.什么是表单 表单(form)是由一个或多个文本输入框、可单击的按钮、多选框、下拉菜单和图像按钮等组成，所有这些都放在<form>标签在。一个文档中可以包含多个表单，而且每个表单可以放置通常的主体内容（包括文字和图像在内） Form标签 设计者可以将表单放在文档主体中的任何位置，但前提是将表单的缘故都放在<form>标签和</form>结束标签之间。</p><p>2.表单元素 在<form>标签中，可以包含以下5个标签。 Input标签 对于大量通常的表单内元素，可以使用<input>标签来进行定义，其中包括文本字段、多选列表、可单击的图像和提交按钮等。虽然<input>标签中有许多属性，但对每个元素来说，只有type和name属性是必须的。当然，根据指定的比哦啊单元素类型，也可以设置一些其</p><p>可以使用<input>标签中的name属性来为字段命名（表单提交到处理过程中使用的字段，这种字段的说明可以参阅前面介绍）。从技术角度上讲，name属性的值是任意的一个字符串，但是我们建议最好采用没有嵌入空格或标点的字符串。<input>标签中必须的type属性可以用来选择控件的类型，其属性值如下表所示。 最有用也是最常见的表单输入元素时文字域，在浏览器窗口中显示为一行的空框，它接收用输入的一行信息，当你用户将表单提交给服务器时，这些信息就变成了元素值。 范例代码：</p><p>密码域 将type属性值设置为password，就可以创建一个密码域。传统文本域的其他属性和语义也可以应用于密码域。应用呢密码域时必须制定一个字段的名称，这样就可以为该段字段设置size和maxlength属性，并可以设置一个初见时的vlaue。 范例代码： 文件域（file） 复选框（checked） 单选框（ridio） 普通按钮（button） 设置普通按钮（button）代码： 重置按钮（Reset） Textarea标签 作为表单的一部分，<textarea>标签可在用户浏览器中创建一个多行文字域，在此文本输入区内，用户几乎可以输入无线文字。提交表单之后后，浏览器将所有行中的文字都收集起来，行间距用回车/换行符分隔，并将它们作为表单元素的值发送给服务器，这个值需要使用</p><h2></h2><p>图12-1 保存文件名为from 保存图12-2 在页面中插入表单域 说明表单域就是表单的范围,在网页中以红色虚线表示,也是插入表单元素的前提条件.代码中以<form> </form>格式表示.其作用就是把页面中输入的数据以电子邮件形式发送到邮箱中或直接传送到数据库中 4. 将光标停放到表单域中,选择常用面板上的</p><p>图12-3 在页面中插入表格和文本 在第2行第1 个单元格中输入文字"用户名:",然后单击表单面板中"文本字段插入文本框. 选中插入的文本框,打开属性面板,在"文本域"下面的文本框中输入"name", 在"字符宽度"文本框中输入"25";"类型"选择"单行"单选按钮;"最多字符数</p><p>图12-6 单选按钮属性设置 说明初始状态有两个选择，“已勾选”和“未选取中”。单选按钮是在众多选 16. 按钮，在“省份：”旁边插入“列表 菜单”框，单击属性能面板上的按钮，打开“列表值” 黑龙江等，单击按钮可增加项目，单击按钮可删除项目，右边的两个按钮，可用来调整项目的上下位置。如</p><p>图12-7 “单选按钮组”对话框图12-8 “列表/菜单”列表值设置 18. 单击“确定”按钮，返回属性面板，在“初始化时选取定”文本框中出现了刚才设置的项目标签。然后在“列表/菜单”下面的文本框中输入“ 图12-9 “列表/菜单”属性设置 图12-10 文件域属性设置 文件域是用来选择本地硬盘上文件夹目录地址，其后面跟着按</p><p>着单击表单面板上的“复选框”按钮，分别在各选取项前面插入复选取框。 钮，使表格中的内容都靠左对齐。如图 行，然后单击表单面板上的“文本区域”按钮，插入文本域。 图12-11 选中表格单击“左对齐”按钮 26. 选中文本域，打开属性面板，在“文本域”下输入名称content，在“字符宽度”文本框中输入40，在“行数”中输入5，在“类型”选项中选择“多行”单选取按钮。参数设置如图12-12所示。 图12-12 “文本域”属性设置</p><h2></h2><p>HTML制作网页表单验证代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.360docs.net/doc/e917670016.html,/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>用户名注册 ————— 3、软件序列号式的输入框(完整版)： ————— 4、输入框景背景透明： 5、鼠标划过输入框，输入框背景色变色： 6、输入字时输入框边框闪烁(边框为小方型)：