HTML制作表单.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,HTML制作表单,认识表单,熟悉控件添加,制作简单的表单,本章目标,1.1.1,表单初印象,表单,应用场合,注册,登陆,调查反馈,查询,注册,中应用,表单,登录时,应用,表单,调查反馈时,应用,表单,查询时,应用,表单,是,web,网页上用户界面元素的集合体。而用户界面元素就是网页上一些能让用户实施交互的东西，例如：,能输入一段信息的文本域，能让用户选择是或否的问题式框，,为用户提供一系列选项的弹出式菜单，,用户可以按动的按钮等。,1.1.2,表单？,1.1.3,表单作用,表单在,Web,网页中用以让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给,Web,服务器端的程序以处理，从而使得,Web,服务器与用户之间具有交互功能,1.1.4,表单工作机制,访问一个包含表单的页面，,输入数据后，,提交,表单,浏览器将用户在表单中输入的数,据进行打包，并发送给服务器,服务器接收数据并转由程序处理,data1,data2,1.1.5HTML,定义表单,在,HTML,文档中，,标记，用来定义表单的开始和结束,在表单,之间嵌入各类,表单控件标记,（如：文本输入框、密码框、单选按钮、复选框、提交按钮、复位按钮、列表框等）供用户输入信息数据,表单控件标记和表单,标记一起工作，共同发挥作用,大家应该也有点累了，稍作休息,大家有疑问的，可以询问和交流,用户名,：,年 龄,：,表单标记,各类表单控件标记,案例运行,1.1.6,表单举例,1.2,表单标记,标记负责创建一个表单,标记的重要属性,action,属性,指定表单数据提交至哪个程序，让其处理表单内容,method,属性,指定表单数据提交的方式（,get,方式和,post,方式）,1.2.1,表单提交理解,action,属性,用户名,：,年 龄,：,点击提交按钮，浏览器根据表单控件元素名称和表单控件元素值打,包表单中输入的数据，发送给,action,属性指定的服务器端程序,，表单所在页面也相应跳转，如果,action,为空或不写，表示提交给,当前页面,action,属性值：,url,地址,相对或绝对路径,1.2.2,表单提交说明,method,属性,用户名,：,年 龄,：,根据,method,属性值（,get,或,post,），浏览器发送打包数,据的形式有所不同,method,属性值：,传送方式,post,method,属性值：,get,浏览器在,action,指定的,URL,地址后以,？,形式带上打包数据，多个打包数据之间以,&,分隔,传递数据在,url,地址栏可见,以,get,方式传递数据，传递数据量有限,如果不指定,method,属性值，,get,是默认提交方式,method,属性值：,post,浏览器将打包数据作为请求消息的实体内容进行发送，多个数据之间以,&,分隔,传递数据在,url,地址栏不可见,以,post,方式传递数据，传递数据量无限制,1.2.3method,属性,get,和,post,示例,代码,示例,代码,实例,1.3,表单控件标记,I,表单控件标记,I,表单控件标记嵌套在,标记之内，又称做,表单控件元素,或,表单元素,1.3.1,表单控件标记,I,能够演变为表单中许多不同的控件标记，取决于,type,属性,type,取值：,text(,单行输入文本框,),password,（密码输入文本框,),submit,（提交按钮）,reset(,复位按钮,),radio,（单选按钮）,checkbox,（复选框）,button,（普通按钮）,单行文本框,创建一个单行文本框,type,属性值为,text,的,标记在网页中创建一个单行文本框,name,属性：文本框名称,size,属性：文本框长度,maxlength,属性：文本框最多输入字符数,value,属性：文本框中默认值,示例,代码,密码框,创建一个密码文本框,type,属性值：,password,name,属性值：控件名称,size,属性值：指定密码框大小,maxlength属性值：允许输入最多字符,输入的文本显示为密码形式,示例,代码,提交按钮,创建一个用以提交表单的按钮,type,属性值：,submit,value,属性值：指定按钮上显示文字，不指定，浏览器采取默认显示（提交）,作用：点击提交按钮，浏览器将提交表单,示例,代码,复位按钮,将表单元素值恢复为初始默认值,type,属性值：,reset,value,属性值：指定按钮上显示文字，不指定，浏览器采取默认显示（重置）,示例,代码,单选按钮,创建单选按钮元素,type,属性：,radio,name,属性值：单选按钮的控件名称,value,属性值：用户选中后，传送到服务器的值,checked,属性值：默认选中的单选项,具有相同,name,的多个单选按钮称为单选按钮组，一次只能有一项被选中,提交表单时，选中项的,value,和,name,被打包发送,示例,代码,复选按钮,创建复选按钮元素,input type=,checkbox,name=,名称,value=,复选按钮的值,checked=checked/,type,属性值：,checkbox,value,属性值：用户选中后，传送到服务器的值,checked,属性值：默认选中的复选项,具有,相同,name,的多个复选按钮称为,复选按钮组,，一次可以选择多项,提交表单时，所有选中项的,value,和,name,被打包发送：,示例,代码,普通按钮,创建普通按钮,显示为一个普通按钮,通常和,javascript,程序代码配合使用,示例,代码,图像控件,创建图像按钮,type,属性：,image,name,属性值：控件名称,src,属性值：图像文件地址,示例,代码,隐藏控件,创建隐藏控件,type,属性：,hidden,name,属性值：控件名称,用于在表单中包含不希望用户看见的信息,百度搜索,HTML5,的,get,发送信息,文件控件,创建文件控件，便于上传文件,type,属性：,file,name,属性值：控件名称,value,属性值：上传文件的本地地址,示例,代码,1.4,表单控件标记,II,表单控件标记,II,多行文本框,列表框,表单控件标记嵌套在,标记之内，又称做,“表单控件元素”或“表单元素”,多行文本框,创建一个可输入多行文本的文本框,rows,cols,属性：指定行数、列数，不指定则浏览器采取默认显示,标记之间可以放置文本作为显示的初始值,多行文本框的初始显示内容,示例,代码,列表框,标记创建一个列表框,标记创建一个列表项,与嵌套的,一起使用，共同提供在一组选项中进行选择的方式,安徽,北京,西藏,列表框名称,一个,选项,不需要,name,示例,代码,1.5,作业,