教学项目十六HTML中表单网页设计(二) 【教学内容】 讲解HTM中复选框、多行文本框、下拉列表的使用 教学目的 使学生掌握综合性表单的制作 教学重点】 HTM综合性表单设计 【教学难忘】 理解表单中相应元素对应标志及属性的含义 【教学方式】 案例分析式、项目教学 【教学参考】 1.< JavaScript入门与提高>杨浩著 清华大学出版社 2.< JavaScript从入门到精通 电脑报社出版 3.TML网页制作教程材义语编著铁道出版社 4.HTML基础与实例程耀编著电子工业出版社
教学项目十六 HTML中表单网页设计(二) 【教学内容】 讲解HTML中复选框、多行文本框、下拉列表的使用 【教学目的】 使学生掌握综合性表单的制作 【教学重点】 HTML综合性表单设计 【教学难点】 理解表单中相应元素对应标志及属性的含义 【教学方式】 案例分析式、项目教学 【教学参考】 1．<<JavaScript 入门与提高>> 杨浩著 清华大学出版社 2．<<JavaScript从入门到精通>> 电脑报社出版 3．TML网页制作教程 材义语编著铁道出版社 4．HTML基础与实例 程耀编著电子工业出版社
新课】 HMTL中表单元素的使用 1复选框 格式: < input type= checkbox name=字段名 value=字段值 checked> 2多行文本框 格式 textarea name=字段名rows=滚动文本框行数,cols=滚动文本框一行中的 字符数></ textarea> 3.下拉列表 格式: select name=字段名se=显示的列表项数 multiple> < option value=值 selected>显示列表项值< option> /select> 说明 size:指定屏幕上下拉列表中同时显示的选项个数 multiple:设定是否可以复选(同时按住组合键CTRL+SHFT实现复选操作) selected:设定选项已选中
【新课】 一、HMTL中表单元素的使用 1.复选框 格式： <input type=checkbox name=字段名value=字段值checked> 2.多行文本框 格式： <textarea name=字段名 rows=滚动文本框行数，cols=滚动文本框一行中的 字符数></textarea> 3.下拉列表 格式： <select name=字段名 size=显示的列表项数multiple> <option value=值 selected>显示列表项值</option> </select> 说明： size: 指定屏幕上下拉列表中同时显示的选项个数 multiple:设定是否可以复选(同时按住组合键CTRL+SHIFT实现复选操作) selected:设定选项已选中
例1:设计网页设计大赛作品征集网页 强我的个人网页- Microsoft Internet Explorer 文件()编锋(E)查看①D收藏(4)工具()帮助(m ⊙后退··冈的搜索☆收藏夹的媒体的总,品 s@團③ 地址(D)·e]D: \Front Page\htm1am1e1a4htm 输入中文,直接牌索y 前网页设计大赛作品征集表 姓名 EMAIL 性别。男。女 制作时间2001年1月日 请上传你照片 察★★★★你使用的开发有:★★★★ 回 FRONTPAGE口 DREAMWEAVER口 JavaScript口 FLASH 网页特色介绍 请写出不超过200字的网站特色介绍 发送 重填 图毕 3我的电脑 开始通我的个人网页Re下xo.如精品课课件 「回 Microsoft Pow. 22:09
例1： 设计网页设计大赛作品征集网页
程序代码如下 <HTML> <Head> <ttle>我的个人网页< /title <body background=1l. gif> form> p align= center-< cfont size=5face=隶书>网页设计大赛作品征集表</p <table borderI align=center> <tr> <d>姓名< Input type= text name= xm size=10></d <td> EMAIL<input type=password size=12 name=mail></td> <tr> < ctd colspan=2>性别< Input type= Radio name= sex value=男>男 < Input type= radio name= sex value=女>女 </td> 制作时间< select <option value=2001>200 1</option> <option value=2002>2002</option> option value=2003>2003</option> <option value=2004>2004</option> </ select>年
程序代码如下： <HTML> <Head> <title>我的个人网页</title> </head> <body background=11.gif> <form> <p align=center><font size=5 face=隶书>网页设计大赛作品征集表</p> <table border=1 align=center> <tr> <td>姓名<input type=text name=xm size=10></td> <td>EMAIL<input type=password size=12 name=mail></td> </tr> <tr> <td colspan=2>性别<input type=radio name=sex value=男>男 <input type=radio name=sex value=女>女 </td> </tr> <tr> <td colspan=2> 制作时间<select> <option value=2001>2001</option> <option value=2002>2002</option> <option value=2003>2003</option> <option value=2004>2004</option> </select>年
程序代码如下 <HTML> <titc我的个人网页<tite </head> <body background=1l. gif> <form> p align= center>< font size=5face=隶书>网页设计大赛作品征集表</ <table border=l align=center> <tr> <d>姓名< Input type= text name= Xm size=10></td <td EMAIL<input type=password size=12 name=mail></td> </tr> < td colspan=2>性别< input type=radio name= sex value=男>男 < Input type= radio name= sex value=女>女 <td colspan=2> 制作时间< select> <option value=2001>2001</option> <option value=2002>2002</option> <option value=2003>2003</option> <option value=2004>2004<option> select>年
程序代码如下： <HTML> <Head> <title>我的个人网页</title> </head> <body background=11.gif> <form> <p align=center><font size=5 face=隶书>网页设计大赛作品征集表</p> <table border=1 align=center> <tr> <td>姓名<input type=text name=xm size=10></td> <td>EMAIL<input type=password size=12 name=mail></td> </tr> <tr> <td colspan=2>性别<input type=radio name=sex value=男>男 <input type=radio name=sex value=女>女 </td> </tr> <tr> <td colspan=2> 制作时间<select> <option value=2001>2001</option> <option value=2002>2002</option> <option value=2003>2003</option> <option value=2004>2004</option> </select>年 </td> </tr>