文档介绍：表单网页的制作方法教学目的: 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 地址。其基本语法结构如下: <form action = url method=get|post name = value onreset=function onsubmit = function target=window> </form> 其中 action :用于设定处理表单数据程序 url 的地址。这样的程序通常是 CGI 应用程序,采用电子邮件方式时,用 action="mailto: 你的邮件地址"。 method :指定数据传送到服务器的方式。有两种主要的方式,当 method=get 时,将输入数据加在 action 指定的地址后面传送到服务器;当 method=post 时则将输入数据按照 HTTP 传输协议中的 post 传输方式传送到服务器,用电子邮件接收用户信息采用这种方式。 name : 用于设定表单的名称。 onrest 和 onsubmit 是主要针对“ reset ”按钮和“ submit ”按钮来说的,分别设定了在按下相应的按钮之后要执行的子程序。 target :指定输入数据结果显示在那个窗口,这需要与<frame> 标记配合使用。 2、<input> 表单输入标记此标记在表单中使用频繁,大部分表单内容需要用到此标记。其语法如下: <inPut aligh=left|righ|top|middle|bottom