chapter3表单.ppt

第三章 表单 回顾 使用HTML创建一个表格至少需要哪些标签 跨多行表格是在单元格里用哪个属性进行设置 对表格进行美化 主要用哪些属性进行设置 预习检查 请列举表单中有哪些常用的表单元素 创建一个框架页面至少需要哪几个标签 本章任务 制作 注册 页面 本章目标 会使用表单的基本结构制作表单页面会使用各种表单元素实现注册页面能理解post和get两种提交方式的区别 表单 表单的典型应用注册用户收集信息反馈信息为网站提供搜索工具 注册用户 收集信息 反馈信息 提供搜索工具 表单包含的控件 单行文本输入框 TEXT 单选按钮 RADIO 复选框 CHECKBOX 下拉列表 SELECT 重置按钮 RESET 提交按钮 SUBMIT 多行文本框 TEXTAREA 密码框 PASSWORD 表单页面的基本结构 METHOD post或get ACTION METHOD 指定提交后 由服务器上哪个处理程序处理 指定向服务器提交的方法 一般为post或get方法 post方法比较安全 ACTION URL 演示示例1 使用post提交方式和get提交方式 表单的基本语法2 2 用户名 密 表单输入元素 input 表单提交地址和方法的设置 表单的典型应用 假定登录126邮箱 表单的执行原理 Internet 1 2 客户端 请求登录 通过表单填写账户信息 服务器端 验证发来的账号信息 然后给出反馈 客户端和服务器类似两人沟通一样 从而建立交互活动 指定元素的类型 可为text radio submit等 控件的名称 控件的初始值 控件的初始宽度 控件中输入的最多字符个数 控件是否被选中checked 表单元素的基本格式 文本框 用户名 表单元素的逐一介绍8 1 单行文本输入框 字符宽度为21 name用于服务器端获取数据 例如 request getParameter userName 密码框 密码 表单元素的逐一介绍8 2 隐藏输入的信息 按钮 表单元素的逐一介绍8 3 普通按钮 button提交按钮 submit重置 清空 按钮 reset图片按钮 image 单选按钮 性别 表单元素的逐一介绍8 4 特点 单选 名字name相同表明属于同一组 复选框 爱好 运动玩游戏 表单元素的逐一介绍8 5 特点 多选 练习 贵美登录页 需求说明 完成网站登录页面 完成时间 20分钟 1 提交地址 login aspx2 提交方法 post 文件域 表单元素的逐一介绍8 6 显示上传文件的地址 小结 前面所学的各类表单元素 语法分别是什么 列表框 选择月份 一月二月三月四月 表单元素的逐一介绍8 7 提供固定选项 避免用户输入错误 多行文本框 阅读贵美网服务协议欢迎阅读服务条款协议 表单元素的逐一介绍8 8 文本内容 隐藏域方便服务器端 记住 客户端的信息 但又不希望客户看到的数据 表单的高级用法2 1 隐藏的客户代号信息 666 但客户端页面不显示 隐藏域 既方便服务器端 记住 客户端的数据 又避免因显示浏览者不关心的数据导致用户反感 只读和禁用属性readonly 希望某个框内的内容只允许用户看 不能修改disabled 因没达到使用的条件 限制用户使用 欢迎阅读服务条款协议 贵美的权利和义务 同意以上协议 表单的高级用法2 2 1 用户不能修改协议2 勾选 同意以上协议 才允许点击 注册 按钮 练习 简易求职表 需求说明 使用表单制作简易求职表 协议 只读 提交 按钮禁用 用隐藏域提交求职者姓名 zhangsan 如何实现表单布局3 1 如何实现页面中登录表单的布局 问题 结构简单 但不美观 如何实现表单布局3 2 实际页面中的登录表单布局 实际应用 需要几行几列的表格布局 如何实现表单布局3 3 会员名 代码同 会员名 整体布局 4行3列的表格 图片后的内容跨2列 内容用 空格 填充 图片按钮