教学目的： 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
name=value
type=text|textarea|password|checkbox|radio|submit|reset|file|hidden|image|button
value=value
src=url
checked
maxlength=n
size=n
onclick=function
onselect=function>
align：是用于设定表单的位置是靠左（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：表示在输入单行文本的时候，最大输入字符个数；
size：用于设定在输入多行文本时的最大输入字符数，采用width，height方式；
onclick：表示在按下输入时调用指定的子程序；
onselect：表示当前项被选择时调用指定的子程序。 3、<select>下拉菜单标记
用<select>标记可以在表间中插入一个下拉菜单，它需与<option>标记联用，因为下拉菜单中的每个选项要用<option>标记来定义。<select>标记的语法如下：
<select
name=nametext
size=n
multiple>
其中name：设定下拉式菜单的名称；
size：设定菜单框的高度，也就是一次显示几个菜单项，一般取默认值（size="1"）；
multiple：设定为可以进行多选。 4、<option>选项标记
该标记为下拉菜单中一个选项，语法很简单：
<option
selected
value=value>
其中selected：表示当前项被默认选中；
value：表示该项对应的值，在该项被中之后，该项的值就会被送到服务器进行处理。 5、<textarea>多行文本输入标记
这是一个建立多行文本输入框的专用标记，其语法如下：
<textarea
name=name
cols=n
rows=n
wrap=off|hard|soft>
各参数含义：name：文本框名称；clos：宽度；rows：高度（行数）；wrap：换行控制，off：不自动换行；hard：自动硬回车换行，换行标记一同被传送到服务器中去；soft：自动软回车换行，换行标记不会传送到服务器中去。
表单所涉及的标记较多，参数也较复杂，而实际制作表单时就是这些标记的组合应用，但一般的表单不可能涉及所有参数，我们还是那个原则，能用默认值的尽量用默认值，绝不设定一个不用的参数。我在后面的文章中将通过实例介绍一些常用参数的应用技巧。 三、 表单网页的制作方法 通常制作表单网页的方法有两种，第一种是手工添加，第二种是利用表单向导，这里我们着重介绍第一种方法。
方法一： 1、新建网页
2、在网页上输入“留言簿”三个字后我们就需要插入一个可以为访客提供姓名输入的栏目。 单击菜单：插入――表单，会自动弹出一个下拉菜单，列出所有可供选择的字段
仔细观察，看看我们现在需要的是哪一个字段？（这里我们需要插入一个“单行文本框”）选中“单行文本框”后你的网页中会自动出现一个虚线框（这就是整个表单的范围）、一个“单行文本框”还有一对“提交”、“全部重写”按钮。
注意：
虚线框中的每个元素可以看作是文字一样地对待，光标可以在它们之间移动，并可以在它们之间插入空格、空行
将光标移至“单行文本框”前，插入文字“姓名”，再在“单行文本框”后插入文字“性别” 4、下面该作“性别”的字段了，经过分析，性别只可能有一种选择，不是“男”就是“女”，就像我们作单选题一样，那么想一想这里该用哪一个字段呢。
我们发现“表单”里有一项是“单选按钮”，对，就是它了。
我们在“性别”后面插入两个“单选按钮”，并分别在它们后面写上“男”、“女”。
注意：
可以把字段当作文字一样来对待，那我们也可以对它进行“剪切”“复制”“粘贴”等操作，这里插入的第二个“单选按钮”就可以复制前一个。
想一想：
预览发现，系统会自动让第一个“单选按钮”成为默认项，那么这样的默认项能不能改变或去掉呢？
当然可以，双击一个“单选按钮”，会出现“单选按钮属性”对话框，默认选中就是设置的“初始状态”中的“已选”，可以改成“未选”。 5、“性别”只能选择一个，那“爱好”就有好多选择了，这里又该用什么字段呢。
“表单”菜单里有一个“复选框”，这们可以用它来设计“爱好”的选项。
注意：
“单选按钮”是圆形的，“复选框”是方形的，我们可以用“单选按钮”来设计单选题，用“复选框”来设计多项选择题。
双击“复选框”同样可以打开“复选框属性”对话框，看看根据自己的需要可以改动哪些参数。 6、要实现单项选择我们除了可以用“单选按钮”外还可以使用“下拉菜单”，这种字段特别适合用在选择项较多的情况下（如“职业”）。
通过菜单：插入――表单――下拉菜单，在网页中适当的地方插入一个“下拉菜单”，这时你会发现插入的“下拉菜单”中的选项是空的，怎么添加呢？
还是通过双击“下拉菜单”，打开“下拉菜单属性”对话框。
点击“添加”按钮，在“添加选项”对话框中添加需要的选择项，注意，如果是希望默认选择的，可以选中下面“初始状态”中的“已选”。
可以再添加其它选项，并且可以利用“上移”“下移”按钮调整各选项之间的顺序。 7、如果要做留言板需要给访客提供能输入大量文字的地方，显然“单选文本框”是不够的，我们该加入什么字段呢？
在插入――表单里还有一个“滚动文本框”，我们点击插入，而且还可以调整它的大小，当里面输入的文字多了后它会自动产生滚动条。 8、我们再来看看“提交”和“全部重写”两个按钮，这两个按钮是在插入任何一个表单字段时自动插入的，当然你也可以根据需要删除、修改。
如果想把按钮上的文字改掉该怎么办呢，我们还是双击按钮，把“标签”的内容改掉即可。
这里要注意的是，按钮“名称”和“标签”的区别。 注意可以结合我们上节课讲过的表格为表单网页排版布局。 除了我们刚才介绍的那种根据自己需要在表单菜单里逐一添加表单元素外，我们还有一种更简单的制作表单网页的方法，就是利用表单网页向导。 方法二： 1、菜单：文件――新建――网页
在如何做网页“新建”对话框里选择“表单网页向导”，确定。
注意：要想打开“新建”对话框，必须使用菜单，不要直接点击快捷工具栏上的“新建”按钮。 2、下一步，点击“添加”选择一种表单类型，这里我们可以看出表单不仅仅是用在打造留言板上，它在购物订单、调查信息、申请信箱、搜索等很多地方都常用到，这里我们选择“个人信息”为例吧。 3、在下一步可以根据自己的需要选择需要的参数，并且进行必要的设置。（其实这一步大家填写的就是一张表单） 4、还可以为你的表单网页选择多个类型的表单，每一步设置好了即可完成。 5、这时就自动生成了一张表单网页，我们还可以根据自己的需要对网页上的任何元素进行必要的修改。 这里我们可以看出网页上的表单元素也是利用表格进行排版的，我们还可以再进行修改，再插入图片、文字、表格等元素，还可以再进行彩上的修饰，总之希望大家能发挥自己的想象，做出的网页具有自己的个性。 四、 表单处理 在网页中加入表单用来收集信息时，表单本身只负责收集使用者输入的资料，真正在幕后负责接收、传递、处理、回应工作的，是CGI（Common Gateway Interface），即公共网关接口通信协议。一般情况下，如果要在网页中加入表单，就意味着必需自己撰写或使用别人写好的CGI程序。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、自己设计一个精美的表单。 课后体会： 仔细体会各种表单元素的使用方法及综合运用。
通过本章学习，能够更加理解动态网页的概念，理解表单是设计者与浏览者之间的桥梁，从而使网站更具有吸引力。 | 
发表评论