工信版（中职）Web前端设计基础 项目五电子课件.pptx

《工信版（中职）Web前端设计基础 项目五电子课件.pptx》由会员分享，可在线阅读，更多相关《工信版（中职）Web前端设计基础 项目五电子课件.pptx（43页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、YCF（中职）Web前端设计基础 项目五电子课件网页中的表单项目五授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练一 项目描述本项目学习要点表单的高级应用；使用CSS样式修饰表单。表单的作用和语法格式；表单中各元素的作用和语法格式；二 知识准备表单概述；表单高级元素。表单基本元素；表单其他元素；表单概述在HTML文档中，使用表单可以收集用户的相关信息，提交后的数据可以交付后台进行处理，比如登录界面、调查问卷、个人信息填写等。表单的标签为，其格式如下：表单概述其中各属性的含义如表所示。属性属性含义含义说明说明name表单名称

2、为了区分多个表单，用该属性给表单命名，以防止表单提交到后台程序出现混乱。action表单提交地址用于指定表单数据提交到哪个地址进行处理或者以邮件形式发送到哪个邮箱。如：action=”form-action.asp”或者action=”mailto:”method传送方法指明提交表单的HTTP方法，取值为get或post，由于get方法安全性较低，所以大部分采用post的方法。target目标显示方式目标窗口的打开位置，与超链接标签一样，有四个属性值：_self：默认值，表示在当前的窗口打开页面。_blank：表示在新的窗口打开页面（常用）。_parent：表示在父级窗口中打开页面。_top：

3、页面载入到包含该链接的窗口，取代当前在窗口中的所有页面。enctype编码方式用于设置表单信息提交的编码方式，有两个值：application/x-www-form-urlencoded：默认的编码方式。multipart/form-data：MIME编码，对于“上传文件”这种表单必须选择该值。表单概述结合以上表单属性的介绍，可以创建如图所示的表单。第8、9行代码为：这句代码创建了一个表单，name=“form1”表示表单名称为form1，action=”form-action.asp”表示提交表单后将数据交给form-action.asp文件来执行，method=”post”表示传送方法为p

4、ost，target=”_blank”表示提交表单后在新的窗口打开页面，enctype=”application/x-www-form-urlencoded”定义了表单信息提交时的编码方式。表单概述也可以如图所示创建表单。第8、9行代码为：这句代码中action=mailto:表示提交表单后将表单内容以邮件形式发送给。表单基本元素按照上面的方法创建的表单，在网页上并没有内容显示，因为表单是一个包含表单元素的容器，只有通过插入各种表单元素，才能显示不同的交互界面。标签用于搜集用户信息，通过设置不同的type属性值，可以有很多类型，type属性值如表所示。type值值含义含义说明说明text单行文

5、本框用户可在其中输入简短文本，默认宽度为 20 个字符。password密码为了保证文本的安全性，该字段中的字符被掩码，以点的形式显示。checkbox复选框用户在一组选项中可以选择一项或多项。radio单选按钮用户在一组选项中只能选择一项。button普通按钮可点击的按钮，一般用于通过 JavaScript 启动脚本。submit提交按钮作用是把表单数据发送到服务器。reset重置按钮作用是清除表单中的所有数据。image图像域图像形式的提交按钮。file上传按钮定义输入字段和浏览按钮，供文件上传。hidden隐藏字段需要提交数据又不显示在浏览器中的表单元素。表单基本元素【例5-1】制作一个

6、登录框实例，代码如下所示（示例文件5-1.html）。创建一个登录框姓名：密码：插入了一个单行文本框，其type属性值为“text”，value属性定义文本框的初始值为“请输入姓名”；size属性定义文本框的宽度为“20”个字符宽度；maxlength属性文本框定义最多输入的字符数为“15”。插入了一个密码框，其type属性值为“password”，其他的属性及含义和文本框是一样的，密码文本框的中的文本以点的形式显示，但它仅仅使周围的人看不见输入的文本，但并不能真正使得数据安全。为了数据安全，还需要后端技术解决。插入一个提交按钮，其type属性是“submit”，value的取值“登录”就是显

