1.8添加留言板表单（课件）-高二《网页设计与制作》同步教学（劳动版）

制作网页内容 第一阶段 能够叙述网页表单的作用。 能够合理运用表单属性，准确定义不同的表单控件。 能够应用网页表单完成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 type="email" name="email"> <input type="submit"> </form> 通过浏览器进行调试，效果如图1-8-4所示： 图1-8-4取消了表单有效性验证状态 创建一个名为：student的表单，要求： （1）表单需提交到地址：www.gdjxjg.com/book.php （2）表单数据和URL分开发送 （3）目标窗口打开方式为在新窗口打开 （4）开启自动完成功能 打开Visual Studio Code软件，打开index.html，在<body></body>中输入以下代码： 课堂练习1-8-2 创建表单 1 2 3 <form name="form_test" action=" www.gdjxjg.com/book.php " method="post" target="_blank" autocomplete=”on” > </form> 知识与技能准备 <input>元素是表单中最常见的元素，常见的表单控件如文本框、密码框、单选按钮、复选框等都是通过<input>来进行定义。 <input>元素中最常见的属性是type属性，上面提到的文本框、密码框、单选按钮、复选框等就是通过搭配不同的值而实现的。除此之外，<input>元素还有其他常见的n