HTML5+CSS3网页设计与制作课件：添加留言板表单_第1页
HTML5+CSS3网页设计与制作课件：添加留言板表单_第2页
HTML5+CSS3网页设计与制作课件：添加留言板表单_第3页
HTML5+CSS3网页设计与制作课件：添加留言板表单_第4页
HTML5+CSS3网页设计与制作课件：添加留言板表单_第5页
已阅读5页，还剩37页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML5+CSS3网页设计与制作添加留言板表单项目将通过“制作一个D清单网页广告单页”项目，即通过制作一个HTML页面来承载网页制作知识，完成网页开发环境搭建、HTML5标签、CSS3叠层样式和响应式布局等的学习。项目目标D清单是某公司推出的一款跨平台同步的待办事项和任务提醒软件,旨在协助您完成待办事务比如生日提醒,旅行安排,会议准备等以便更好的进行时间和事项管理。为了方便D清单应用的推广，其公司需要制作一个该应用产品的介绍网页。该页面主要用于手机端进行分享推广，同时也要求能够在电脑端进行访问。前端工程师小王所在的科技公司已经拿到了设计稿，如图1所示。主管希望他担任本次项目的前端工作，开发完成后将成果交付给程序员完成逻辑制作、测试和发布。项目情境图1-1-1项目移动端和电脑端页面截图网页制作的一般流程如下：项目分析项目发布需求分析规划设计实施测试交付根据“移动优先”原则，我们需要制定项目完成的计划：项目分析时间段1时间段2时间段3时间段4时间段5分析规划实施阶段1移动端内容制作阶段2移动端格式制作阶段3响应式制作测试与交付D清单前端开发甘特图时间进度任务制作网页内容能够叙述网页表单的作用。能够合理运用表单属性，准确定义不同的表单控件。能够应用网页表单完成D清单网页的留言板内容制作。任务目标

添加留言板表单本次任务要求在基础上添加订单表单内容以完成网页留言板的内容制作。完成后的效果图如图1-8所示。任务描述

添加D清单网页留言板表单图1-8添加表单后的网页效果图要添加留言板表单，需要：学习HTML5表单标签的使用；分析D清单页面效果图中的表单，正确使用语义化标签完成D清单网页内容制作。D清单表单分析如图1-8-1所示。任务分析

