教学项目十六 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>年 <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=10>11</option> <option value=12>12</option> </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=10>10</option> <option value=11>11</option> <option value=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> <option value=25>25</option> <option value=26>26</option> <option value=27>27</option> <option 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=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> 【课后小结】 表单是网页实现交互处理的工具,熟练掌握表单中元素的标志和属性，是设计表单网页关键。