表单网页的制作方法

《表单网页的制作方法》由会员分享，可在线阅读，更多相关《表单网页的制作方法（7页珍藏版）》请在金锄头文库上搜索。

1、表单网页的制作方法教学目的： 1、理解表单的概念及作用；2、熟悉表单字段的种类和功能；3、掌握表单网页的制作方法。教学重点： 1、表单作用的理解和表单网页的制作。2、如何验证表单元素的正确性。教学难点：1、如何将表单具体应用，设计出精美网页。2、如何验证表单元素的正确性。 新课内容：一、 表单的概念及作用表单（Form）是一种结构化的文件，用于收集和发布信息。它是网站管理员与访问者进行交流的一种媒介，通过访问者填写表单中的选择题、填空题和问答题，网站管理员可以收集到来自世界各地的资料和意见。目前表单主要用来进行意见调查、在线查询、网上购物、在线申请等。在表单中经常出现的字段有：单行文本框、多行

2、滚动文本框、单选框、复选框、下拉列表框和按钮。二、HTML 表单设计基础表单在 HTML 页面中起着重要作用，它是与用户交互信息的主要手段。一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。用户填写了所需的资料之后，按下“提交资料”按钮，这样所填资料就会通专门的 CGI 接口传到 Web 服务器上。网页的设计者随后就能在Web 服务器上看到用户填写的资料，从而完成了从用户到作者之间的反馈和交流。对于免费个人网站，往往服务器不提供 CGI 功能，也可以电子邮件来接收用户的反馈信息。表单中主要包括下列元素：button普通按钮radio 单选按钮checkbox复选框selec

3、t 下拉式菜单text 单行文本框textarea多行文本框submit提交按钮reset 重填按钮用 HTML 设计表单常用的标记是：、 、 、和等标记。1、表单标记该标记的主要作用是设定表单的起止位置，并指定处理表单数据程序的 url 地址。其基本语法结构如下：其中 action：用于设定处理表单数据程序 url 的地址。这样的程序通常是 CGI 应用程序，采用电子邮件方式时，用 action=mailto:你的邮件地址。method：指定数据传送到服务器的方式。有两种主要的方式，当 method=get 时，将输入数据加在 action 指定的地址后面传送到服务器；当 method=po

4、st 时则将输入数据按照 HTTP 传输协议中的 post 传输方式传送到服务器，用电子邮件接收用户信息采用这种方式。name：用于设定表单的名称。onrest 和 onsubmit 是主要针对“reset”按钮和“submit”按钮来说的，分别设定了在按下相应的按钮之后要执行的子程序。target：指定输入数据结果显示在那个窗口，这需要与标记配合使用。2、表单输入标记此标记在表单中使用频繁，大部分表单内容需要用到此标记。其语法如下：align：是用于设定表单的位置是靠左（left ）、靠右（right ）、居中（middle）、靠上 top）还是靠底（bottom）。name：设定当前变量名

5、称。 type：决定了输入数据的类型。其选项较多，各项的意义是： type=text：表示输入单行文本； typet=textarea：表示输入多行文本；type=password:表示输入数据为密码，用星号表示；typecheckbox：表示复选框；typeradio：表示单选框；type 一 submit：表示提交按钮，数据将被送到服务器； tyPereset：表示清除表单数据，以便重新输入；typefile：表示插入一个文件；typehidden：表示隐藏按钮；typeimage：表示插入一个图像；type 一 button：表示普通按钮；value：用于设定输入默认值，即如果用户不输入

6、的话，就采用此默认值；src：是针对 type=image 的情况来说的，设定图像文件的地址；checked：表示选择框中，此项被默认选中；maxlength：表示在输入单行文本的时候，最大输入字符个数；size：用于设定在输入多行文本时的最大输入字符数，采用 width，height 方式；onclick：表示在按下输入时调用指定的子程序；onselect：表示当前项被选择时调用指定的子程序。 3、下拉菜单标记用标记可以在表间中插入一个下拉菜单，它需与 标记联用，因为下拉菜单中的每个选项要用标记来定义。标记的语法如下：其中 name：设定下拉式菜单的名称；size：设定菜单框的高度，也就是一

