项目3-表单应用.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2020-2-6,#,“会员注册”页面制作,|,HTML5,新的,input,类型,|,HTML5,新的表单元素,表,单应用,知识,目标,掌握表单的基本语法,01,.,02,.,掌握各种表单元素的使用和语法,能力,目标,能使用各种基本表单元素标签建立含有表单的网页,01,.,02,.,能使用,HTML5,新增的元素,任务,1,“会员注册”页面制作,01,02,表单的基本语法,表单基本元素的介绍,任务,1,“会员注册”页面制作,-,01,表单的基本语法,表单是一个集合概念，它是一个能够包含表单元素的区域。表单是一个集合概念，它是一个能够包含表单元素的区域。,任务,1,“会员注册”页面制作,-02,表单基本元素的介绍,01,文本框,在,表单中，文本框用来让用户输入字母、数字等单行文本信息的,。,size,=“8”,，,value,=“,输入,你的,名字,”,，,在设计状态看到,如,右上,图效果,，长度为,8,，可以显示,4,个汉字，浏览时不同浏览器略有不同，,如,右下图,。,一般不建议使用,size,设置长度，而是通过,css,的,width,属性进行相应设置。,任务,1,“会员注册”页面制作,-02,表单基本元素的介绍,02,密码框,type,属性设置成,password,，就可以创建一个密码框，输入的字符以“”显示，已达到加密的作用放置别人偷看,。,密码,:,任务,1,“会员注册”页面制作,-02,表单基本元素的介绍,03,“提交”和“重置”,按钮,type=submit,和,type=reset,分别是“提交”和“重置”两按钮。“提交”按钮用于提交表单数据，将,form,中所有内容进行提交,action,页处理，“重置”按钮用于清空现有表单数据。,姓名,:,密码,:,任务,1,“会员注册”页面制作,-02,表单基本元素的介绍,04,普通按钮,type=button,是标准,Windows,风格的按钮，也就是普通按钮，当然要让按钮跳转到某个页面上还需要加入写,JavaScript,代码。,任务,1,“会员注册”页面制作,-02,表单基本元素的介绍,05,图片按钮,type=image,是比较另类的一个，代表图片按钮，虽然,type,没有设置为“,submit,”，但它有提交功能。,任务,1,“会员注册”页面制作,-02,表单基本元素的介绍,06,多选框,type=checkbox,表示多选框，常见于注册时选择爱好、性格等信息。参数有,name,、,value,及特别参数,checked,（表示默认选择），其实最重要的还是,value,值，提交到处理页的也就是,value,（附：,name,值可以不一样，但不推荐，建议,name,值相同）,。,爱好,:,运动,聊天,玩游戏,任务,1,“会员注册”页面制作,-02,表单基本元素的介绍,07,单选框,type=radio,即单选框，出现在多选一的页面中，如性别选择。参数同样有,name,、,value,及特别参数,checked,。不同于,checkbox,的是，,name,值一定要相同，否则就不能多选一。当然提交到处理页的也是,value,值,。,性别：,男,女,任务,1,“会员注册”页面制作,-02,表单基本元素的介绍,08,文件域表单,type=file,可以将本地网络上的某个文件以二进制数据流的形式传递到服务器，是当你在,BBS,上传图片，或者在,Email,中上传附件时一定少不了的东西，提供了一个文件目录输入的平台，会创建一个不能输入内容的地址文本框和一个“浏览”按钮，单击“浏览,.,”按钮，将会弹出“选择要加载的文件”窗口，选择文件后，路径将显示在地址文本框中,。,参数有,name,、,size,。使用这个元素时,form,元素的,method,属性必须设置为,post,。,任务,1,“会员注册”页面制作,-02,表单基本元素的介绍,09,下拉列表框,基本语法如下：,一般使用表单下拉列表选择数据，如省、市、县、年、月等数据，我们即可使用下拉菜单表单进行设置，,select,是下拉列表菜单标签，,option,为下拉列表数据标签，,value,为,option,的数据值（用于数据的传值），,selected,默认被选中的项,。,苹果,桔子,芒果,任务,1,“会员注册”页面制作,-02,表单基本元素的介绍,10,文本域,文本域，也就是多行输入框（,textarea,），主要用于输入两行或两行以上的较长文本信息，主要应用于用户留言或者聊天窗口以及协议。,基本语法如下：,初始文本,name,为传值命名，,cols,为文本域的可见字符宽度，也就是字符列数，表示每行可以输入多少列文字，跟具体数字，如,cols=1,表示一行最多可以输入一个汉字，两个字符。,rows,为文本域的可见字符行数，默认输入框区域显示高度，跟具体数字,。,请阅读服务协议,服务协议的具体内容,任务,1,“会员注册”页面制作,-02,表单基本元素的介绍,11,隐藏域,基本语法如下：,作用：隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击“发送”按钮发送表单的时候，隐藏域的信息也被一起发送到,服务器。,任务,1,“会员注册”页面制作,-02,表单基本元素的介绍,12,只读和禁用属性,只读和禁用效果分别通过,readonly,和,disabled,属性，例如要实现协议只读和注册按钮禁用的效果，对应的部分,HTML,代码：,服务协议的具体内容,任务,2 HTML5,新的,input,类型,1,email,输入类型,此类型要求键入格式正确的,email,地址，否则浏览器是不允许提交的,并会有一个错误信息提示。此类型必须指定,name,值，否则无效果,。,格式：,2,URL,输入类型,此类型要求输入格式正确的,url,地址，否则浏览器是不允许提交的,并会有一个错误信息提示。此类型必须指定,name,值，否则无效果。,格式：,3,时间日期相关输入类型,时间日期相关输入类型这一系列表单控件给我们提供了丰富的用于日期选择的表单样式，包括年、月、周、日等。只需要一行代码就可以实现交互性非常强的效果，然而遗憾的是目前在,Windows,下仅有,Chrome,和,Opera,支持。,格式：,格式：,4,number,输入类型,说明：用于输入一个数值，可以通过属性设置最小值、最大值、数字间隔、默认值,(IE,不支持,),。,格式：,max,：规定允许的最大值；,min,：规定允许的最小值；,step,：规定合法的数字间隔；,value,：规定默认值,；,5,range,滑块类型,说明：和前面的,number,类似,只不过这里是用滑块展示,如果是在移动端展示的话,给用户的体验会比较好。,格式：,max,：规定允许的最大值；,min,：规定允许的最小值；,step,：规定合法的数字间隔；,value,：规定默认值,；,6,search,输入类型,说明：此类型表示输入的将是一个搜索关键字,通过设置,results=s,可显示一个搜索小图标。,格式：,7,tel,输入类型,说明：此类型要求输入一个电话号码，换行符会从输入值中去掉。,格式：,8,color,输入类型,说明：一个非常炫酷的效果,并且在最新的火狐、谷歌、欧朋浏览器中都支持，可让用户通过颜色选择器选择一个颜色值，以十六进制保存，可以通过,value,访问到，并且可以自定义颜色组。,格式：,任务,3 HTML5,新的表单元素,1,datelist,标签,说明：,datalist,元素规定输入域的选项列表。,列表是通过,datalist,内的,option,元素创建的。,如需把,datalist,绑定到输入域，用输入域的,list,属性引用,datalist,的,id.,列表当中的,value,属性是必须，新版本的,Chrome,和,Opera,支持该属性。,2,keygen,标签,说明：,keygen,元素的作用是提供一种验证用户的可靠方法。,keygen,元素是密钥对生成器。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥存储于客户端，公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书。,格式,:,用户名,:,加密,:,3,output,标签,说明：,output,用于计算结果的,输出,.,/,页面加载完成后执行,window.onload=function(),/,通过,id,获取表单元素,var number=,document.getElementById,(number);,var total=document.getElementById(total);,/,添加失去焦点事件,number.onblur=function,(),/,计算总价 利用单价乘以数目,var,totalprice=parseInt(document.getElementById(price).value)*parseInt(this.value),/,将结果输出,total.value=totalprice;,单价,:,数目,:,总价,:,感谢聆听,