网页设计HTML中表单网页设计教案

来源:教案设计时间:2023-10-20 19:25:03

教学项目十六 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> 班  级<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=提交>  </td> <td><input type=reset value=重填></td> </tr> </form> </table> </body> </html> 【课后小结】表单是网页实现交互处理的工具,熟练掌握表单中元素的标志和属性，是设计表单网页关键。

上一篇：设计的实习报告模板6篇
下一篇：初中语文,《海燕》优秀教案材料

扩展阅读文章

推荐阅读文章