教学项目十六HTML中表单网页设计（二）【教学内容】讲解HTML中复选框、多行文本框、下拉列表的使用【教学目的】使学生掌握综合性表单的制作【教学重点】HTML综合性表单设计【教学难点】理解表单中相应元素对应标志及属性的含义【教学方式】案例分析式、项目教学【教学参考】1.<<JavaScript入门与提高"杨浩著清华大学出版社2.<<JavaScript从入门到精通>> 电脑报社出版3.TML网页制作教程材义语编著铁道出版社4.HTML基础与实例程耀编著电子工业出版社【新课】一、HMTL中表单元素的使用1.复选框格式：vi叩ut type=checkbox name二字段名value=字段值checked>2.多行文本框格式：<textarea name=字段名rows=滚动文本框行数，cols=滚动文本框一行中的字符数〉</textarea>3.下拉列表格式：<sclect namc=字段名、126=显示的列表项数multiplc><option value=值selected>显示列表项值</option></select>说明：size:指定屏幕上下拉列表中同时显示的选项个数multiple:设定是否可以复选（同时按住组合键CTRL+SHIFT实现复选操作）selected:设定选项己选中例1:设计网页设计大赛作品征集网页U 我的个人网页—BierosroTt Iwterne-t Explorer文件(E) <1) 近石(V) 收球 0) XH (I ) ffifth 01)。
后 iE -:乜tlb I' 1 4^1 G ：\FrontPaccVhtmlzan.plc\a4. htm记砺本 - 艮我的个... EN 0 ,17 28程序代码如下： <HTML> <Head>vti 〔le>我的个人网页</title> </head><body background=l I .gif> <form><p align=center><font size=5 face=隶书〉网页设计大赛作品征集表</p> <table border= 1 align=center> <tr> vid>姓名vinpultype=text name=xmsize=10></td>vid>EMAILvinputtype二passwordsize=12name=mail></td></tr> <lr> <td colspan=2>性另ijvinputtypc=radioname=sexvaluc=^>^<input type=radio name=sex value=々>女</td> </tr> <tr><td colspan=2> 制作时间<select>凶回lb /按亲，收I 哄—媒体®合―网页设讦大家作品彳正来奏EMAIL□ FLASH弗JT 乍 BrtQ 2003 v " 佐政朋的k*工耳B FRONTPAGE 口 DRE•也介细 AVER O JavaScript诺与出不超过200字的隅场绍希完毕 ______________________________________________ 2我的电脂<option value=2001 >200 l</option><option value=2002>2002</option> <option value=2003>2003</option> <option value=2004>2004</option> v/select> 年<select><option value= 1 > 1 </option> <option value=2>2</option> <option value=3>3</option> <option value=4>4</option> <option value=5>5</option> <option value=6>6</option> <option value=7>7</option> <option value=8>8</option> <option value=9>9</option> <option value= 1 ()> 11 </option> <option value= 12> 12</option> v/select> 月<select><option value= 1 > 1 </option> <option value=2>2</option> <option value=3>3</option> <option value=4>4</option> <option value=5>5</option> <option value=6>6</option> <option value=7>7</option> <option value=8>8</option> <option value=9>9</option> <oplion value= 10> 10</option> <option value=l 1>1 l</option> <option vaiue= 12> 12</option> <option value= 13> 13</option> <option value= 14> 14</option> <option value= 15> 15</option> <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><oplion value=25>25</option><option value=26>26</option><option value=27>27</option><oplion value=28>28</option><option value=29>29</option><option value=30>30</option><option value=31 >31 </option></select> 日</td></tr><tr><td colspan=2>你使用的开发工具有：</td></tr><tr><td colspan=2><input type=checkbox name=ts() value=on checked>FRONTPAGE<input type=checkbox name=tsl 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>网页特色介绍v/td></tr><lr><td coispan=2><tcxtarca rows=6 cols=80 name=prop>请写出不超过200 字的网站特色介绍</tcxtarca> </td></tr><tr><td><input type=submit value=发送name=ss></td><td><input type=reset value= 重填name=ctx/td></tr></table></form></body> </html>二、表单字段外框标记的使用 标志：(1 )<fieldsel></fieldsel> 用于生成字段外框 (2) <legend></legend> 定义字段外框的标题名称 例2.设计有字段外框的网页■ xorosolft Xnt: ornct: Hxpl ornr文件•福堡) 5K« 成) 收IT (A) XM QL ) 神助Q1)<HTML> <Head><title> 我的网页 </title> </head><body bgcoloi -#00eeff><ccntcr><p align=center><fbnt size=5 face=隶书》学生信息调查表</font></p></ccntcr> <lable border=0 align=center width=400> <form> <tr><td colspan=2> <fieldset><legend> 班级概况 </legend>班 级vinput type=text name=bj size=l()xbr>布的回曲 ；，/ 5*皿佐 @回，L_J 益址 <IO 切 G \P»・oneP<«・\ht.mr<5I /l ・\<5 h/m▼ Cl 的—诞'气 ”程序代码如下:班主任〈input【ype=text size=10 name=bzr><br>专业<input type=radio name=zy vaiue=l checked>计算机应用<input type=radio name=zy value=2>网络工程<input type=radio name=zy value=3>图像处理</fieldset></td></tr><lr><ld coispan=2><fieldset><legend> 学生信息</legend>姓名〈input type=text name=xm size=l()xbr>性另!j<input type=radio name=sex value=^>男<input type=radio name=sex value=^C>i<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><lr><td><input type=submit value二提交>  ；v/td> <td><input typc=rcset value=重填>v/td></tr></form></table></body></html>【课后小结】表单是网页实现交互处理的工具，熟练掌握表单中元素的标志和属性，是设计表单网页关键。