HTML制作表单ppt课件

,百万在岗人员学历提升行动计划培训课程,网页设计,表单制作上海开放大学浦东南校缪卫平,SOUTHPUDONGOPENUNIVERSITY,认识表单熟悉控件添加制作简单的表单,本章目标,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属性值：passwordname属性值：控件名称size属性值：指定密码框大小maxlength属性值：允许输入最多字符输入的文本显示为密码形式,示例,代码,提交按钮,创建一个用以提交表单的按钮type属性值：submitvalue属性值：指定按钮上显示文字，不指定，浏览器采取默认显示（提交）作用：点击提交按钮，浏览器将提交表单,示例,代码,复位按钮,将表单元素值恢复为初始默认值type属性值：resetvalue属性值：指定按钮上显示文字，不指定，浏览器采取默认显示（重置）,示例,代码,单选按钮,创建单选按钮元素type属性：radioname属性值：单选按钮的控件名称value属性值：用户选中后，传送到服务器的值checked属性值：默认选中的单选项具有相同name的多个单选按钮称为单选按钮组，一次只能有一项被选中提交表单时，选中项的value和name被打包发送,示例,代码,复选按钮,创建复选按钮元素inputtype=checkboxname=名称value=复选按钮的值checked=checked/type属性值：checkboxvalue属性值：用户选中后，传送到服务器的值checked属性值：默认选中的复选项具有相同name的多个复选按钮称为复选按钮组，一次可以选择多项提交表单时，所有选中项的value和name被打包发送：,示例,代码,普通按钮,创建普通按钮显示为一个普通按钮通常和javascript程序代码配合使用,示例,代码,图像控件,创建图像按钮type属性：imagename属性值：控件名称src属性值：图像文件地址,示例,代码,隐藏控件,创建隐藏控件type属性：hiddenname属性值：控件名称用于在表单中包含不希望用户看见的信息,百度搜索HTML5的get发送信息,文件控件,创建文件控件，便于上传文件type属性：filename属性值：控件名称value属性值：上传文件的本地地址,示例,代码,1.4表单控件标记II,表单控件标记II多行文本框列表框,表单控件标记嵌套在标记之内，又称做“表单控件元素”或“表单元素”,多行文本框,创建一个可输入多行文本的文本框rows,cols属性：指定行数、列数，不指定则浏览器采取默认显示标记之间可以放置文本作为显示的初始值,多行文本框的初始显示内容,示例,代码,列表框,标记创建一个列表框标记创