7、次显示几个菜单项，一般取默认值（size=1）；multiple：设定为可以进行多选。4、选项标记该标记为下拉菜单中一个选项，语法很简单：其中 selected：表示当前项被默认选中；value：表示该项对应的值，在该项被中之后，该项的值就会被送到服务器进行处理。5、 多行文本输入标记这是一个建立多行文本输入框的专用标记，其语法如下：各参数含义：name：文本框名称；clos：宽度；rows ：高度（行数）；wrap：换行控制，off：不自动换行；hard：自动硬回车换行，换行标记一同被传送到服务器中去； soft：自动软回车换行，换行标记不会传送到服务器中去。 表单所涉及的标记较多，参数也较

8、复杂，而实际制作表单时就是这些标记的组合应用，但一般的表单不可能涉及所有参数，我们还是那个原则，能用默认值的尽量用默认值，绝不设定一个不用的参数。我在后面的文章中将通过实例介绍一些常用参数的应用技巧。三、 表单网页的制作方法 通常制作表单网页的方法有两种，第一种是手工添加，第二种是利用表单向导，这里我们着重介绍第一种方法。方法一： 1、新建网页2、在网页上输入“留言簿” 三个字后我们就需要插入一个可以为访客提供姓名输入的栏目。 单击菜单：插入表单，会自动弹出一个下拉菜单，列出所有可供选择的字段仔细观察，看看我们现在需要的是哪一个字段？（这里我们需要插入一个“单行文本框”）选中“单行文本框” 后

9、你的网页中会自动出现一个虚线框（这就是整个表单的范围）、一个“单行文本框”还有一对“提交 ”、“全部重写”按钮。注意：虚线框中的每个元素可以看作是文字一样地对待，光标可以在它们之间移动，并可以在它们之间插入空格、空行将光标移至“单行文本框” 前，插入文字“姓名” ，再在“单行文本框”后插入文字“性别” 4、下面该作“性别” 的字段了，经过分析，性别只可能有一种选择，不是“ 男”就是“女”，就像我们作单选题一样，那么想一想这里该用哪一个字段呢。我们发现“表单” 里有一项是 “单选按钮”，对，就是它了。我们在“性别” 后面插入两个 “单选按钮”，并分别在它们后面写上 “男”、“女”。注意：可以把字

10、段当作文字一样来对待，那我们也可以对它进行“剪切”“复制”“ 粘贴”等操作，这里插入的第二个“单选按钮”就可以复制前一个。想一想：预览发现，系统会自动让第一个“单选按钮”成为默认项，那么这样的默认项能不能改变或去掉呢？当然可以，双击一个“单选按钮” ，会出现“单选按钮属性” 对话框，默认选中就是设置的“初始状态”中的“已选”，可以改成“未选”。 5、“性别”只能选择一个，那“爱好”就有好多选择了，这里又该用什么字段呢。“表单”菜单里有一个“复选框” ，这们可以用它来设计“爱好”的选项。注意：“单选按钮 ”是圆形的，“复选框” 是方形的，我们可以用“单选按钮”来设计单选题，用“复选框”来设计多项

11、选择题。双击“复选框 ”同样可以打开 “复选框属性”对话框，看看根据自己的需要可以改动哪些参数。 6、要实现单项选择我们除了可以用“单选按钮” 外还可以使用 “下拉菜单”，这种字段特别适合用在选择项较多的情况下（如“职业” ）。通过菜单：插入表单下拉菜单，在网页中适当的地方插入一个“下拉菜单”，这时你会发现插入的“下拉菜单”中的选项是空的，怎么添加呢？还是通过双击“下拉菜单” ，打开“下拉菜单属性” 对话框。点击“添加 ”按钮，在 “添加选项”对话框中添加需要的选择项，注意，如果是希望默认选择的，可以选中下面“初始状态”中的“已选”。可以再添加其它选项，并且可以利用“上移”“下移” 按钮调整各

