表单网页的制作方法.doc

表单网页的制作方法 教学目的： 1、理解表单的概念及作用；2、熟悉表单字段的种类和功能；3、掌握表单网页的制作方法。 教学重点： 1、表单作用的理解和表单网页的制作。2、如何验证表单元素的正确性。 教学难点： 1、如何将表单具体应用，设计出精美网页。2、如何验证表单元素的正确性。 新课内容： 一、 表单的概念及作用 ????表单（Form）是一种结构化的文件，用于收集和发布信息。它是网站管理员与访问者进行交流的一种媒介，通过访问者填写表单中的选择题、填空题和问答题，网站管理员可以收集到来自世界各地的资料和意见。目前表单主要用来进行意见调查、在线查询、网上购物、在线申请等。在表单中经常出现的字段有：单行文本框、多行滚动文本框、单选框、复选框、下拉列表框和按钮。 二、HTML表单设计基础 ????表单在HTML页面中起着重要作用，它是与用户交互信息的主要手段。一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。用户填写了所需的资料之后，按下“提交资料”按钮，这样所填资料就会通专门的CGI接口传到Web服务器上。网页的设计者随后就能在Web服务器上看到用户填写的资料，从而完成了从用户到作者之间的反馈和交流。对于免费个人网站，往往服务器不提供CGI功能，也可以电子邮件来接收用户的反馈信息。　　表单中主要包括下列元素：button——普通按钮radio ——单选按钮checkbox——复选框select ——下拉式菜单text ——单行文本框textarea——多行文本框submit——提交按钮reset—— 重填按钮　　用HTML设计表单常用的标记是：form、input、Option、Select、textarea和isindex等标记。 1、form表单标记　　 该标记的主要作用是设定表单的起止位置，并指定处理表单数据程序的url地址。其基本语法结构如下：formaction＝urlmethod=get|postname＝valueonreset=functiononsubmit＝functiontarget=window/form　　 其中action：用于设定处理表单数据程序url的地址。这样的程序通常是CGI应用程序，采用电子邮件方式时，用action=mailto:你的邮件地址。method：指定数据传送到服务器的方式。有两种主要的方式，当method=get时，将输入数据加在action指定的地址后面传送到服务器；当method=post时则将输入数据按照HTTP传输协议中的post传输方式传送到服务器，用电子邮件接收用户信息采用这种方式。name：用于设定表单的名称。onrest和onsubmit是主要针对“reset”按钮和“submit”按钮来说的，分别设定了在按下相应的按钮之后要执行的子程序。target：指定输入数据结果显示在那个窗口，这需要与frame标记配合使用。 2、input表单输入标记　　 此标记在表单中使用频繁，大部分表单内容需要用到此标记。其语法如下：inPutaligh=left|righ|top|middle|bottomname=valuetype=text|textarea|password|checkbox|radio|submit|reset|file|hidden|image|buttonvalue=valuesrc=urlcheckedmaxlength=nsize=nonclick=functiononselect=functionalign：是用于设定表单的位置是靠左（left）、靠右（right）、居中（middle）、靠上 top）还是靠底（bottom）。name：设定当前变量名称。 type：决定了输入数据的类型。其选项较多，各项的意义是： type=text：表示输入单行文本； typet=textarea：表示输入多行文本；type=password:表示输入数据为密码，用星号表示；type－checkbox：表示复选框；type－radio：表示单选框；type一submit：表示提交按钮，数据将被送到服务器； tyPe－reset：表示清除表单数据，以便重新输入；type－file：表示插入一个文件；type－hidden：表示隐藏按钮；type＝image：表示插入一个图像；type一button：表示普通按钮；value：用于设定输入默认值，即如果用户不输入的话，就采用此默认值；src：是针对type=image的情况来说的，设定图像文件的地址；checked：表示选择框中，此项被默认选中；maxlength：表