HTML制作表单.ppt

讲解要点： 网页设计 表单制作 上海开放大学浦东南校 缪卫平 SOUTH PUDONG OPEN UNIVERSITY 认识表单 熟悉控件添加 制作简单的表单 本章目标 1.1.1表单初印象 表单应用场合 注册 登陆 调查反馈 查询 注册中应用表单 登录时应用表单 调查反馈时应用表单 查询时应用表单 是web网页上用户界面元素的集合体。而用户界面元素就是网页上一些能让用户实施交互的东西，例如： 能输入一段信息的文本域， 能让用户选择是或否的问题式框， 为用户提供一系列选项的弹出式菜单， 用户可以按动的按钮等。 1.1.2表单？ 1.1.3表单作用 表单在Web网页中用以让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程序以处理，从而使得Web服务器与用户之间具有交互功能 1.1.4表单工作机制 访问一个包含表单的页面， 输入数据后，提交表单 浏览器将用户在表单中输入的数 据进行打包，并发送给服务器 服务器接收数据并转由程序处理 data1 ① ② ③ data2 1.1.5HTML定义表单 在HTML文档中，form/form标记，用来定义表单的开始和结束 在表单form/form之间嵌入各类表单控件标记（如：文本输入框、密码框、单选按钮、复选框、提交按钮、复位按钮、列表框等）供用户输入信息数据 表单控件标记和表单form标记一起工作，共同发挥作用 form action= http://localhost:8080/MyApp/1.jsp method=post 用户名：input type=text name=userName/ br/ 年 龄：input type=text name=age/ br/ input type=submit value=提交查询/ /form 表单标记 各类表单控件标记 案例运行 1.1.6表单举例 1.2 表单标记form form/form标记负责创建一个表单 form标记的重要属性 action属性 指定表单数据提交至哪个程序，让其处理表单内容 method属性 指定表单数据提交的方式（ get方式和post方式） form action =“url” method=“post“ name=“表单名” /form 1.2.1表单提交理解——action属性 form action= http://localhost:8080/myApp/1.jsp method=post“ name=“login” 用户名：input type =text name=userName/ br/ 年 龄：input type=text name=age/ br/ input type=submit/ /form 点击提交按钮，浏览器根据表单控件元素名称和表单控件元素值打 包表单中输入的数据，发送给action属性指定的服务器端程序 ，表单所在页面也相应跳转，如果action为空或不写，表示提交给 当前页面 action属性值：url地址 相对或绝对路径 1.2.2表单提交说明——method属性 form action= http://localhost:8080/MyApp/1.jsp method=post 用户名：input type =text name=userName/ br/ 年 龄：input type=text name=age/ br/ input type=submit/ /form 根据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 input 表单控件标记嵌套在form标记之内，又称做 表单控件元素或表单元素 1.3.1 表单控件标记——I input能够演变为表单中许多不同的控件标记，取决于type属性 type取值： text(单行输入文本框) password（密码输入文本框) submit（提交按钮） reset(复位按钮) radi