添加D清单网页留言板表单图1-8-1D清单表单分析图知识与技能准备在HTML5中，通常用<form></form>来定义表单，通过method属性、action属性和name属性等内容来对表单信息进行收集和传递，最终将用户提交的信息传送给服务器。创建表单的基本语法格式如下：在上面的语法格式中，一般标签form后面需搭配action、name、method等常用属性，分别用于定义URL地址、表单名称、提交方式等。在提示信息及各种表单控件内容中，由用户根据实际需要进行自定义。1、表单的组成<form常用属性及值>提示信息及各种表单控件内容</form>知识与技能准备在HTML5中，表单需搭配常用的属性来使用，通过设置表单属性可以实现定义URL地址、提交方式、自动完成等不同的功能。2、表单属性知识与技能准备2、表单属性（1）Action属性action属性定义在提交表单时执行的动作，action属性后面的值是提交的地址。其语法是：<formaction=”表单提交的地址”>注意：如果省略action属性，则action会被设置为当前页面。（2）Method属性method属性规定在提交表单时所用的HTTP方法。它的取值有GET或POST。其语法是：<formmethod=”get/post”>（3）name属性Name属性用于表单的命名。有时候一个页面可能存在多个表单，为表单进行命名是为了进行区分。其语法是：<formname=”用户自定义表单命名”>（4）autocomplete属性autocomplete属性用来规定所设置的表单是否具有自动完成功能。autocomplete属性有2个：on和off。其语法是：<formautocomplete=”on/off”>（5）target属性target属性规定action属性中地址的目标。其语法是：<formtarget=”目标窗口的打开方式”>目标窗口的打开方式有四种，分别是_selt、_blank、_parent、_top，默认的值是_selt。（6）novalidate属性在表单中，默认状态下是有验证表单录入内容的有效性的，novalidate属性规定表单提交时取消对表单进行有效性的检查。如果表单设置了该属性，则关闭了表单的验证，表单内所有的控件都不被验证。打开VisualStudioCode软件，打开index.html，在<body>标签中输入如下代码：课堂练习1-8-1为表单的控件设置取消表单验证1234<formnovalidate="true">请输入您的EMAIL<inputtype="email"name="email"> <inputtype="submit"></form>通过浏览器进行调试，效果如图1-8-4所示：图1-8-4取消了表单有效性验证状态创建一个名为：student的表单，要求：（1）表单需提交到地址：/book.php（2）表单数据和URL分开发送（3）目标窗口打开方式为在新窗口打开（4）开启自动完成功能打开VisualStudioCode软件，打开index.html，在<body></body>中输入以下代码：课堂练习1-8-2创建表单123<formname="form_test"action="/book.php"method="post"target="_blank"autocomplete=”on”></form>知识与技能准备<input>元素是表单中最常见的元素，常见的表单控件如文本框、密码框、单选按钮、复选框等都是通过<input>来进行定义。<input>元素中最常见的属性是type属性，上面提到的文本框、密码框、单选按钮、复选框等就是通过搭配不同的值而实现的。除此之外，<input>元素还有其他常见的name属性、value属性、size属性、checked属性等。3、使用input元素创建表单控件知识与技能准备3、使用input元素创建表单控件表1-8-1input元素常见的属性知识与技能准备3、使用input元素创建表单控件表1-8-2input元素新增的输入类型知识与技能准备3.1文本框（text）网页中最常见的是文本框，文本框常用于输入简短的文字信息，如用户名、账号、身份证号码、学号等，常见搭配的属性有name、value、maxlength。其语法形式如下：<inputtype="text"name="控件名称"size="控件长度"maxlength="允许最多的字符数"value="该文本的默认值"autocomplete="on/off"placeholder="提示信息">打开VisualStudioCode软件，打开index.html，在<body>标签中输入如下代码：课堂练习1-8-3为表单添加文本框12345<formname="form-text"action="text.php"method="get"> <div>姓名<inputtype="text"name="name"size="20"maxlength="4"></div> <div>昵称<inputtype="text"name="nickname"size="20"placeholder="请输入您的昵称"></div> <div>个人主页<inputtype="text"name="index"value="http://"autocomplete="on"</div></form>显示效果如下：图1-8-5在表单中添加文本框知识与技能准备3.2密码域（password）在网页表单信息录入中，往往会录入到一些私密的信息，如密码等，这时候可以采用密码域password创建一个密码文本框。它在网页中的效果和文本框（text）是一样的，只不过在录入时，录入的信息由“*”代替。其语法格式如下：<inputtype="password"name="控件名称"size="控件长度"maxlength="允许最多的字符数"value="该文本的默认值"placeholder="提示信息">打开VisualStudioCode软件，打开index.html，在<body>标签中输入如下代码：课堂练习1-8-4为表单添加密码域12345678<formname="form-password"action="password.php"method="get"> <div>原始密码<inputtype="password"name="password1"size="20"maxlength="3"value="123"></div> <div>重设密码<inputtype="password"name="password2"size="20"placeholder="请重新设置密码"></div> <div>再次输入密码<inputtype="password"name="password3"size="20"placeholder="请再次输入密码"></div></form>显示效果如下：1.8-6在表单中添加密码域知识与技能准备3.3单选按钮（radio）表单中的单选按钮一般用于内容只选择一个的情况。在页面中，以圆圈表示每个选择项。单选按钮的属性中，value属性是必须设置的。特别注意的是每个单选按钮项中的name属性值必须一致。其语法格式如下：在该语法中，单选按钮的每个项中name的取值必须一致；value的取值一般情况下不同；checked="checked"可以不设置或只在选项中出现一次，如果不设置，则没有默认选项；如果某个项设置了该属性，则该项被作为默认选择项。<inputtype="radio"name="单选按钮的名称"value="单选按钮的取值"checked="checked">打开VisualStudioCode软件，打开index.html，在<body>标签中输入如下代码：课堂练习1-8-5为表单添加单选按钮123456<h3>你最喜欢的水果是？</h3><formname="form-radio"action="radio.php"method="get"> <div><inputtype="radio"name="r1"value="苹果">苹果</div> <div><inputtype="radio"name="r1"value="草莓">草莓</div> <div><inputtype="radio"name="r1"value="橙子">橙子</div></form>显示效果如下：图1-8-7为表单添加单选按钮知识与技能准备3.4复选框（checkbox）表单中的复选框一般用于内容可多种选择的情况。在页面中，以方形表示每个选择项。复选框的属性中，value属性是必须设置的。同样需要注意的是每个复选框项中的name属性值必须一致。其语法格式如下：在该语法中，复选框的每个项中name的取值必须一致；value的取值一般情况下不同；checked="checked"可以不设置或只在选项中出现多次，如果不设置，则没有默认选项；如果某个项设置了该属性，则该项被作为默认选择项。<inputtype="checkbox"name="单选按钮的名称"value="单选按钮的取值"checked="checked">打开VisualStudioCode软件，打开index.html，在<body>标签中输入如下代码：课堂练习1-8-6为表单添加复选框123456<h3>你经常吃的水果是？</h3><formname="form-checkbox"action="checkbox.php"method="get"> <div><inputtype="checkbox"name="fruit"value="苹果"checked="checked">苹果</div> <div><inputtype="checkbox"name="fruit"value="草莓">草莓</div> <div><inputtype="checkbox"name="fruit"value="橙子"checked="checked">橙子</div></form>显示效果如下：图1-8-8为表单添加复选框知识与技能准备3.5普通按钮（button）在表单中，type属性的值为button时，就创建了一个普通按钮。普通按钮经常会搭配JavaScript来一次使用。其语法格式如下：在该语法中，不同按钮的name一般要有所区分；value的值为按钮上的文字内容；onclick为鼠标点击按钮时的处理程序，可搭配JavaScript脚本。<inputtype="button"name="普通按钮的名称"value="按钮的取值"onclick="点击按钮时的处理程序">打开VisualStudioCode软件，打开index.html，在<body>标签中输入如下代码：课堂练习1-8-7为表单添加普通按钮123456<h3>几个不同效果的普通按钮</h3><formname="form-button"action="button.php"method="get"> <div><inputtype="button"name="button"value="普通按钮"></div> <div><inputtype="button"name="open"value="打开新窗口"onclick="window.open()"></div> <div><inputtype="button"name="close"value="关闭当前窗口"onclick="window.close()"></div></form>显示效果如下：图1-8-9为表单添加普通按钮知识与技能准备3.6重置按钮（reset）重置按钮在表单中的作用是重置已经录入的表单内容。当我们录入的表单信息有误时，可点击重置按钮，重新录入。其语法格式如下：<inputtype="reset"name="重置按钮的名称"value="重置按钮的取值">3.7提交按钮（submit）通过提交按钮，可以将表单录入的全部数据提交到服务器。服务器的地址为事先设置好的form属性action值中的地址。其语法格式如下：说明：一般需要手动录入信息的表单中都包含提交按钮。<inputtype="submit"name="提交按钮的名称"value="提交按钮的取值">打开VisualStudioCode软件，打开index.html，在<body>标签中输入如下代码：课堂练习1-8-8为表单添加重置按钮和提交按钮1234567<h3>重置按钮和提交按钮</h3><formname="form-reset"action="do.php"method="get"> <div>姓名：<inputtype="text"name="text"size="20"></div> <div>密码：<inputtype="password"name="password"size="20"></div> <div><inputtype="reset"name="reset"value="重新录入"></div> <div><inputtype="submit"name="submit"value="确认提交"></div></form>显示效果如下：图1-8-10为表单添加重置按钮和提交按钮知识与技能准备3.8图像域（image）图像域也叫插入图像按钮，用于将图像文件作为按钮来使用。其语法格式如下：<inputtype="image"src="图像地址"name="图像域名称">3.9文件域(file)文件域也叫上传文件，它可以将本地的某个文件作为表单数据进行上传。其语法格式如下：该语法中，multiple为非必要属性，该属性规定输入字段可选择多个值；如果使用该属性，则字段可接受多个值。即multiple="multiple"相当于可以同时上传多个文件。<inputtype="file"name="文件域的名称"multiple="multiple">打开VisualStudioCode软件，打开index.html，在<body>标签中输入如下代码：课堂练习1-8-9表单控件的综合应用1234567891011121314<h3>注册信息</h3><formname="form"action="book.php"method="get"> <div>姓名：<inputtype="text"name="text"size="20"></div> <div>密码：<inputtype="password"name="password"size="20"></div> <div>性别：<inputtype="radio"name="radio"value="男">男

