html表单概要1.ppt

HTML(表单) 上节回顾 图片和多媒体文件的使用 预习检查 表单中一般包括哪些常用的表单元素？ 按钮和复选框的应用场合？ 本章任务 制作“注册”表单页面 本章目标 使用各种表单元素实现注册页面 表单的典型应用 为什么使用表单 用户登录/注册 收集用户反馈信息 提供搜索工具 单行文本框(text) 单选按钮(radio) 复选框(checkbox) 下拉列表(select) 重置按钮 (reset) 提交按钮(submit) 密码框(password) 常见的表单元素 文本域(textarea) form action=表单提交地址 method=提交方法 … 文本框、按钮等表单元素… /form 表单的基本语法2-1 指定提交后，由服务器上哪个处理程序处理 指定向服务器提交的方法： 一般为post或get方法, post方法比较安全 表单的基本语法2-2 …… form action=login.jsp method=post p用户名：input name=username type=text size=20 maxlength=10 //p p密nbsp;nbsp;码： input name=pwd type=password size=20 //p pinput type=submit name=btn value=提交 /nbsp;nbsp; input name=reset type=reset value=重填 //p /form …… 表单输入元素：input 表单提交地址和方法的设置 操作演示9：表单应用 表单的典型应用：假定登录 126 邮箱 表单的执行原理 Internet 1 2 客户端：请求登录，通过表单填写账户信息 服务器端：验证发来的账号信息，然后给出反馈 客户端和服务器类似两人沟通一样，从而建立交互活动 input name=表单元素名称 type=类型 value=值 size=显示宽度 maxlength=最大长度 checked=是否选中 / 指定元素的类型，可为text、radio、submit等 控件的名称 控件的初始值 控件的初始宽度 控件中输入的最多字符个数 控件是否被选中checked 表单元素的基本格式 文本框 form method=post action= p用户名： input name= userName type=text size=21 / /p …… /form 表单元素的逐一介绍8-1 单行文本输入框，字符宽度为21 name用于服务器端获取数据，例如：request.getParameter(userName ) 操作演示10：文本框应用 input name= 名称 type= text value= 初值 size= 数字“/ 密码框 form method=post action= p密nbsp;nbsp;码： input name=pass type=password size=22 / /p …… /form 表单元素的逐一介绍8-2 隐藏输入的信息 操作演示10：密码框应用 input name= 名称 type=password value=初值? size=数字 按钮 ...... input type=reset name=reset value= 重填 / input type=submit name=button value=同意…… / input type=button name=confirm value=点播音乐 / input type=button name=cancel value=取消 / input type=image src=images/login.gif / …… 表单元素的逐一介绍8-3 操作演示10：命名按钮应用 input name= 名称 type= 按钮类型 value=按钮文字 ? src=图片按钮的图片url 普通按钮：button 提交按钮：submit 重置（清空）按钮：reset 图片按钮：image 单选按钮 ...... br /性别： input name=gen type=radio value=男 checked=checked input name=gen type=radio value=女 …… 表单元素的逐一介绍8-4 特点：单选 名字name相同表明属于同一组 操作演示11：单选按钮应用 in