【网页设计教案】HTML中表单网页设计二.docVIP

教学项目十六 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=centerfont size=5 face=隶书网页设计大赛作品征集表/p table border=1 align=center tr td姓名input type=text name=xm size=10/td tdEMAILinput 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 valueoption option valueoption option valueoption option valueoption /select年 select option value=11/option option value=22/option option value=33/option option value=44/option option value=55/option option value=66/option option value=77/option option value=88/option option value=99/option option value=1011/option option value=1212/option /select月 select option value=11/option option value=22/option option value=33/option option value=44/option option value=55/option option value=66/option option value=77/option option value=88/option option value=99/option option value=1010/option option value=1111/option option value=1212/option option value=1313/option option value=1414/option option value=1515/option option value=1616/option option value=1717/option option value=1818/option option value=1919/option option value=2020/option option value=2121/option option value=2222/option option value=2323/option option value=2424/opt