河南中医药大学：《Web前端开发》课程教学实验指导（2018）04.实验四：在网页中使用表单

《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前端开发》实验教学指导/实验四:在网页中使用表单 参考代码 meta charset="utf-8"> ttle>用户登录 用户登录界面 用户名: 密码: 2、使用简单的表单选择个人信息 (1)编写简单表单实现的个人信息修改,效果如果4-2所示 个人信息选择 性别: 男。女 兴趣爱好:_体育运动_娱乐休闲 所在地区:大陆 提交 重 图4-2个人信息修改 与工程学科 当前第2页

《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单 河南中医药大学管理科学与工程学科 本讲共计 7 页 | 当前第 2 页 参考代码： 用户登录 用户登录界面 用户名： 密码： 2、使用简单的表单选择个人信息 （1）编写简单表单实现的个人信息修改，效果如果 4-2 所示。 图 4-2 个人信息修改

《Web前端开发》实验教学指导/实验四:在网页中使用表单 参考代码 个人信息修改 性别:# * 兴趣爱好:娱乐休闲 所在地区:大陆 香港 澳门台湾 > 河南中医药大学管理科学与工程学科 本讲共计7页|当前第3页

《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单 河南中医药大学管理科学与工程学科 本讲共计 7 页 | 当前第 3 页 参考代码 个人信息修改 个人信息修改 性别： 男 女 兴趣爱好： 体育运动 娱乐休闲 所在地区： 大陆 香港 澳门 台湾

wd前端开发》实验教学指导/实验四:在网页中使用表单4 3、用户详细信息 (1)撰写用户详细信息的填写页面,效果如图5-3所示:。 用户详细信息 姓名: 性别: 男女 出生日期 图年 图月■日 联系电话: 常用邮箱: 兴趣爱好: 运动娱乐休闲 技术□音乐影视 教育水平:研究生 所在地区:陆 个人介绍 提交]重置 图4-3用户详细信息 (2)请使用最简单的方法实现该页面。。 参考代码 用户详细信息 <table cellspacing=0"cellpadding=0"style="margin: 50px; padding: 30px; background-color: #6CF; text-align left: " 河南中医药大学管理科学与工程学科 本讲共计7页|当前第4页

《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单 河南中医药大学管理科学与工程学科 本讲共计 7 页 | 当前第 4 页 3、用户详细信息 （1）撰写用户详细信息的填写页面，效果如图 5-3 所示：。 （2）请使用最简单的方法实现该页面。。 参考代码： 用户详细信息 图 4-3 用户详细信息

《由前端开发》实验教学指导/实验四:在网页中使用表单5 用户详细信息 姓名: 性别: 93 * 出生日期: &nbsp; F &nbsp; H Vto input type="number"name="day "max=31"min="I">&nbsp; E 联系电话: 常用邮箱: out type="email"name="mail"style="width: 150px; "> 兴趣爱好: 体育运动 nput type=" checkbox"name=" hobbies" value="2">娱乐休闲 音乐影视 教育水平: 研究生 大学 河南中医药大学管理科学与工程学科 本讲共计7页|当前第5页

《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单 河南中医药大学管理科学与工程学科 本讲共计 7 页 | 当前第 5 页 用户详细信息 姓名： 性别： 男 女 出生日期： &nbsp;年 &nbsp;月 &nbsp;日 联系电话： 常用邮箱： 兴趣爱好： 体育运动 娱乐休闲 科学技术 音乐影视 教育水平： 研究生 大学

wd前端开发》实验教学指导/实验四:在网页中使用表单6 高中 初中小学 所在地区: 大陆 香港 澳门 台湾 个人介绍: 2" height="10"> 请完成以下任务: 任务一:编写用户登录界面;(10分) 任务二:编写个人信息选择页面;(15分) 任务三:编写用户详细信息页面;(15分) 要求 请将上述三个案例的代码使用更加优化的方式实现,并将其填写到实验报告册 六、自主实验 河南中医药大学管理科学与工程学科 本讲共计7页|当前第6页

《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单 河南中医药大学管理科学与工程学科 本讲共计 7 页 | 当前第 6 页 高中 初中 小学 所在地区： 大陆 香港 澳门 台湾 个人介绍： 请完成以下任务： 任务一：编写用户登录界面；（10 分） 任务二：编写个人信息选择页面；（15 分） 任务三：编写用户详细信息页面；（15 分） 要求： 请将上述三个案例的代码使用更加优化的方式实现，并将其填写到实验报告册 中。 六、自主实验

《Web前端开发》实验教学指导/实验四:在网页中使用表单 1、文本框的自动完成功能 请选择联系方式: 13526688704 Mobile Phone 确定 0371-65962530 Office Phone 0371-63068118 House Phone 13526688704 图4-4文本框自动完成功能 请完成以下任务 任务一:编写代码,实现上述功能。(10分) 要求 请将上述代码填写到实验报告册中。 2、带有提示的文本框 请输入搜索关键词 进行搜索 进行搜索 图4-5提示文字 图46不带提示文字 请完成以下任务 任务一:编写代码,实现上述功能。(10分) 要求 请将上述代码填写到实验报告册中 七、思考及问答 1、表单提交方法中GET及POST有什么区别?(5分 2、表单控件中 search类型、tel类型和mall类型的区别。(5分) 3、表单内元素的fm属性的作用?(5分) 4、表单中 required属性的作用?(5分) 河南中医药大学管理科学与工程学科 本讲共计7页|当前第7页

《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单 河南中医药大学管理科学与工程学科 本讲共计 7 页 | 当前第 7 页 1、文本框的自动完成功能 请完成以下任务： 任务一：编写代码，实现上述功能。（10 分） 要求： 请将上述代码填写到实验报告册中。 2、带有提示的文本框。 请完成以下任务： 任务一：编写代码，实现上述功能。（10 分） 要求： 请将上述代码填写到实验报告册中。 七、思考及问答 1、表单提交方法中 GET 及 POST 有什么区别？（5 分） 2、表单控件中 search 类型、tel 类型和 mail 类型的区别。（5 分） 3、表单内元素的 form 属性的作用？（5 分） 4、表单中 required 属性的作用？（5 分） 图 4-4 文本框自动完成功能 图 4-5 提示文字 图 4-6 不带提示文字