7、示在按钮上的文字。提交按钮单击后会将表单的信息提交给表单form的action属性所指向的文件进行处理。插入一个重置按钮，其type属性为“reset”，value属性的意义与提交按钮相同，重置按钮的作用是将表单中的内容清空。表单基本元素【例5-1】制作一个登录框实例，代码如下所示（示例文件5-1.html）。在chrome浏览器中预览表单基本元素【例5-2】制作一个满意度测评表单实例，代码如下所示（示例文件5-2.html）。网站满意度打分：非常满意比较满意一般不满意您希望我们增加些哪方面的知识：网页设计：css3动画：后期运营维护：设置了一个单选按钮组，共四个选项，单选按钮的type属性为

8、radio，name属性为单选项命名，value属性为该选项的值，它是与服务器连接的重要参数。设置了一个复选按钮组，共三个选项，复选按钮的type值为checkBox，复选框checkbox不像单选按钮radio，它不需要设置选项列表的name属性，因为复选框可以多选，一个选项列表中可以有多个复选框被选中。表单基本元素【例5-2】制作一个满意度测评表单实例，代码如下所示（示例文件5-2.html）。在chrome浏览器中预览表单基本元素【例5-3】制作上传附件页面实例，代码如下所示（示例文件5-3.html）。上传附件上传图片：创建了一个文件域，用于上传文件，其type属性值是file。当使用

9、文件域file时，必须在标签中说明编码方式：enctype=“multipart/form-data，这样服务器才能接收到正确的信息。创建了一个普通的表单按钮，type属性值为button，value属性值是显示在按钮上的文字，onclick表示单击该按钮触发的事件：alert(欢迎来到我们的网站！)，表示弹出窗口并显示“欢迎来到我们的网站！”。创建了一个图片域，type属性值为“image”，src表示图片路径，其作用相当于提交按钮。表单基本元素【例5-3】制作上传附件页面实例，代码如下所示（示例文件5-3.html）。在chrome浏览器中预览单击“选择文件”按钮单击“图片要求”按钮表单其

10、他元素表单其他元素如表所示。标签标签含义含义说明说明textarea多行文本输入框主要用于输入较长的文本信息。select下拉列表框下拉列表是一种简单的带有预选值的下拉列表，能够在有限空间设置多个选项表单其他元素【例5-4】制作入库单实例，代码如下所示（示例文件5-4.html）。入库单bodyline-height:30px;入库单入库产品编号：表单其他元素【例5-4】制作入库单实例，代码如下所示（示例文件5-4.html）。请选择所入仓库：仓库一仓库二仓库三请选择经手库管员：张金红李颖王占坤 入库原因：填写货物来源创建了一个下拉列表，下拉列表是一种简单的带有预选值的下拉列表，能够在有限空间

11、设置多个选项，由和这两个标签配合使用，表示整个列表，表示一个列表项，Value属性表示选项值，Selected表示是否被选中。创建了一个可以同时显示三条记录的列表，它的写法与仓库列表类似，不同之处是在select标签后面加上size属性：，表示下拉列表展开，可见列表项数目为3。创建了一个文本区域，标签是，rows属性定义文本框的高度，cols属性定义文本框的宽度，单位是单个字符数。表单其他元素【例5-4】制作入库单实例，代码如下所示（示例文件5-4.html）。在chrome浏览器中预览表单高级元素input标签还有一些高级应用，如表所示。type值值含义含义说明说明urlURL地址输入框要求

