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

Wcb前端开发》实验教学指导/实验四:在网页中使用表单1 《Web前端开发》实验教学指导 实验四:在网页中使用表单 、实验目的 1、掌握常用的表单元素及使用方法; 2、掌握表单属性的使用 3、理解表单提交数据的方法。 二、实验环境 l、 Windows10操作系统的计算机 2、局域网网络环境,并且使用固定IP地址, 三、实验要求 1、学习网页中常用表单的使用方法 2、编写表单网页。 四、实验原理 1、HTML网页结构 2、表单元素的使用方法 3、表单属性的使用 五、实验步骤 1、简单的用户登录界面 (1)编写简单的用户登录界面,效果如图4-1所示 用户登录界面 用户名 密码: 提交重置 图4-1用户登录界面 参考代码 <doctype html 河南中医药大学管理科学与工程学科 本讲共计7页|当前第1页

《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单 1 河南中医药大学管理科学与工程学科 本讲共计7页 | 当前第1页 《Web 前端开发》实验教学指导： 实验四：在网页中使用表单 一、实验目的 1、掌握常用的表单元素及使用方法； 2、掌握表单属性的使用； 3、理解表单提交数据的方法。 二、实验环境 1、Windows 10 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址。 三、实验要求 1、学习网页中常用表单的使用方法； 2、编写表单网页。 四、实验原理 1、HTML 网页结构； 2、表单元素的使用方法； 3、表单属性的使用。 五、实验步骤 1、简单的用户登录界面 （1）编写简单的用户登录界面，效果如图 4-1 所示。 参考代码： 图 4-1 用户登录界面

《Web前端开发》实验教学指导/实验四:在网页中使用表单 用户登录 用户登录界面 用户名: d height="30>密码: 2、使用简单的表单选择个人信息 (1)编写简单表单实现的个人信息修改,效果如果4-2所示。 个人信息选择 性别: 男。女 兴趣爱好:_体育运动口娱乐休闲 所在地区,大陆 〖提交 重置 图4-2个人信息修改 河南中医药大学管理科学与工程学科 本讲共计7页|当前第2页

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

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

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

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

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

由前端开发》实验教学指导/实验四:在网页中使用表单5 用户详细信息 姓名: 性别: * td heigh="30”>出生日期: input type="number"name="year"max=2050"min="1920">&nbsp; F &nbsp; H &nbsp; H 联系电话: 常用邮箱: 兴趣爱好: 体育运动 娱乐休闲 音乐影视 教育水平: 研究生 大学 河南中医药大学管理科学与工程学科 本讲共计7页|当前第5页

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

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

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

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

《Web 前端开发》实验教学指导 / 实验四：在网页中使用表单 7 河南中医药大学管理科学与工程学科 本讲共计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 不带提示文字