HTML制作表单PPT

1、,百万在岗人员学历提升行动计划培训课程,网页设计,表单制作 上海开放大学浦东南校 缪卫平,SOUTH PUDONG OPEN UNIVERSITY,认识表单 熟悉控件添加 制作简单的表单,本章目标,1.1.1表单初印象,表单应用场合 注册 登陆 调查反馈 查询,注册中应用表单,登录时应用表单,调查反馈时应用表单,查询时应用表单,是web网页上用户界面元素的集合体。而用户界面元素就是网页上一些能让用户实施交互的东西，例如： 能输入一段信息的文本域， 能让用户选择是或否的问题式框， 为用户提供一系列选项的弹出式菜单， 用户可以按动的按钮等。,1.1.2表单？,1.1.3表单作用,表单在Web网页中

2、用以让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程序以处理，从而使得Web服务器与用户之间具有交互功能,1.1.4表单工作机制,访问一个包含表单的页面， 输入数据后，提交表单,浏览器将用户在表单中输入的数 据进行打包，并发送给服务器,服务器接收数据并转由程序处理,data1,data2,1.1.5HTML定义表单,在HTML文档中，标记，用来定义表单的开始和结束 在表单之间嵌入各类表单控件标记（如：文本输入框、密码框、单选按钮、复选框、提交按钮、复位按钮、列表框等）供用户输入信息数据 表单控件标记和表单标记一起工作，共同发挥作用, 用户名： 年 龄： ,表单标记

3、,各类表单控件标记,案例运行,1.1.6表单举例,1.2 表单标记,标记负责创建一个表单 标记的重要属性 action属性 指定表单数据提交至哪个程序，让其处理表单内容 method属性 指定表单数据提交的方式（ get方式和post方式）, ,1.2.1表单提交理解action属性, 用户名： 年 龄： ,点击提交按钮，浏览器根据表单控件元素名称和表单控件元素值打 包表单中输入的数据，发送给action属性指定的服务器端程序 ，表单所在页面也相应跳转，如果action为空或不写，表示提交给 当前页面,action属性值：url地址 相对或绝对路径,1.2.2表单提交说明method属性, 用

4、户名： 年 龄： ,根据method属性值（get 或post），浏览器发送打包数 据的形式有所不同,method属性值： 传送方式post,method属性值：get 浏览器在action指定的URL地址后以？形式带上打包数据，多个打包数据之间以&分隔 传递数据在url地址栏可见 以get方式传递数据，传递数据量有限 如果不指定method属性值，get是默认提交方式,method属性值：post 浏览器将打包数据作为请求消息的实体内容进行发送，多个数据之间以&分隔 传递数据在url地址栏不可见 以post方式传递数据，传递数据量无限制,1.2.3method属性get和post,示例,代码

5、,示例,代码,实例,1.3 表单控件标记I,表单控件标记I ,表单控件标记嵌套在标记之内，又称做 表单控件元素或表单元素,1.3.1 表单控件标记I,能够演变为表单中许多不同的控件标记，取决于type属性 type取值： text(单行输入文本框) password（密码输入文本框) submit（提交按钮） reset(复位按钮) radio（单选按钮） checkbox（复选框） button（普通按钮）,单行文本框,创建一个单行文本框 type属性值为text的标记在网页中创建一个单行文本框 name属性：文本框名称 size属性：文本框长度 maxlength属性：文本框最多输入字符数

6、 value属性：文本框中默认值,示例,代码,密码框,创建一个密码文本框 type属性值：password name属性值：控件名称 size属性值：指定密码框大小 maxlength属性值：允许输入最多字符 输入的文本显示为密码形式,示例,代码,提交按钮,创建一个用以提交表单的按钮 type属性值：submit value属性值：指定按钮上显示文字，不指定，浏览器采取默认显示（提交） 作用：点击提交按钮，浏览器将提交表单,示例,代码,复位按钮,将表单元素值恢复为初始默认值 type属性值：reset value属性值：指定按钮上显示文字，不指定，浏览器采取默认显示（重置）,示例,代码,单选按

7、钮,创建单选按钮元素 type属性：radio name属性值：单选按钮的控件名称 value属性值：用户选中后，传送到服务器的值 checked属性值：默认选中的单选项 具有相同name的多个单选按钮称为单选按钮组，一次只能有一项被选中 提交表单时，选中项的value和name被打包发送,示例,代码,复选按钮,创建复选按钮元素 input type=checkbox name=名称value=复选按钮的值 checked=checked/ type属性值：checkbox value属性值：用户选中后，传送到服务器的值 checked属性值：默认选中的复选项 具有相同name的多个复选按钮称

8、为复选按钮组，一次可以选择多项 提交表单时，所有选中项的value和name被打包发送：,示例,代码,普通按钮,创建普通按钮 显示为一个普通按钮 通常和javascript程序代码配合使用,示例,代码,图像控件,创建图像按钮 type属性：image name属性值：控件名称 src属性值：图像文件地址,示例,代码,隐藏控件,创建隐藏控件 type属性：hidden name属性值：控件名称 用于在表单中包含不希望用户看见的信息,百度搜索HTML5 的get发送信息,文件控件,创建文件控件，便于上传文件 type属性：file name属性值：控件名称 value属性值：上传文件的本地地址,示例,代码,1.4 表单控件标记II,表单控件标记II 多行文本框 列表框,表单控件标记嵌套在标记之内，又称做 “表单控件元素”或“表单元素”,多行文本框,创建一个可输入多行文本的文本框 rows, cols属性：指定行数、列数，不指定则浏览器采取默认显示 标记之间可以放置文本作为显示的初始值, 多行文本框的初始显示内容 ,示例,代码,列表框,标记创建一个列表框 标记创建一个列表项 与嵌套的一起使用，共同提供在一组选项