<inputtype="radio"name="radio"value="女">女</div> <div>兴趣爱好：<inputtype="checkbox"name="checkbox"value="运动">运动

<inputtype="checkbox"name="checkbox"value="阅读">阅读

<inputtype="checkbox"name="checkbox"value="艺术">艺术

</div> <div>请上传你的照片<inputtype="file"name="file"></div> <div><inputtype="reset"name="reset"value="重新录入"> <inputtype="submit"name="submit"value="确认提交"></div></form>效果图如下：课堂练习1-8-9表单控件的综合应用图1-8-12表单控件的综合应用知识与技能准备一般来说，<input>标签用于需要用户输入的控件，而<select>标签用于需要用户选择的控件。（1）下拉菜单下拉菜单是表单中一种由用户进行选择的录入方式，在正常状态下只看到一个选项，点击旁边的三角形箭头时，会展开全部的选项。需搭配<option>标签来使用。其语法格式如下：4、使用select元素创建表单控件<selectname="下拉菜单名称"> <optionvalue="选项1"selected="selected">选项显示内容</option> <optionvalue="选项2">选项显示内容</option> <optionvalue="选项3">选项显示内容</option></select>打开VisualStudioCode软件，打开index.html，在<body>标签中输入如下代码：课堂练习1-8-10为表单添加下拉菜单12345678910<h3>下拉菜单</h3><formname="form-select"action="select.php"method="get">

籍贯：<selectname="select"> <optionvalue="广州"selected="selected">广州</option> <optionvalue="深圳">深圳</option> <optionvalue="珠海">珠海</option> <optionvalue="中山">中山</option> </select></form>效果图如下：图1-8-13为表单添加下拉菜单知识与技能准备（2）列表项列表项的设置和下拉列表类似，区别是列表项没有下拉列表的三角形箭头，它可以同时显示多个选项。一旦选项数量超出信息量长度，在列表的右方就会出现滚动条。其语法格式如下：4、使用select元素创建表单控件<selectname="select"size="显示的选项列数"multiple="multiple"> <optionvalue="选项1"selected="selected">选项显示内容</option> <optionvalue="选项2">选项显示内容</option> <optionvalue="选项3">选项显示内容</option></select>打开VisualStudioCode软件，打开index.html，在<body>标签中输入如下代码：课堂练习1-8-11为表单添加列表项12345678910<h3>列表项</h3><formname="form-select"action="select.php"method="get">

关注的新闻分类：<selectname="select"size="3"multiple="multiple"> <optionvalue="政治"selected="selected">政治</option> <optionvalue="军事"selected="selected">军事</option> <optionvalue="体育">体育</opti

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论