教学项目十六 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=字段名 size=显示的列表项数 multiple>
<option value=值 selected>显示列表项值 </option>
</select>
说明,
size,指定屏幕上下拉列表中同时显示的选项个数
multiple,设定是否可以复选 (同时按住组合键 CTRL+SHIFT实现复选操作 )
selected,设定选项已选中
例 1,设计网页设计大赛作品征集网页
程序代码如下,
<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>
<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>
<tr>
<td colspan=2>
你使用的开发工具有,
</td>
</tr>
<tr>
<td colspan=2>
<input type=checkbox name=ts0 value=on checked>FRONTPAGE
<input type=checkbox name=ts1 value=on >DREAMWEAVER
<input type=checkbox name=ts2 value=on >JavaScript
<input type=checkbox name=ts3 value=on >FLASH
</td>
</tr>
<tr>
<td colspan=2>网页特色介绍 </td>
</tr>
<tr>
<td colspan=2>
<textarea rows=6 cols=80 name=prop>请写出不超过 200字的网站特色介绍 </textarea>
</td></tr>
<tr>
<td><input type=submit value=发送 name=ss></td>
<td><input type=reset value= 重填 name=ct></td>
</tr>
</table>
</form>
</body>
</html>
二, 表单字段外框标记的使用
标志,
(1)<fieldset></fieldset>
用于生成字段外框
(2) <legend></legend>
定义字段外框的标题名称
例 2.设计有字段外框的网页
程序代码如下,
<HTML>
<Head>
<title>我的网页 </title>
</head>
<body bgcolor=#00eeff>
<center><p align=center><font size=5 face=隶书 >学生信息调查表 </font></p></center>
<table border=0 align=center width=400>
<form>
<tr>
<td colspan=2>
<fieldset>
<legend>班级概况 </legend>
班 &nbsp;&nbsp;级 <input type=text name=bj size=10><br>
班主任 <input type=text size=10 name=bzr><br>
专业 <input type=radio name=zy value=1 checked>计算机应用
<input type=radio name=zy value=2>网络工程
<input type=radio name=zy value=3>图像处理
</fieldset>
</td>
</tr>
<tr>
<td colspan=2>
<fieldset>
<legend>学生信息 </legend>
姓名 <input type=text name=xm size=10><br>
性别 <input type=radio name=sex value=男 >男
<input type=radio name=sex value=女 >女 <br>
年龄 <select>
<option value=16>16</option>
<option value=17>17</option>
<option value=18>18</option>
<option value=19>19</option>
<option value=20>20</option>
<option value=21>21</option>
<option value=22>22</option>
<option value=23>23</option>
<option value=24>24</option>
<option value=25>25</option>
</select>
</fieldset>
</td>
</tr>
<tr>
<td><input type=submit value=提交 >&nbsp;&nbsp;</td>
<td><input type=reset value=重填 ></td>
</tr>
</form>
</table>
</body>
</html>
【 课后小结 】
表单是网页实现交互处理的工具,熟练掌握表单中元素的标志和属性
，是设计表单网页关键。