教学项目十五 HTML中表单网页设计 (一 )
【 教学内容 】
讲解 HTML中头部标志和简单表单制作
【 教学目的 】
使学生了解头部标志功能和掌握简单表单网页制作
【 教学重点 】
HTML中表单元素标志与属性
【 教学难点 】
HTML中表单元素标志与属性
【 教学方式 】
案例分析式, 项目教学
【 教学参考 】
1,<<JavaScript 入门与提高 >> 杨浩著 清华大学出版社
2,<<JavaScript从入门到精通 >> 电脑报社出版
3,TML网页制作教程 材义语编著 铁道出版社
4,HTML基础与实例 程耀编著 电子工业出版社
【 新课 】
一,HTML头部标志
在网页对应的 HTML代码中，在头部标志 <head> </head>之
间可以插入部分标志，包含当前文档的有关信息。
主要的标志,
<title> 设定标题
<link>设定外部的样式表文件
<style>设定 CSS层叠样式表单
< meta>设定文档本身的信息
Meta标志的功能是定义页面中的信息，提供文档的关键字、
作者、描述等多种信息，这此信息不会在浏览器页面中显示。在
<head> </head>中可以包括任意数量的 <meta>标志。
<meta>标志的属性,
http-equiv,生成一个 HTTP标题域；
Content,定义的相关描述项对应的取值；
Name:相关描述项的名称
例 1：在 frontpage中查看网页的头部信息
<meta http-equiv=“content-type”
content=“text/html;charset=gb2312”>
定义网页中显示的信息对应的字符集为简体中文 ;
<meta name=“generator” content=“microsoft frontpage 4.0”>
定义网页默认的编辑工具为 frontpage 软件,
分析,
例 2.设定自动刷新
例 3.设定自动跳转网页
二, 表单网页的设计
1,表单标志
<form></form>
格式,
<form name=表单名 action=处理表单数据文件名
method=传输方式 >
<form>与 </form> 定义表单的开始与结束, 常用的属性有,
Name:表单的名称
action,指定处理表单中提交数据的网页文件
method,指定表单中数据的传输方式
method=get 将表单数据附在 URL后面, 无保密性
Method=post 将表单数据包含在表单的主体中, 与表单一起传
送到服务器端处理程序
2,单行文本框
格式,
<input type=text
size=文字域的宽度
name=字段名
value=默认值
maxlength=最大字符个数 >
3.密码域
格式,
<input type=password
size=显示字符个数
name=字段名
maxlength=最大字符个数 >
5,提交按钮与取消按钮
格式,
<input type=submit value=按钮文字 >
<input type=reset value=按钮文字 >
4.单选按钮
格式,
<input type=radio name=字段名 value=默认值
checked>
例：设计如下表单,
<HTML>
<Head>
<title>我的个人网页 </title>
</head>
<body background=2.gif>
<center><font face=隶书 size=6>客户调查表 </font></center>
<form method=post>
<table align=center>
<tr>
<td>职业
<td><input type=text name=zy size=12 maxlenth=16 value=IT行业 >
</tr>
<tr>
<td>QQ号
<td><input type=password name=qq size=12 maxlenth=12>
</tr>
<tr>
<td colspan=2>你对本站点提供的服务,</td>
</tr>
<tr>
<td colspan=2>
<input type=radio name=fw value=bad>不满意
<input type=radio name=fw value=common checked>比较满意
<input type=radio name=fw value=good>很满意
</td></tr>
<tr>
<td><input type=submit value=提交 ></td>
<td><input type=reset value=重填 ></td>
</tr>
</table>
</form>
</body>
</html>
【 课后小结 】
HTML中制作的表单是一种静态形式, 要处理表单数据并返回表单
处理信息, 必须与站点服务器端程序配合使用 。
【 教学内容 】
讲解 HTML中头部标志和简单表单制作
【 教学目的 】
使学生了解头部标志功能和掌握简单表单网页制作
【 教学重点 】
HTML中表单元素标志与属性
【 教学难点 】
HTML中表单元素标志与属性
【 教学方式 】
案例分析式, 项目教学
【 教学参考 】
1,<<JavaScript 入门与提高 >> 杨浩著 清华大学出版社
2,<<JavaScript从入门到精通 >> 电脑报社出版
3,TML网页制作教程 材义语编著 铁道出版社
4,HTML基础与实例 程耀编著 电子工业出版社
【 新课 】
一,HTML头部标志
在网页对应的 HTML代码中，在头部标志 <head> </head>之
间可以插入部分标志，包含当前文档的有关信息。
主要的标志,
<title> 设定标题
<link>设定外部的样式表文件
<style>设定 CSS层叠样式表单
< meta>设定文档本身的信息
Meta标志的功能是定义页面中的信息，提供文档的关键字、
作者、描述等多种信息，这此信息不会在浏览器页面中显示。在
<head> </head>中可以包括任意数量的 <meta>标志。
<meta>标志的属性,
http-equiv,生成一个 HTTP标题域；
Content,定义的相关描述项对应的取值；
Name:相关描述项的名称
例 1：在 frontpage中查看网页的头部信息
<meta http-equiv=“content-type”
content=“text/html;charset=gb2312”>
定义网页中显示的信息对应的字符集为简体中文 ;
<meta name=“generator” content=“microsoft frontpage 4.0”>
定义网页默认的编辑工具为 frontpage 软件,
分析,
例 2.设定自动刷新
例 3.设定自动跳转网页
二, 表单网页的设计
1,表单标志
<form></form>
格式,
<form name=表单名 action=处理表单数据文件名
method=传输方式 >
<form>与 </form> 定义表单的开始与结束, 常用的属性有,
Name:表单的名称
action,指定处理表单中提交数据的网页文件
method,指定表单中数据的传输方式
method=get 将表单数据附在 URL后面, 无保密性
Method=post 将表单数据包含在表单的主体中, 与表单一起传
送到服务器端处理程序
2,单行文本框
格式,
<input type=text
size=文字域的宽度
name=字段名
value=默认值
maxlength=最大字符个数 >
3.密码域
格式,
<input type=password
size=显示字符个数
name=字段名
maxlength=最大字符个数 >
5,提交按钮与取消按钮
格式,
<input type=submit value=按钮文字 >
<input type=reset value=按钮文字 >
4.单选按钮
格式,
<input type=radio name=字段名 value=默认值
checked>
例：设计如下表单,
<HTML>
<Head>
<title>我的个人网页 </title>
</head>
<body background=2.gif>
<center><font face=隶书 size=6>客户调查表 </font></center>
<form method=post>
<table align=center>
<tr>
<td>职业
<td><input type=text name=zy size=12 maxlenth=16 value=IT行业 >
</tr>
<tr>
<td>QQ号
<td><input type=password name=qq size=12 maxlenth=12>
</tr>
<tr>
<td colspan=2>你对本站点提供的服务,</td>
</tr>
<tr>
<td colspan=2>
<input type=radio name=fw value=bad>不满意
<input type=radio name=fw value=common checked>比较满意
<input type=radio name=fw value=good>很满意
</td></tr>
<tr>
<td><input type=submit value=提交 ></td>
<td><input type=reset value=重填 ></td>
</tr>
</table>
</form>
</body>
</html>
【 课后小结 】
HTML中制作的表单是一种静态形式, 要处理表单数据并返回表单
处理信息, 必须与站点服务器端程序配合使用 。
