《Web前端开发》实验教学指导/实验四:在网页中使用表单和多媒体 《Web前端开发》实验教学指导 实验四:在网页中使用表单和多媒体 、实验目的 掌握常用的表单元素及使用方法: 2、掌握在网页中使用多媒体的具体方法; 3、了解多媒体编码的基本原理 二、实验环境 1、 Windows XP/windows7操作系统 2、安装有 Adobe dreamweaver CS6软件的计算机一台 3、局域网网络环境,并且使用固定IP地址 三、实验要求 1、熟悉常用的表单,并掌握其基本的使用方法 2、掌握在网页中使用本地和远程多媒体文件的方法。 四、实验原理 1、表单元素的使用方法; 2、多媒体元素的使用方法 五、实验步骤 1、简单的用户登录界面 编写简单的用户登录界面,效果如图4-1所示 用户登录界面 用户名: 密码 提交」重置 图4-1用户登录界面 参考代码 <doctype html> <meta charset="utf-8> tte用户登录<rite> </head> 河南中医学院互联网应用技术研究 本讲共计12页|当前第1页
《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单和多媒体 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 1 页 《Web 前端开发》实验教学指导 实验四：在网页中使用表单和多媒体 一、实验目的 1、掌握常用的表单元素及使用方法； 2、掌握在网页中使用多媒体的具体方法； 3、了解多媒体编码的基本原理。 二、实验环境 1、Windows XP/Windows 7 操作系统； 2、安装有 Adobe Dreamweaver CS6 软件的计算机一台； 3、局域网网络环境，并且使用固定 IP 地址。 三、实验要求 1、熟悉常用的表单，并掌握其基本的使用方法； 2、掌握在网页中使用本地和远程多媒体文件的方法。 四、实验原理 1、表单元素的使用方法； 2、多媒体元素的使用方法 五、实验步骤 1、简单的用户登录界面 编写简单的用户登录界面，效果如图 4-1 所示。； 参考代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>用户登录</title> </head> 图 4-1 用户登录界面
Wcb前端开发》实验教学指导/实验四:在网页中使用表单和多媒体2 <table cellspacing="0" cellpadding="0" style="margin: 50px; padding: 30p background-color: #6CF;"> <t>< td colspan="2" height="25" style="text- align center;">用户登录界面</d<tr> <tr><td colspan=2" height=30"></td></tr < <td height="30°wdh="80用户名:</td> td><input type="text"name="username"style="width: 150px; value="/></td> < ctd height="30密码:<d> type="password" name="username" style="width: 150px <tr><td colspan=2"height=10"></td></tr <input type="submit"name="submit"value=1EX"/> <input type="reset"name="reset"value="E FL"style="margin-left: 30px; " 2、使用简单的表单选择个人信息 编写简单表单实现的个人信息修改,效果如图4-2所示 个人信息选择 性别 男女 兴趣爱好:体育运动_娱乐休闲 所在地区:大陆 「提3 图4-2个人信息选择 参考代码: <html> <meta charset="utf-8"> tte>个人信息修改<rtte 河南中医学院互联网应用技术研究 本讲共计12页|当前第2页
《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单和多媒体 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 2 页 <body> <form method="post" name="form"> <table cellspacing="0" cellpadding="0" style="margin:50px; padding:30px; background-color:#6CF;"> <tr><td colspan="2" height="25" style="text-align:center;">用户登录界面</td></tr> <tr><td colspan="2" height="30"></td></tr> <tr> <td height="30" width="80">用户名：</td> <td><input type="text" name="username" style="width:150px;" value=""/></td> </tr> <tr> <td height="30">密码：</td> <td><input type="password" name="username" style="width:150px;" value=""/></td> </tr> <tr><td colspan="2" height="10"></td></tr> <tr> <td colspan="2" height="40" style="text-align:center;"> <input type="submit" name="submit" value="提交"/> <input type="reset" name="reset" value="重置" style="margin-left:30px;"/> </td> </tr> </table> </body> </html> 2、使用简单的表单选择个人信息 编写简单表单实现的个人信息修改，效果如图 4-2 所示。 参考代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>个人信息修改</title> </head> 图 4-2 个人信息选择
Wdb前端开发》实验教学指导/实验四:在网页中使用表单和多媒体3 <form method="post"name="form"id="form"> able cellspacing="0" cellpadding=0" style="margin: 50px; padding: 20px; background-color #6CF; text-align: left;"> <tr>< ctd colspan="2 height=="25" style="text- align: center;">个人信息修改 </td></tr> <trstd colspan="2"height="20"></td></tr> < td height="30"wdh="80">性别:</td> <input type="radio"name="sex"id="man"value="1"/> <label for="man">#</label> <input type="radio"name="sex"id="woman"value=2"/> label for="woman">sr</label> </td> </tr> < <td height="30">兴趣爱好:<td> input type=" checkbox"name=" hobbies" value="1">体育运动 < cinput type=" checkbox"name=" hobbies" value="2卜>娱乐休闲 < td height="30">所在地区:</td> select style="width: 150px, "name="select < option value="2">香港< /option> < option value="3">澳门< /option> option value="4">台湾 <tr<td colspan="2"height="10"></td></tr> <td colspan="2" height="40"style="text-align: center,"> <input type="submit"name="submit"value="1Ex"7> style="margin-left: 20px; 7 </d> </html> 3、用户详细信息 河南中医学院互联网应用技术研究 本讲共计12页|当前第3页
《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单和多媒体 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 3 页 <body> <form method="post" name="form" id="form"> <table cellspacing="0" cellpadding="0" style="margin:50px; padding:20px; background-color:#6CF; text-align:left;"> <tr><td colspan="2" height="25" style="text-align:center;"> 个人信息修改 </td></tr> <tr><td colspan="2" height="20"></td></tr> <tr> <td height="30" width="80">性别：</td> <td> <input type="radio" name="sex" id="man" value="1"/> <label for="man">男</label> <input type="radio" name="sex" id="woman" value="2"/> <label for="woman">女</label> </td> </tr> <tr> <td height="30">兴趣爱好：</td> <td> <input type="checkbox" name="hobbies" value="1"/>体育运动 <input type="checkbox" name="hobbies" value="2"/>娱乐休闲 </td> </tr> <tr> <td height="30" >所在地区：</td> <td> <select style="width:150px;" name="select"> <option value="1">大陆</option> <option value="2">香港</option> <option value="3">澳门</option> <option value="4">台湾</option> </select> </td> </tr> <tr><td colspan="2" height="10"></td></tr> <tr> <td colspan="2" height="40" style="text-align:center;"> <input type="submit" name="submit" value="提交"/> <input type="reset" name="reset" value=" 重 置 " style="margin-left:20px;"/> </td> </tr> </table> </form> </body> </html> 3、用户详细信息
Wcb前端开发》实验教学指导/实验四:在网页中使用表单和多媒体4 (1)撰写用户详细信息的填写页面,效果如图4-3所示 用户详细信息 姓名 性别 出生日期 联系电话: 常用邮箱: 兴趣爱好:国体育运 动口娱 乐休闲 科学技术音乐影视 教育水平:研究生 所在地区:大 人介绍 交]重 图4-3用户信息信息 (2)请使用最简方法实现该页面。 参考代码 <meta charset="utf-8"> <form method="post"name="form"id="form ellspacing="0" cellpadding="0" style="ma background-color: #6CF; text-align: left;"> <t>< td colspan="2” height"25"stye=" text-align: center;">用户详细信息</td></t> <tr><td colspan=2" height=20"></td></tr> <td><input type="text"name="username"style="width: 150px, "</td> < td height="30">性别:<d <input type="radio"name="sex" id="man"checked value=1"><label for="man">男</abe> <input type="radio" name="sex" id="woman" value="2"><label 河南中医学院互联网应用技术研究 本讲共计12页|当前第4页
《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单和多媒体 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 4 页 （1）撰写用户详细信息的填写页面，效果如图 4-3 所示； （2）请使用最简方法实现该页面。 参考代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>用户详细信息</title> </head> <body> <form method="post" name="form" id="form"> <table cellspacing="0" cellpadding="0" style=" margin:50px; padding:30px; background-color:#6CF; text-align:left;"> <tr><td colspan="2" height="25" style="text-align:center;">用户详细信息</td></tr> <tr><td colspan="2" height="20"></td></tr> <tr> <td height="30" width="80">姓名：</td> <td><input type="text" name="username" style="width:150px;"</td> </tr> <tr> <td height="30" >性别：</td> <td> <input type="radio" name="sex" id="man" checked value="1"><label for="man">男</label> <input type="radio" name="sex" id="woman" value="2"><label for="woman">女</label> </td> </tr> 图 4-3 用户信息信息
Wcb前端开发》实验教学指导/实验四:在网页中使用表单和多媒体5 < ctd height="30">出生日期:</td> <input type="number"name="year"max=2050"min=1920"> F <input type="n name="month"max="12"min=1"> H <input type= name="day"max=31"min=1"> </td> < <td height="30”>联系电话:<Ad> <td><input type="tel" name="phone"style="width: 150px; " ></td> < td height="30>常用邮箱:</d> <td><input type="email"name="mail"style="width: 150px; "></td> < td valign="top">兴趣爱好:<Ad input type=" checkbox"name=" hobbies"vaue="1">体育运动 < input type=" checkbox"name=" hobbies"vaue="2卜>娱乐休闲<br> < input type=" checkbox"name=" hobbies"vaue="3/>科学技术 input type=" checkbox"name=" hobbies"vaue="4">音乐影视 ctd height="30>教育水平:<td> <select style="width: 150px; "name="select"> option value="1">研究生< option> < option value="2">大学< option> < option value="3">高中< /option> ption value="4">初中< option> < option value="5>小学<op td height="30>所在地区:</d <td> <select style="width: 150px; "name="select"> < option va|ue="1">大陆< /option> ption value="2">香港< option> < option value="3">澳门< option> < option value="4">台湾</ option 河南中医学院互联网应用技术研究 本讲共计12页|当前第5页
《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单和多媒体 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 5 页 <tr> <td height="30" >出生日期：</td> <td> <input type="number" name="year" max="2050" min="1920"> 年 <input type="number" name="month" max="12" min="1"> 月 <input type="number" name="day" max="31" min="1"> 日 </td> </tr> <tr> <td height="30">联系电话：</td> <td><input type="tel" name="phone" style="width:150px;"></td> </tr> <tr> <td height="30" >常用邮箱：</td> <td><input type="email" name="mail" style="width:150px;"></td> </tr> <tr> <td valign="top">兴趣爱好：</td> <td> <input type="checkbox" name="hobbies" value="1"/>体育运动 <input type="checkbox" name="hobbies" value="2"/>娱乐休闲<br> <input type="checkbox" name="hobbies" value="3"/>科学技术 <input type="checkbox" name="hobbies" value="4"/>音乐影视 </td> </tr> <tr> <td height="30">教育水平：</td> <td> <select style="width:150px;" name="select"> <option value="1">研究生</option> <option value="2">大学</option> <option value="3">高中</option> <option value="4">初中</option> <option value="5">小学</option> </select> </td> </tr> <tr> <td height="30">所在地区：</td> <td> <select style="width:150px;" name="select"> <option value="1">大陆</option> <option value="2">香港</option> <option value="3">澳门</option> <option value="4">台湾</option> </select> </td> </tr> <tr>