《Web前端开发》实验教学指导/实验四:在网页中使用表单 《Web前端开发》实验教学指导 实验四:在网页中使用表单 、实验目的 1、掌握常用的表单元素及使用方法 2、掌握表单属性的使用 3、理解表单提交数据的方法 二、实验环境 1、 Windows XP/Windows7操作系统的计算机; 2、局域网网络环境,并且使用固定IP地址。 三、实验要求 1、学习网页中常用表单的使用方法; 2、编写表单网页 四、实验原理 1、HTML网页结构 2、表单元素的使用方法; 3、表单属性的使用 五、实验步骤 1、简单的用户登录界面 (1)编写简单的用户登录界面,效果如图4-1所示 用户登录界面 用户名 密码: 提交重置 图4-1用户登录界面 河南中医药大学管理科学与工程学科 本讲共计7页|当前第1页
《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单 河南中医药大学管理科学与工程学科 本讲共计 7 页 | 当前第 1 页 《Web 前端开发》实验教学指导： 实验四：在网页中使用表单 一、实验目的 1、掌握常用的表单元素及使用方法； 2、掌握表单属性的使用； 3、理解表单提交数据的方法。 二、实验环境 1、Windows XP/Windows 7 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址。 三、实验要求 1、学习网页中常用表单的使用方法； 2、编写表单网页。 四、实验原理 1、HTML 网页结构； 2、表单元素的使用方法； 3、表单属性的使用。 五、实验步骤 1、简单的用户登录界面 （1）编写简单的用户登录界面，效果如图 4-1 所示。 图 4-1 用户登录界面
《Web前端开发》实验教学指导/实验四:在网页中使用表单 参考代码 <doctype html> <html> meta charset="utf-8"> ttle>用户登录</ title <form method="post"name="form"> <table cellspacing="0"cellpadding="0"style="margin: 50px; padding: 30px; background-color: #6CF; " <r>< <td colspan="2" height="25" style="text- align: center;>用户登录界面<d></t> <tr><td colspan2 height=30"></td></tr> < td height="30" width="80">用户名:<td <td><input type="text"name="username"style="width: 150px; "value="7></td> <tr> < td heigh="30>密码:</td> <td><input type="password"name="username"style="width: 150px; "value="1</td> <tr><td cols "10"></td></tr> <tr> <td colspan=2 height=40"style="text-align: center; " nput type=" submit"name=" submit" value="提交"卜 <input type=reset"name="reset"value=F"style margin-left: 30px: "I> </table> </html> 2、使用简单的表单选择个人信息 (1)编写简单表单实现的个人信息修改,效果如果4-2所示 个人信息选择 性别: 男。女 兴趣爱好:_体育运动_娱乐休闲 所在地区:大陆 提交 重 图4-2个人信息修改 与工程学科 当前第2页
《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单 河南中医药大学管理科学与工程学科 本讲共计 7 页 | 当前第 2 页 参考代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>用户登录</title> </head> <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、使用简单的表单选择个人信息 （1）编写简单表单实现的个人信息修改，效果如果 4-2 所示。 图 4-2 个人信息修改
《Web前端开发》实验教学指导/实验四:在网页中使用表单 参考代码 <meta charset="utf-8"> <ttl个人信息修改</tte <form method="post"name="form"id="form"> <table cellspacing="0"cellpadding="0"style="margin: 50px; padding: 20px; background-color: #6CF text-align: left <r>< ctd colspan="2" height="25" style="text- align: center;">个人信息修改</td></tr> <tr><td colspan=2 height=20"><td></tr> < td height="30"widh="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">* < <td height="30">兴趣爱好:<td < Input type=" checkbox"name=" hobbies" value="1"卜体育运动 < input type=" checkbox"name=" hobbies" value="2">娱乐休闲 </td> <t> < <td height="30">所在地区:<td <select style="width: 150px; name="select" < Option value="1">大陆< option> < option value="2">香港< option> < option value="3">澳门</ option < Option value="4">台湾< option> <tr><td colspan="2 height=10"></td></tr> <tr> <td colspan=2 height"40"style="text-align: center; " <input type="submit"name="submit"value="EX"> <input type="reset"name="reset"value="E"style="margin-left: 20px; >> 河南中医药大学管理科学与工程学科 本讲共计7页|当前第3页
《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单 河南中医药大学管理科学与工程学科 本讲共计 7 页 | 当前第 3 页 参考代码 <!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: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;"/>
wd前端开发》实验教学指导/实验四:在网页中使用表单4 </td> <table> </html> 3、用户详细信息 (1)撰写用户详细信息的填写页面,效果如图5-3所示:。 用户详细信息 姓名: 性别: 男女 出生日期 图年 图月■日 联系电话: 常用邮箱: 兴趣爱好: 运动娱乐休闲 技术□音乐影视 教育水平:研究生 所在地区:陆 个人介绍 提交]重置 图4-3用户详细信息 (2)请使用最简单的方法实现该页面。。 参考代码 <doctype html> <html> <head> <meta charsetutf-8"> <ttfe>用户详细信息<tite <form method="post "name="form"id="form"> <table cellspacing=0"cellpadding=0"style="margin: 50px; padding: 30px; background-color: #6CF; text-align left: " 河南中医药大学管理科学与工程学科 本讲共计7页|当前第4页
《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单 河南中医药大学管理科学与工程学科 本讲共计 7 页 | 当前第 4 页 </td> </tr> </table> </form> </body> </html> 3、用户详细信息 （1）撰写用户详细信息的填写页面，效果如图 5-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;"> 图 4-3 用户详细信息
《由前端开发》实验教学指导/实验四:在网页中使用表单5 <r>< <td colspan="2" height=="25" style="text- align: center;">用户详细信息<td><r> <tr><td colspan=2"height=20></td></tr> <tr> < td height=="30"widh="80">姓名:</d> <td><input type="text"name="username"style="width: 150px; "</td> <tr> < <td height="30”>性别:<d <td> <input type="radio"name="sex"id="man"checked value=1"><label for="man">93 </abel> <input type="radio"name="sex"id="woman"value"2"><label for="woman">*</label> </td> < <td height="30”>出生日期:<d> <input type="number"name="year"max="2050"min=1920"> F <input type="number"name="month"max"12 min="1"> H Vto input type="number"name="day "max=31"min="I"> E < <td height="30">联系电话:<d> <td><input type="tel"name="phone"style="width: 150px; ></td> < <td height="30”>常用邮箱:<d> out type="email"name="mail"style="width: 150px; "></td> < <td valign="top">兴趣爱好:</td> <td> < Input type=" checkbox"name=" hobbies" value="1">体育运动 nput type=" checkbox"name=" hobbies" value="2">娱乐休闲<br> < Input type=" checkbox"name=" hobbies" value="3"科学技术 < cinput type=" checkbox"name=" hobbies" value="4">音乐影视 </td> <tr> < <td height=="30>教育水平:</td <select style="width: 150px; " name="select"> < option value="1">研究生< /option> < option value="2">大学< option> 河南中医药大学管理科学与工程学科 本讲共计7页|当前第5页
《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单 河南中医药大学管理科学与工程学科 本讲共计 7 页 | 当前第 5 页 <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> <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>