湖北职晚计算机科学与技术理论课教案一《网页设计》 教学项目十六 HTML中表单网页设计(二 【教学内容】 讲解HML中复选框、多行文本框、下拉列表的使用 【教学目的】 使学生掌握综合性表单的制作 【教学重点】 HTML综合性表单设计 【教学难点】 理解表单中相应元素对应标志及属性的含义 【教学方式】 案例分析式、项目教学 【教学参考】 1.<< JavaScript入门与提高〉杨浩著 清华大学出版社 2.< JavaScript从入门到精通>〉 电脑报社出版 3.TML网页制作教程材义语编著铁道出版社 4.HIML基础与实例程耀编著电子工业出版社 【新课】 HMIL中表单元素的使用 1.复选框 格式: < cinput type= checkbox name=字段名 value=字段值 checked> 2.多行文本框 格式 < textarea name=字段名rows=滚动文本框行数,cols=滚动文本框一行中的字符 数></ textarea> 3.下拉列表 格式 < select name=字段名size=显示的列表项数 multiple>
湖北职院计算机科学与技术系理论课教案—《网页设计》 教学项目十六 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> 说明: size:指定屏幕上下拉列表中同时显示的选项个数 multiple:设定是否可以复选(同时按住组合键CIRL+ SHIFT实现复选操作) selected:设定选项已选中 例1:设计网页设计大赛作品征集网页 我的个人网页一tm不】 文件)编辑思)查看①收)工具辽)帮助 ⊙后凶团的抛索☆收限买的媒体,品8·□ 种到链腰 网页设计大作品征来表 EMAIL.... 性别⊙O女 FRONTPAGE口DR ER口 Javascript口 FLASH 发送 完毕 我的电脑 1class 2ind·「C2记事本我的个 EN? 程序代码如下 <HTML> ttfe我的个人网页</ title <body background=ll. gif> p align= center>< cfont size= 5 face=隶书>网页设计大赛作品征集表</p> <table border=l align=center> <d>姓名< Input type= text name= Xm size=10><d> <td>EMAIL<input type=password size-12 name=mail></td> < <td colspan=2>性别< nput type=radio names= ex value=男>男 < cinput type= radio name= sex value=女>女
湖北职院计算机科学与技术系理论课教案—《网页设计》 <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=女>女
湖北职晚计算机科学与技术理论课教案一《网页设计》 <tr> <td colspan=2> 制作时间< select <option value=2001>2001</option> <option value=2002>2002</option> <option value=2003>2003< <option value=2004>2004 </option> <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=ll>ll</option> <option value=12>12<option <option value=13>13<option> <option value=14>14</option> <option value=15>15<option>
湖北职院计算机科学与技术系理论课教案—《网页设计》 </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 colspan=2> 你使用的开发工具有 <td colspan=2> <input type=checkbox name=tso value=on checked>FRONTPAGE <input type=checkbox name=tsI value=on >DREAMWEAVER <input type=checkbox name=ts2 value=on >JavaScript <input type=checkbox name=ts3 value=on >FLASH < <td colspan=2>网页特色介绍<td </tr> < <textarea rows=6cols=80name=prop>请写出不超过200字的网站特色介绍< textarea>
湖北职院计算机科学与技术系理论课教案—《网页设计》 <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>
湖北职晚计算机科学与技术理论课教案一《网页设计》 <td><input type=submit value=2i name=ss></td> <d>< -input type= Reset value=重填name=ct></d </tr> </table> orm 、表单字段外框标记的使用 标 (1)<fieldset></fieldset> 用于生成字段外框 (2)<legend></l 定义字段外框的标题名称 例2设计有字段外框的网页 后凶图必搜索言收假夹的体·品圈·□出 转到 班圾概况 专业。计算机应用。网络工程⊙图像处理 程序代码如下 <HTML> <ttle我的网页< /title </head> < center>< p align= center>< font size= 5 face=隶书>学生信息调查表<font</p>< /center> <table border=0 align=center width=400>
湖北职院计算机科学与技术系理论课教案—《网页设计》 <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>