12、输入网站网址，在提交表单时，会自动验证是否是URL地址。emailemail地址输入框要求输入email地址，在提交表单时，会自动验证是否是email地址。date 日期选择框选择一个日期。time时间选择框选择一个时间。number数字输入框用户可以直接输入数字，也可以通过上下箭头选择数字。range滑条控件可以通过滑块选择合适的数值。表单高级元素【例5-5】将上例的入库单继续完善一下，修改成如图所示效果，增加了入库日期、入库时间、入库数量、入库产品合格率等内容（示例文件5-5.html）。表单高级元素【例5-5】将上例的入库单继续完善一下，修改成如图所示效果，增加了入库日期、入库时间、入库

13、数量、入库产品合格率等内容（示例文件5-5.html）。在【例5-4】的26行之后插入如下代码：入库日期：入库时间：入库数量：入库产品合格率：创建了日期选择框，type属性值为date，用户单击输入框中的向下按钮，即可在弹出的窗口中选择需要的日期，也可以通过微调按钮选择日期。创建了时间选择框，type属性值为time，用户可以直接输入时间，也可以点击右侧的微调按钮，选择时间。创建了数字选择框，type属性值为number，用户可以直接输入数字，也可以单击微调按钮上下选择合适的数值。创建了一个滑块控件，type属性值为range，min属性表示滑块的最小数值，max属性值表示滑块的最大数值，st

14、ep属性表示滑块梯度的大小。表单高级元素【例5-6】验证URL地址和email地址的功能实例，代码如下所示（示例文件5-6.html）。验证地址bodyline-height:30px;验证一个网址：验证邮箱地址：创建了URL地址输入框，type属性值为url，如果在此输入的不是网站地址，当单击提交按钮时，会弹出错误提示。required属性值为“required”，表示该项不能为空，用户如果没填写这一项，就单击“提交”按钮，将弹出提示信息。创建了email地址输入框，type属性值为email，如果在此输入的不是邮箱地址，在提交表单时，会弹出错误提示。表单高级元素【例5-6】验证URL地址和

15、email地址的功能实例，代码如下所示（示例文件5-6.html）。在chrome浏览器中预览三 项目实施利用所学的表单知识制作网上银行注册页面，如图所示。captionfont-size:24px;line-height:50px;tdheight:30px;三 项目实施启动Sublime程序，新建并保存文件名称为5-7.html。第一步第二步Head标签内的CSS代码输入如下：设置了表格标题的样式：文字大小为24像素；标题文字行高为50像素。设置了单元格的样式，高为30像素。三 项目实施第三步在body标签中，先插入form表单，再在form表单中插入10行2列的表格，在表格中填写内容。中

16、国XXX银行注册页面 注册卡/账户类型 标准卡/账户闪酷卡创建了一个表单，将所有的表格以及表单元素都放在表单标签中。创建表格标题。表格第一行，第二个单元格中是一个单选按钮组，包含两个单选项。三 项目实施第三步请输入注册卡（账）号注册卡（帐）户密码 手机号码 证件类型身份证军官证表格第二行，第二个单元格中是一个文本框。表格第三行，第二个单元格中是一个密码框。表格第四行，第二个单元格中是一个文本框。表格第五行，第二个单元格中是一个列表框，包含两个列表项。三 项目实施第三步请输入证件号码请留下你的联系邮箱选择您要开通的业务短信提醒信用卡自动还款支付宝表格第六行，第二个单元格中是一个文本框。表格第七行

17、，第二个单元格中是一个email地址输入框。表格第八行，第二个单元格中是一个复选框组，包含三个复选项。三 项目实施第三步个人备注信息您确定注册并开通以上业务吗？表格第九行，第二个单元格中是一个文本框。表格第八行，第二个单元格中是是两个按钮，一个提交按钮，另一个是重置按钮。三 项目实施再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。第四步四 项目拓展通过项目实施，表单以及表单元素的标签、属性已经基本掌握，如何能让表单在内容完整的同时又能美化一点呢？这就要结合css进行样式设置，此项目拓展制作如图所示的调查问卷。四 项目拓展首先要创建一个大的div块，需要

