项目一 第一阶段 任务8 添加留言板表单-【鹑首文化】HTML5+CSS3网页设计与制作配套电子课件PPT

HTML5+CSS3网页设计与制作 使用HTML5+CSS3制作响应式网页 项目一 项目将通过“制作一个D清单网页广告单页”项目，即通过制作一个HTML页面来承载网页制作知识，完成网页开发环境搭建、HTML5标签、CSS3叠层样式和响应式布局等的学习。 项目目标 D清单是某公司推出的一款跨平台同步的待办事项和任务提醒软件, 旨在协助您完成待办事务比如生日提醒, 旅行安排, 会议准备等以便更好的进行时间和事项管理。 为了方便D清单应用的推广，其公司需要制作一个该应用产品的介绍网页。该页面主要用于手机端进行分享推广，同时也要求能够在电脑端进行访问。 前端工程师小王所在的科技公司已经拿到了设计稿，如图1所示。主管希望他担任本次项目的前端工作，开发完成后将成果交付给程序员完成逻辑制作、测试和发布。 项目情境 图1-1-1 项目移动端和电脑端页面截图 网页制作的一般流程如下： 项目分析 项目发布 需求分析 规划设计 实施 测试 交付 根据“移动优先”原则，我们需要制定项目完成的计划： 项目分析 时间段1 时间段2 时间段3 时间段4 时间段5 分析规划 实施 阶段1 移动端内容制作 阶段2 移动端格式制作 阶段3 响应式制作 测试与交付 D清单前端开发甘特图 时间 进度 任务 制作网页内容 第一阶段 能够叙述网页表单的作用。 能够合理运用表单属性，准确定义不同的表单控件。 能够应用网页表单完成D清单网页的留言板内容制作。 任务目标 任务8 添加留言板表单 本次任务要求在任务7基础上添加订单表单内容以完成网页留言板的内容制作。完成后的效果图如图1-8所示。 任务描述 任务8 添加D清单网页留言板表单 图1-8 添加表单后的网页效果图 要添加留言板表单，需要： 学习HTML5表单标签的使用； 分析D清单页面效果图中的表单，正确使用语义化标签完成D清单网页内容制作。 D清单表单分析如图1-8-1所示。 任务分析 任务8 添加D清单网页留言板表单 图1-8-1 D清单表单分析图 知识与技能准备 在HTML5中，通常用<form></form>来定义表单，通过method属性、action属性和name属性等内容来对表单信息进行收集和传递，最终将用户提交的信息传送给服务器。创建表单的基本语法格式如下： 在上面的语法格式中，一般标签form后面需搭配action、name、method等常用属性，分别用于定义URL地址、表单名称、提交方式等。在提示信息及各种表单控件内容中，由用户根据实际需要进行自定义。 1、表单的组成 <form 常用属性及值> 提示信息及各种表单控件内容 </form> 知识与技能准备 在HTML5中，表单需搭配常用的属性来使用，通过设置表单属性可以实现定义URL地址、提交方式、自动完成等不同的功能。 2、表单属性 知识与技能准备 2、表单属性 （1）Action 属性 action 属性定义在提交表单时执行的动作，action 属性后面的值是提交的地址。 （2）Method属性 method属性规定在提交表单时所用的 HTTP 方法。它的取值有GET 或 POST。 （3）name属性 Name属性用于表单的命名。有时候一个页面可能存在多个表单，为表单进行命名是为了进行区分。 （4）autocomplete属性 autocomplete属性用来规定所设置的表单是否具有自动完成功能。 （5）target属性 target属性规定 action 属性中地址的目标。 其语法是：<form action=”表单提交的地址”> 注意：如果省略 action 属性，则 action 会被设置为当前页面。 其语法是：<form method=”get/post”> 其语法是：<form name=”用户自定义表单命名”> autocomplete属性有2个：on和off。 其语法是：<form autocomplete=”on/off”> 其语法是：<form target=”目标窗口的打开方式”> 目标窗口的打开方式有四种，分别是_selt、_blank、_parent、_top，默认的值是_selt。 （6）novalidate属性 在表单中，默认状态下是有验证表单录入内容的有效性的，novalidate属性规定表单提交时取消对表单进行有效性的检查。如果表单设置了该属性，则关闭了表单的验证，表单内所有的控件都不被验证。 打开Visual Studio Code软件，打开index.html，在<body>标签中输入如下代码： 课堂练习1-8-1 为表单的控件设置取消表单验证 1 2 3 4 <form novalidate="true"> 请输入您的EMAIL<input typ