12、选项之间的顺序。 7、如果要做留言板需要给访客提供能输入大量文字的地方，显然“单选文本框”是不够的，我们该加入什么字段呢？在插入表单里还有一个“滚动文本框” ，我们点击插入，而且还可以调整它的大小，当里面输入的文字多了后它会自动产生滚动条。 8、我们再来看看“提交” 和 “全部重写”两个按钮，这两个按钮是在插入任何一个表单字段时自动插入的，当然你也可以根据需要删除、修改。如果想把按钮上的文字改掉该怎么办呢，我们还是双击按钮，把“标签”的内容改掉即可。这里要注意的是，按钮“名称” 和“标签”的区别。 注意可以结合我们上节课讲过的表格为表单网页排版布局。 除了我们刚才介绍的那种根据自己需要在表单菜

13、单里逐一添加表单元素外，我们还有一种更简单的制作表单网页的方法，就是利用表单网页向导。 方法二： 1、菜单：文件新建网页在“新建 ”对话框里选择 “表单网页向导”，确定。注意：要想打开“新建” 对话框，必须使用菜单，不要直接点击快捷工具栏上的“新建” 按钮。 2、下一步，点击“添加” 选择一种表单类型，这里我们可以看出表单不仅仅是用在打造留言板上，它在购物订单、调查信息、申请信箱、搜索等很多地方都常用到，这里我们选择“个人信息”为例吧。 3、在下一步可以根据自己的需要选择需要的参数，并且进行必要的设置。（其实这一步大家填写的就是一张表单） 4、还可以为你的表单网页选择多个类型的表单，每一步设置

14、好了即可完成。 5、这时就自动生成了一张表单网页，我们还可以根据自己的需要对网页上的任何元素进行必要的修改。 这里我们可以看出网页上的表单元素也是利用表格进行排版的，我们还可以再进行修改，再插入图片、文字、表格等元素，还可以再进行色彩上的修饰，总之希望大家能发挥自己的想象，做出的网页具有自己的个性。四、 表单处理 在网页中加入表单用来收集信息时，表单本身只负责收集使用者输入的资料，真正在幕后负责接收、传递、处理、回应工作的，是 CGI（Common Gateway Interface），即公共网关接口通信协议。一般情况下，如果要在网页中加入表单，就意味着必需自己撰写或使用别人写好的CGI 程序

15、。CGI 程序一般用 C、C+、Perl 等语言编写，放在服务器上执行。对于不同的 Web Server，CGI 程序并不兼容，如果服务器换了一种 Web Server 程序，那么必须重写一个 CGI程序。某些设计不良的 CGI 程序在执行时会使服务器主机的运行发生问题，甚至造成死机，因此一般的服务器管理员不会随便让使用者将 CGI 程序放到服务器主机上，于是 ASP 应运而生。ASP（ Active Server Pages，即动态服务器网页）技术的原理与 CGI 相同，当服务器接收到表单资料后，会调用对应的 ASP 程序来处理这些资料，并将处理结果转换成 HTML 格式的资料送回浏览器供访问者观看。ASP 的优点在于开发简单且跨平台，在一般的文字编辑软件中使用JavaScript 或 VBScript 语言编写，结合 HTML 语法，不需要编译和链接即可执行。另外由于ASP 程序送出标准的 HTML 文件到浏览器，因此目前大部分的服务器都支持 ASP。课堂作业： 1、通过“留言簿” 的制作，掌握表单的制作方法，并自己动手做一遍。2、自己设计一个精美的表单。课后体会： 仔细体会各种表单元素的使用方法及综合运用。通过本章学习，能够更加理解动态网页的概念，理解表单是设计者与浏览者之间的桥梁，从而使网站更具有吸引力。