18、给块设置背景和边框，然后创建标题、表单以及具有布局作用的表格。第一步 分析需求第二步Head标签内的CSS代码输入如下：#layoutwidth:700px;margin:0 auto;background-color:#F6F6F6;border:2px solid#8FC629;h1border-bottom:2px solid#8FC629;text-align:center;设置了ID名为“layout”的div块样式，宽为700像素；居中显示；背景颜色灰色；边框为2像素的黄绿色实线边框。设置了标题h1的样式，下边框为2像素的黄绿色实线边框；文本对齐方式为居中对齐。四 项目拓展第二步h

19、3padding:10px;tablewidth:500px;font-size:12px;th,tdpadding:3px;thtext-align:right;.textInputwidth:150px;height:20px;border:1px solid#58805f;.textStyleborder:1px solid#58805f;.submitButwidth:100px;height:25px;margin:10px;font-weight:bold;border:2px solid#abd8b3;设置了标题h3的样式，内边距为10像素。设置了标题行单元格th，普通单元格的样

20、式td内边距为3像素。设置了标题行单元格th的样式，文本右对齐。设置了表格table的样式，宽为500像素，字号为12像素。设置了类名为.textInput的姓名输入框和email地址框的样式，宽为150像素，高为20像素，边框为1像素的青色实线边框。设置类名为.textStyle的文本框边框为1像素的青色实线边框。设置了类名为.submitBut的按钮的样式宽为100像素；高为25像素；外边距为10像素；文字加粗；边框为2像素的青色实线边框。四 项目拓展第三步 几个有关Web标准的问题 帮助我们更好的了解您对Web标准网页设计的想法与看法 您是否曾使用表格式布局？是 否 您是否开始使用CSS

21、布局？是 否 body标签内的HTML代码输入如下：表格的第一行，第二个单元格中是一个单选按钮组，name值为“c1”。表格的第二行，第二个单元格中是一个单选按钮组，name值为“c2”，包含两个单选项。四 项目拓展第三步 是否订阅CSS邮件？是的 您所从事的行业：设计师 程序员 总监 美术编辑 项目经理 表格的第三行，第二个单元格中是一个复选框。表格的第四行，第二个单元格中是一个下拉列表框。四 项目拓展第三步 请留下您的姓名：请留下您的Email地址：请留下您的建议：表格的第五行，第二个单元格中是一个文本框，用于输入姓名。表格的第七行，第二个单元格中是一个多行文本输入框，用于输入建议。表格的

22、第六行，第二个单元格中是一个email地址输入框。定义了提交按钮。四 项目拓展再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。第四步五 项目小结本项目通过项目实施和项目拓展制作了银行注册页面和用css样式修饰过的调查问卷页面，学习了HTML中表单、各种表单元素以及一些高级属性的应用，也学习了一些CSS样式的新用法。五 项目小结本项目知识点总结如表所示。标签标签属性属性说明说明formname表单名称action表单提交地址method提交表单的HTTP方法，取值为get或posttarget目标显示方式：_self、_blank、_parent、_to

23、penctype编码方式inputtypetext单行文本框password密码checkbox复选框radio单选按钮button普通按钮submit提交按钮reset重置按钮image图像域file上传按钮hidden隐藏字段URLURL地址输入框emailemail地址输入框date 日期选择框time时间选择框number数字输入框range滑条控件required必填项textarearows文本框的高度cols文本框的宽度selectselected下拉列表选中项value值六 技能训练通过测试练习环节，对本项目涉及的英文单词进行重复练习，既可以熟悉html标签的单词组合，也可以提高代码输入的速度和正确率。在浏览器中打开素材中的Exercise5.html文件，单击“开始测试按钮”，在文本框输入上面的单词，输入完成后，单击“结束/计算速度”按钮即可显示所用时间、错误数量和输入速度等信息。End